Remote Workshop Introduction 3 Tasks
1 Install current version of Zoom
ca. 10 min
Preparation
2 Prepare your Headset / Headphones
ca. 10 min
Preparation
3 Ensure you have a stable internet connection
ca. 10 min
Preparation
React TypeScript Workshop Introduction 2 Tasks
Slides PDF
1 Preparation
ca. 20 min
Preparation
2 Introduction of participants
ca. 15 min
JavaScript for React 2021 2 Tasks
Slides PDF
1 JavaScript Playground 01
ca. 15 min
2 JavaScript Playground 02
ca. 15 min
TypeScript for React 2021 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 fetchBook hook
ca. 5 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 6 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 your store
ca. 15 min
4 Implement your first Redux Action
ca. 30 min
5 Create a selector
ca. 20 min
6 Load data with an async thunk
ca. 30 min
React Testing 3 Tasks
Slides PDF
1 Create a snapshot test
2 Test with double export pattern
3 Test Reducer and ActionCreator
Cypress 5 Tasks
Slides PDF
1 Setup your workspace
ca. 5 min
2 Query DOM
ca. 5 min
3 Page Interactions
ca. 20 min
4 Simplify Test Clean Up
ca. 10 min
5 Stub XHR
ca. 20 min