- Describe what causes a react component to re-render
- Explain what component lifecycle methods are
- Connect a component to an API
- Retrieve data
- Post new data
Turn to your neighbor and discuss how react components render. What causes a component to update (re-render)?
Your answer...
Without looking at the chart, try to recall all the built-in lifecycle methods in a react component. Then organize them in the order they are called.
Resources: https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
Start by forking and cloning the following project: https://github.com/gSchool/react-api-exercise
npm i
& npm run server
to start the vote API.
- Create a
<CandidateList>
component that has the following in state:
candidates: [
{ id: 0, name: 'placeholder', party: 'no party', votes: 0 },
]
- Create a
<Candidate>
component that uses the following jsx:
<div className='ballot'>
<h3>{name}</h3>
<p>
<span>Party: </span>{party}
<span>Votes: </span>{votes}
</p>
<button>+</button>
</div>
-
Add an API GET request to
http://localhost:3001/candidates
in the<CandidateList>
component to retrieve the candidates from the server and overwrite the state. -
Add an API POST request to
http://localhost:3001/vote/:id
so that when I click the+
button, the vote count is increased and persisted on the server.
- Show a spinner while the
<CandidateList>
component is loading the data from the server.-
Run
npm i express-delay
& add the following lines toserver/server.js
:var delay = require('express-delay'); app.use(delay(1000));
-
Install a simple spinner component:
npm install reactjs-simple-spinner
(docs) -
Add an
isLoading
boolean to state -
Use
isLoading
to conditionally render a<Spinner />
while the api request is loading.
-