- This mini project is designed to get you used to how components can be built around data that is a bit more complicated, and that doesn't just necessarily exist on a component's state. We're going to be using an external data source (although it'll be found locally in our project) from a file in our app called
people.js. Your goal is to usecomponentDidMountto set that data on the state of the component you'll be building, and consuming it within arenderfunction.
- React's Lifecycle
- componentDidMount
- render
- JSON
- this.setState
- props
- className for styling react components
- If you haven't already, please install
create-react-app - Link here
- Fork and clone this project and cd into it.
- From within this directory run
create-react-app react-friends. - Move the
people.jsfile from this directory into thesrcdirectory inside of your newreact-friendsproject. - cd into
react-friendsand runyarn startor and navigate tolocalhost:3000.
- Inside of
App.jscreate your constructor function, (don't forget to super() Remember The CCR Steps) and add a state object to it. Inside that state object define an array called People. - Import people data in like so:
import { people } from './people.js(if you haven't included people in yoursrcdirectory this wont work); - Create a method called componentDidMount and set the people data on state.
componentDidMount(){
this.setState({ people: people });
}
- Create your
PeopleListas a function component and got back toApp.jsand import it in as:import { PeopleList } from './PeopleList'. - Pass your
Peopledata down to PeopleList and render out the People List<PeopleList people={this.state.people} />. - For each person in
PeopleListrender out the first_name and last_name and email.
- Notice that each person object has a an array of friends assigned to it. The goal for the stretch problem will be to have a
FriendsListdrop down built out that hides the friends for each person until it is clicked on. - Once a user clicks on your FriendsList card, display that user's friends.
-
There are many ways to style a React Application I recommend looking into
ReactstrapLink andStyled-ComponentsLink. Both are fantastic, but they're two different paradigms. -
Note If you want to take the traditional
cssroute that is perfectly fine too! There will be a demo provided in the future aboutReactstrapandStyled-Components. -
Create a file called PeopleList.css and go to town styling! Try and center each person on the screen.
-
Import PeopleList styles into PeopleList.js as `import './PeopleList.css'; to grant you access to the className references.
- Hint: Delete the styles in the app.css and index.css files and do it on your own! Make things look pretty!