lesson-4

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

1. display total number of notes in header // passing state down

2. prevent saving an empty note (button must become disabled)

3. add propTypes for Header.js and Note.js components

4. replace the default with your github username in ./src/config/api.js

5. run node upload-data.js

6. implement "load notes from server" (will be step-by-step walk through) 😈

7. fetch notes in componentDidMount of App.js, transform and save notes to state

8. in App.js display <Spinner /> instead of <NoteList /> during server call

9. in App.js display 0 notes if there are no notes on server

10. in App.js display an errorMessage

11. implement

12. implement note deletion

13. add propTypes everywhere

Learning resources

• React Forms
• You Might Need Redux
• You Might Not Need Redux
• Michael Jackson - Never Write Another HoC
• Fetch API