Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Latest commit

 

History

History
History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Outline

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

Morty Proxy This is a proxified and sanitized view of the page, visit original site.