- React's Lifecycle
- Create React App
- npm and yarn
- JSON
- more on state, and sophisticated data
- this.setState
- props
- Flexbox
- className
-
Steps to get up and running
- Step 1: fork and clone this project and cd into it.
- Step 2: run
npm install create-react-app -g
to install CRA locally. - Step 3: run
create-react-app react-friends
. - Step 4: move the
people.js
file from this repo into thesrc
directory inside of your newreact-friends
project. - Step 5: cd into
react-friends
and runnpm start
oryarn start
and navigate tolocalhost:3000
.
-
App/PeopleList Set Up
- Step 1: inside of
App.js
create your constructor function, (don't forget to super()) and add a state object to it. Inside that state object define an array called People. - Step 2: import people data in like so:
import { people } from './people.js
(if you haven't included people in yoursrc
directory this wont work); _ Step 3: create a method called componentDidMount and set the people data on state. - Step 4: create your
PeopleList
as a function component and import it in as:import {PeopleList} from './PeopleList'
. - Step 5: pass your
People
data down to PeopleList and render out the People List<PeopleList people={this.state.People} />
. - Step 6: for each person in
PeopleList
render out the first_name and last_name and email. - Step 7: Go to town styling your components!
- Step 1: inside of
-
Styling Components
- Step 1: create a file called PeopleList.css and go to town styling! Try and center each person on the screen.
- Step 2: 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>
)
};