Build a user interface with React
ECA React - December 12th 2018
Congratulations!
You know what is...
- ES6
- React
- Virtual DOM
- JSX
- component
- state
- props
- stateful component
- stateless functional component
You know how to...
- Create a new project with create-react-app
- Set up VSCode
- Use some shortcuts simple-react-snippets: imrc, cc, sfc
-
Build a component
- stateful components: class ... extends Component
- stateless functional components: () => { }
- Render in the component inside the DOM
- Render a list
- Integrate a component inside another component
- Pass data to a component (props)
- Raise and handle event
- Lift the state up
- Use React Dev Tools and a CSS library
Congratulations!
but... wait...
... do you really feel confident on everything? ...
Lab time!
What you'll see...
-
Everything from the start
-
Lifecycle hooks
-
ES6 promises, async/await
-
Fetch data from external API
-
Deployment
151 Pokemon in the Pokedex left!
Name
Type
Likes
Display
...
...
10
...
...
8
...
...
7
...
...
7
...
...
7
...
...
5
...
...
2
...
...
2
Display
Display
Display
Display
Display
Display
Display
Display
Id
...
...
...
...
...
...
...
...
Pikachu
If you wave its tail, it will try to bite you
Delete
Like
App
NavBar
PokeTable
PokePage
pokedex
PokeRow
Description
Demo
Lifecycle Hooks
Mount
Update
Unmount
constructor
render
componentDidMount
render
componentDidUpdate
componentWillUnmount
Try it here
ES6 Promises
Async/Await
Fetch
"Imagine you are a kid. Your mom promises you that she'll get you a new phone next week."
const getPokemon = () => {
startLoadingAnimation();
return fetch(`https://pokeapi.co/api/v2/pokemon/1/`)
.then(res => res.json())
.then(data => data.name)
.catch(err => `Error while fetching pokemon name : ${err}`)
.finally(stopLoadingAnimation());
}const getPokemon = async () => {
try {
startLoadingAnimation();
const res = await fetch(`https://pokeapi.co/api/v2/pokemon/1/`);
const data = await res.json();
return data.name;
} catch (err) {
return `Error while fetching pokemon name : ${err}`;
} finally {
stopLoadingAnimation();
}
}151 Pokemon in the Pokedex left!
Name
Type
Likes
Display
...
...
10
...
...
8
...
...
7
...
...
7
...
...
7
...
...
5
...
...
2
...
...
2
Display
Display
Display
Display
Display
Display
Display
Display
Id
...
...
...
...
...
...
...
...
Pikachu
If you wave its tail, it will try to bite you
Delete
Like
Instructions
Last session
next wednesday!