- 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 repo into thesrcdirectory inside of your newreact-friendsproject. - cd into
react-friendsand runnpm startoryarn startand navigate tolocalhost:3000.
- Inside of
App.jscreate your constructor function, (don't forget to super()) 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.
- Create your
PeopleListas a function component and 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. - Go to town styling your 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!
componentDidMount(){
this.setState({People: people});
}
import React, { Component } from 'react';
import './App.css';
import { people } from './people';
import { PeopleList } from './PeopleList';
class App extends Component {
constructor() {
super();
this.state = {
People: [],
};
}
componentDidMount() {
this.setState({People: people});
}
render() {
return (
<div className="App">
<h1>Hello React App</h1>
<PeopleList people={this.state.People} />
</div>
);
}
}
export default App;
import React from 'react';
import Person from './Person';
import './PeopleList.css';
export const PeopleList = (props) => {
return (
<div className="People-Wrapper">
{props.people.map((person => {
return (
<div>
<h4>{person.first_name}</h4>
<h4>{person.last_name}</h4>
<div>{person.email}</div>
</div>
)
}))}
</div>
)
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent