Agenda

Introduction (15m)

Setup

About this workshop

What is React? (15m)

8:30

JavaScript

Slides (5m)

Exercise: Modern JavaScript: Modules (15m)

8:50

Components

Slides (10m)

Exercise: Identifying Components (5m)

9:05

Components + React

Slides (15m)

9:20

Exercise: Modern JavaScript: Working With Variables (15m)

9:35 (have break by now!)

Exercise: JSX Fundamentals (20m)

10:05

Components + React + JSX

Slides (10m)

Exercise: What can a component render? (15m)

10:30

Props

Slides (10m)

Exercise: Composition/props.children (10m)

10:50 (another break)

CSS

Slides (10m)

Exercise: CSS (20m)

11:30

Routing

Slides (10m)

Exercise: React Router (15m)

12:00

Lunch?

1:00

State Management (30m)

Slides (10m)

Exercise: Managing Component State (20m)

1:30

Side Effects (30m)

Slides (10m)

Exercise: Loading Data (20m)

2:00

Application State (30m)

Slides (10m)

Exercise: React Context (20m)

2:30

Legacy Components (40m)

Exercise: Modern JavaScript: Class Syntax (15m)

Slides (5m)

Exercise: Converting Components (10m)

Exercises: Legacy State Mgmt & Side Effects (20m)

3:10

Testing (30m-50m)

Slides (10m)

Exercise: Testing Render (20m)

Exercise: Testing Interactions (20m)

4:00

Wrapping Up (10m-20m)

Good Practices (5m)

Questions (15m)

4:20