Prerequisites:

• Command line / Shell
• Git
• HTML/CSS
• DOM api
• JavaScript / ES6 / JSON / AJAX / Promise

Branches:

git checkout branch_name

• the_beginning

  • introduce React core APIs in the familiar browser environment
  • String escaping by React
  • Component based architecture
  • functional components
  • class
  • JSX (with babel polyfill) - convert previous work
  • Adding styles // ?

• the_camp

  • install node
  • install npm
  • install create-react-app
  • basic commands
    • npm - install package / run dev server / run tests

• the_preparation

  • convert the previous examples into single page multi component version
    • modular way / multi file
  • props, state and the like
  • prop-types
  • forms - controlled/uncontrolled - refs
  • events - react to user actions - synthetic events // ?

• the_scout

  • new template / chat interface
  • convert into react (static)
  • data flow (through a parent component - revisit)
  • complete with interaction
  • life cycle methods (another template - form -> presentation -> log viewer)

• the_conquest

  • map related example(s)
    • data fetching (AJAX)
    • Introduce a map library
      • Leaflet
  • devTools (a run through) - most likely would have done by this point, but if not.

Advanced (if time permits)

• Testing

  • jest
  • storybook

• Data flow

  • flux/redux
  • ContextTypes

• SPA essentials

  • routing, multiple views.
  • thunks / sagas (add-on on flux/redux)

• React Extra

  • reconciliation
  • react 16 - portals
  • react 16 - error boundaries (?? should be day 2/3 ??)

• Good Practices

  • Higher Order Components, cross cutting concerns
  • recompose

Reference

Command line / Shell

• https://www.edx.org/course/introduction-linux-linuxfoundationx-lfs101x-1
• https://swcarpentry.github.io/shell-novice/
• https://www.udacity.com/course/shell-workshop--ud206
• https://www.udacity.com/course/linux-command-line-basics--ud595

Git

• https://try.github.io
• https://www.atlassian.com/git/tutorials
• http://rogerdudler.github.io/git-guide/
• https://www.coursera.org/learn/data-scientists-tools/lecture/SqWSK/introduction-to-github

HTML/CSS

• https://www.w3schools.com/html/html5_intro.asp
• http://diveintohtml5.info/
• https://www.edx.org/course/html5-css-fundamentals-w3cx-html5-0x-0
• https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css/p/css-basics
• https://www.udacity.com/course/html-and-css-syntax--ud001
• https://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1
• https://www.codecademy.com/courses/css-coding-with-style/0/1
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS

JavaScript / ES6 / JSON / AJAX / Promise

• https://www.coursera.org/learn/javascript-jquery-json

• https://www.codecademy.com/courses/javascript-beginner-en-g7vdk/0/1

• https://www.codecademy.com/courses/javascript-intermediate-en-2nQQb/0/1

• https://developers.google.com/web/fundamentals/primers/promises

• https://www.gitbook.com/book/samypesse/js-promises/details

• https://www.promisejs.org/

• https://github.com/getify/You-Dont-Know-JS

• https://www.freecodecamp.org/

• https://dev.to/srebalaji/es6-for-beginners-with-example-c7

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

DOM api

• https://www.codecademy.com/courses/javascript-beginner-en-gwcYv/0/1
• https://javascriptforwp.com/the-dom/
• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
• https://developer.mozilla.org/en-US/docs/Web/API
• https://dom.spec.whatwg.org/

React / Redux

• https://reactjs.org/tutorial/tutorial.html
• https://www.reactenlightenment.com/
• https://reactjs.org/docs/thinking-in-react.html
• http://lucasmreis.github.io/blog/simple-react-patterns/
• https://github.com/planningcenter/react-patterns
• https://www.gitbook.com/book/tonyhb/redux-without-profanity/details

Testing / Jest

• https://www.codecademy.com/courses/testing-your-code/0/1
• https://facebook.github.io/jest/docs/en/tutorial-react.html

Tooling / NPM / Webpack / Babel

• https://stanko.github.io/setting-up-webpack-babel-and-react-from-scratch/

Even more

• https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details