nikfrank/react-course

react from scratch course

by nik frank

to bake a cake from scratch, we must first create the universe
- carl sagan

git cheat sheet

git cheat sheet

workbooks

workbook 0 - blackjack

lesson 0

workbook 0 will walk you through running the repl (read evaluate print loop... the basic runtime of a program) for reactJS. We just have one line of code to write and we'll end up with a blackjack dealer!

workbook 1 - ulpan

lesson 1

workbook 1 we'll be rendering all the words I don't know in Hebrew. This is a super simple example to get used to reading from our React.Component's .state, and rendering from lists

workbook 2 - work for snoop

lesson 2

workbook 2 we'll make an application form for a job with Snoop Doggy Dogg (I don't have his permission to use his name or likeness, so sue me). Here we'll learn the "controlled input flow" for getting data from users, filtering & validating it; as well as basic conditional rendering.

workbook 3 - plan a party

lesson 3

workbook 3 we're building a larger feature (an event input form with multiple pages). So we'll have to finally learn to make our own Component, use props to pass data as well as callbacks.

workbook 4 - btc what-if machine

lesson 4

here we'll use external APIs for exchange rate data to build a useful app - which tells our blockchain friends how much money they'd have if they'd just bought btc at $30 when they heard about it for the first time.

We'll use a 3rd party lib for charts, and design our front end for desktop and mobile.

(( for in person students, this is probably a good time to learn heroku deploy ))

---

notes

cd commands need to be explained

git commands need to be explained

(link to git cheat sheet)

concepts sections -> ### ** por ejemplo **

review all ./lessons -> needs fileNames on all js

explicit placeholders, more pseudocode comments

using images to teach the teaching method (this is a placeholder) OR course styleguide

3 should be lifeCycle lesson + advance with eventHandler

concepts sections should be funnier / bizarre + landmarking (memory palace, story)

concepts sections should not be walkthroughs

use as platform for priming (discuss "this is how we could do whatever something)

see then walk

what is currently labeled "concepts" is more like "tactics" which has a place somewhere

repeat concept from second angle

wet = with metaphor

dry = without metaphor

then walkthrough

mini concepts

minimum viable walkthrough for main topic

full concepts

full exercises

---

notes features:

1. screenshot the code blocks

• use arrows for directional code
• use some symbol/color for functions based on what kind of thing they do
• use specialized color for labeling framework specific names / (lifecycle, hooks)