Classroom
Your Trainer
Robin Böhm
Dashboard
Tasks
Chat
Materials
React & TypeScript
Anonymous attendee
Remote Workshop Introduction (Zoom)
3 Tasks
1
Install the current version of Zoom
Preparation
ca. 10 min
2
Prepare your headset / headphones
Preparation
ca. 10 min
3
Ensure you have a stable internet connection
Preparation
ca. 10 min
React TypeScript Workshop Introduction
2 Tasks
Slides
PDF
1
Preparation
Preparation
ca. 20 min
2
Introduction of participants
ca. 15 min
JavaScript for React 2022
2 Tasks
Slides
PDF
1
JavaScript Playground 01
ca. 20 min
2
JavaScript Playground 02
ca. 15 min
TypeScript for React 2022
1 Tasks
Slides
PDF
1
Update the TypeScript definitions
ca. 10 min
React with TypeScript | Basics
11 Tasks
Slides
PDF
1
Test your knowledge
ca. 10 min
2
Create your demo app
ca. 5 min
3
Create a simple component with TSX
ca. 15 min
4
Implement Counter with useState
ca. 20 min
5
Extend a component with props
ca. 10 min
6
Components with multiple children
ca. 15 min
7
Fetch a book via HTTP
ca. 20 min
8
Explore the useEffect dependency array
ca. 15 min
9
Custom hook: `useBook`
ca. 10 min
10
React Context
ca. 20 min
11
Test your knowledge (Recap)
ca. 10 min
React with TypeScript | Forms
4 Tasks
Slides
PDF
1
What do you know about forms?
ca. 10 min
2
Refactor an uncontrolled component to a controlled component
ca. 15 min
3
Create a form with build-in validation
ca. 20 min
4
Create a form with own validation
ca. 25 min
React with TypeScript | Router
4 Tasks
Slides
PDF
1
Install and use the React Router
ca. 25 min
2
Create a route for a basic BookDetails component
ca. 20 min
3
Show data in BookDetails
ca. 30 min
4
Create a nested route to edit the details of a book
ca. 30 min
React with TypeScript | React Redux
7 Tasks
Slides
PDF
1
React Context: Build our own state management
ca. 60 min
2
useReducer hook: Introduction to reducer-, action- and dispatch-functions
ca. 30 min
3
Install Redux and create store
ca. 15 min
4
Redux count slice
ca. 20 min
5
Implement your first Redux Action (Books slice)
ca. 30 min
6
Create a selector
ca. 20 min
7
Load data with an async thunk
ca. 30 min
React with TypeScript | Testing
4 Tasks
Slides
PDF
1
TDD (Test driven development) with Jest
ca. 20 min
2
Component Tests
ca. 15 min
3
Snapshot Tests
ca. 15 min
4
Component Tests with interactivity
ca. 20 min