React 200

A SFEIR School

Slides

You can view the slides here.

Plan & Exercises

Fundamentals

Intro JSX, Elements, Components as functions, Props

• ex01 - HandsOn (JSX and props)

Component composition, Component Tree, Elements as Props, Children

• ex02 - Components (composition and children)

Local State and Simple Events

• ex03 - Local state and clicks (get interactive)
• ex03bis -> Introduction to hooks (useState)

Lists, Conditional rendering, more about children

• ex04 - Conditional, Lists (show 'em all)

More advanced concepts

Input / Refs / controlled and uncontrolled components

• ex05 - Controlled Components - Input (search)

Lifecycle, Effects and lifting state up

• ex06 - Lifecycle and Effects (async ftw)

Routing and Context

• ex07 - Navigation
• ex08 - Context

Forms - the problem statement

• ex09 - forms

runtime

$ npm start

Launches 3 servers :

• demos and index at http://localhost:8080, in watch mode
• exercises at http://localhost:1234, in watch mode
• API at http://localhost:3000/people

School: Expert

Looking for school expert ? PLease see README at ./src/expert/{school_name}/README.md.

Hooks

$ npm run start:hooks

For more information, please see ./src/expert/hooks/README.md.