Skip to content

Files

Latest commit

b18478c · Nov 2, 2017

History

History

lesson-4

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Nov 2, 2017
Nov 2, 2017
Nov 2, 2017
Nov 2, 2017
Nov 2, 2017
Nov 2, 2017
Nov 2, 2017

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