You're going to create a component named after yourself (e.g. <Thomas />
, or <Evelyn />
or <Priya />
). It should contain the following information.
- Your full name
- Your cohort
- Your home address
- The make and model of your favorite vehicle
- The name, and species/breed of your favorite, or ideal, pet
Make sure you author components for each unique object being represented and compose them into the component named after you.
You're going to update your application that represents you to use state and props. Previously, you hard-coded the following information into your components.
- Your full name
- Your cohort
- Your home address
- The make and model of your favorite vehicle
- The name, and species/breed of your favorite, or ideal, pet
Now you need to pull all of that data that is scattered across your component files, and give your personal component an initial state with appropriate properties.
import React, { Component } from 'react'
import Home from "./Home" // Import the Home component
class Me extends Component {
constructor (props) {
super(props)
// Put all information about yourself as state properties
this.state = {
firstName: "Rachel",
lastName: "Morgan"
}
}
// Update your JSX to use state properties
render() {
return (
<div>
<h3>{this.state.firstName} ${this.state.lastName}</h3>
<h4>Evening Cohort 1</h4>
<h5>Nashville Software School</h5>
<Home />
</div>
);
}
}
export default Me
Now, pass the state values from your personal component to each of its children, and use those props in the children components.
Now it's time to take your personal data and expose it through an API with json-server
. Create a personal.json
file in your project with a people
collection. Put your information in that collection.
{
"people": [
{
// Your properties go here
}
]
}
Start your API with the following command.
json-server -p 8080 -w personal.json
Update your personal component to retrieve the information from the API, and when it is received, update the state of your component.
Create multiple collections in your API.
- Bio info (name and address)
- Car information
- Pet information
Use foreign keys to assign cars and pets to a person.
Once that's done, update your componentDidMount
function to load all the related data, and use setState
when each response comes back.
Create a navigation bar for your application with three links in it.
- Home
- Projects
- About Me
The home page should display the following information.
- Your name
- List of technologies you've learned so far
The projects page should list the name and a link to the repo for each group project that you've worked on so far.
The about me page should display any other interesting information about yourself that you want others to know.
- Favorite frogs
- Places you've traveled
- Comic book collection
etc...