Advanced React - Async

Goal - understand (unidirectional) data flow

TODO

[recap] Component's life cycle hooks recap
[recap] State & Props
[recap] Children + key (re-render)
[recap] PropTypes - Runtime TypeSafety
[recap] Promises + Async
[concept] HOC - Higher order components
[concept] FAC - Function as children / Render callback
[new] Effects
[new] Local (Components) state vs. Centralized (Atom) state
[new] Error handling / Loading (the state machine)

Problem - "Idea Journal"

make it work with server - CRUD
display loading state indicator
validate server payload via propTypes

Exercises

display total number of notes in header // passing state down
prevent saving an empty note (button must become disabled)
add propTypes for Header.js and Note.js components
replace the default with your github username in ./src/config/api.js
run node upload-data.js
implement "load notes from server" (will be step-by-step walk through) 😈
fetch notes in componentDidMount of App.js, transform and save notes to state
in App.js display <Spinner /> instead of <NoteList /> during server call
in App.js display 0 notes if there are no notes on server
in App.js display an errorMessage
implement
implement note deletion
add propTypes everywhere

Learning resources