Hands-On React. Build advanced React JS Frontend with expert

Course Curriculum

Chapter 1: Introduction

Lecture 1: Minesweeper and Github repo

Lecture 2: Project init and npm

Lecture 3: Code-style and Eslint

Lecture 4: Prettier

Lecture 5: Useful links

Chapter 2: Typescript recap

Lecture 1: Typescript basic

Lecture 2: Parametric types with generics

Lecture 3: Interfaces, Types and Union

Lecture 4: Unknown, never and Tuple

Lecture 5: UtilityTypes

Lecture 6: Minesweeper basic types

Chapter 3: React intro

Lecture 1: Create React JS App

Lecture 2: JSX at Glance

Lecture 3: JSX compilation

Lecture 4: Props and conditional rendering

Lecture 5: Ecma TC39 and Babel

Lecture 6: Webpack intro

Lecture 7: How can you configure your app?

Lecture 8: Webpack dev server

Chapter 4: Jest, TDD and basic game logic

Lecture 1: Jest testing framework (TDD vs TLD)

Lecture 2: Field generator part1

Lecture 3: Field generator part2

Lecture 4: Field generator part3

Lecture 5: Field generator part4

Lecture 6: VSCode debug configuration

Lecture 7: Debug basic game logic

Chapter 5: Storybook and Components Library

Lecture 1: Library Emotion for css-in-js

Lecture 2: Styled-Components API

Lecture 3: Storybook intro

Lecture 4: Eslint and Storybook

Lecture 5: Create Styped-Components with Storybook

Lecture 6: Components composition

Lecture 7: Chromatic for visual testing

Lecture 8: List and Keys

Chapter 6: React Hooks intro

Lecture 1: React JS Hook useState

Lecture 2: Dynamic components with useState React JS Hook

Lecture 3: React Testing Library for React JS components

Lecture 4: Fragment

Lecture 5: Cell component part1

Lecture 6: Cell component part2

Lecture 7: Cell component part3

Lecture 8: Events

Lecture 9: Cell component tests

Lecture 10: Custom React JS Hooks

Lecture 11: useDebugValue

Lecture 12: Game Field (grid) component

Lecture 13: Storybook components library review

Chapter 7: Code quality, app deploy and CI/CD

Lecture 1: Test coverage report

Lecture 2: Test quality tool Stryker-Mutator

Lecture 3: Snapshot testing

Lecture 4: Githooks and Husky

Lecture 5: AWS Amplify deploy

Lecture 6: CI/CD with Github Actions

Lecture 7: Dispatch workflow manually

Chapter 8: React hooks and react testing library

Lecture 1: Static game

Lecture 2: Game logic

Lecture 3: React JS Hook useState and player field generator

Lecture 4: React Testing Library user-event

Lecture 5: Test player field generator

Lecture 6: Generate game field and openCell handler

Lecture 7: Debug session and useMemo React Hook

Lecture 8: Click to the cell test cases

Lecture 9: Reset game by TDD

Chapter 9: Game hook

Lecture 1: Create game over behavior by TDD

Lecture 2: Game custom React Hook

Lecture 3: Test refactoring

Lecture 4: Set flag action

Lecture 5: Solved puzzle detector

Lecture 6: Create win game state handler

Lecture 7: Add test case for win state

Chapter 10: useEffect, useCallback, React.memo

Lecture 1: React JS Hook useEffect

Lecture 2: Game timer and useEffect

Lecture 3: Game timer fix

Lecture 4: Bombs counter

Lecture 5: Test reports and refactoring session

Lecture 6: Test reports and refactoring session 2

Lecture 7: Refactoring useGame

Lecture 8: Refactoring useGame 2

Lecture 9: RDT profiler and React.memo + useCallback intro

Lecture 10: React.memo + useCallback optimization

Lecture 11: Stryker disable mutants

Chapter 11: React-Router