Axios
3rd Party Lib
larger size
lots of helper methods
OK error handling
Fetch API
Built in to browser
smaller size
Built in to browser
smaller size
write everything yourself
weird error handlingcreate-react-app comes with dotenv module
weird error handlingcreate-react-app comes with dotenv module
Please do this to hide your API key (in prod, this can be added to the site env variables):
create a .env.local file for your API key
add it to gitignore (automatically added usually)
add it to gitignore (automatically added usually)
Refactoring FoodApp to use API
json-server (fake online REST server for playing around with)
Put it into restaurant services
For admin page: we need the componentDidUpdate()
componentDidUpdate(prevState){
if (prevState.restaurants.length !== this.state.restaurants.length} {
this.fetchRestaurants();
this.fetchRestaurants();
}
}Use JSON.stringify to populate the JSON object because JSON keys and values need to be strings
}Use JSON.stringify to populate the JSON object because JSON keys and values need to be strings
Hooks
backward-compatible
useState Hook. It serves as a way of making use of state in React functional components. With theuseState() Hook, we’ve been able to use state in this functional component. It uses a similar syntax with destructuring assignment for arrays.
Stuff I Have Learnt 