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


Practical React with Typescript and Testing Library. React and Storybook. TDD with React Hooks and React + Redux Toolkit

What you will learn

Build web applications with React JS using Hooks, Typescript, Redux

Create components library with the Storybook and CSS-IN-JS

Dive deeply into configurations of applications with Webpack + Babel

Learn about TDD, TLD and apply this knowledge using Jest, React-Testing-Library and Stryker-Mutator

Description

React is the most popular library for building frontend web applications. Step-by-step by diving into all the basics, I’ll introduce you to advanced concepts as well.

We’ll build the minesweeper application from scratch:

  • setup of the development environment
  • configuration of the React JS app
  • basic algorithms of Minesweeper

We’ll build the minesweeper game. During the course, we’ll cover the most important topics.

First will be a configuration of the ReactJS application with Typescript and using build tools Webpack+Babel.

Second, there’re presented TDD or TLD approaches that I’ll try to practice with you during the coding sessions. Probably you don’t have enough experience with the tests, but it’s ok, there’s still a good way to learn it from the course. When you work with code and cover it with test cases, it provides you with guarantees that your code works as you expected. This is the purpose and benefit of the tests.
Tools for testing: Jest, Stryker, React Testing Library

Also, I’ll try to cover basic Typescript concepts and show you a way to improve these skills. During the coding sessions, we’ll cover advanced Javascript techniques to make sense of commonly used JS features.

Storybook is the most popular way to build the components library. From our side, it’s the most basic part of the course. We’ll install and configure Storybook, which will provide us with a full components spec. This approach is called Components Driven Development.


Subscribe to latest coupons on our Telegram channel.

CSS-IN-JS, EmotionJS, and Styled-Components are very powerful toolkits to build UI components. Even very complex component styles can be easily produced and supported by it.

We’ll introduce you to React Hooks – it’s the basic way to make dynamic UI for the applications.

We’ll make review React Router v5 and also React Router v6.

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want. We create our deployment workflow!

Last but not least it’s Redux. Redux is a beautiful way to manage an application state. We’ll use the Redux-Toolkit library – it simplifies the work with Redux.

Check out the full curriculum and free preview videos. Join the course risk-free with a 30-day money-back guarantee!

See you on the course!

English
language

Content

Introduction

Minesweeper and Github repo
Project init
Code-style and Eslint
Prettier
Useful links

Typescript recap

Typescript basic
Parametric types with generics
Interfaces, Types and Union
Unknown, never and Tuple
UtilityTypes
Minesweeper basic types
Test

React intro

Create React App
JSX at Glance
JSX compilation
Props and conditional rendering
Ecma TC39 and Babel
Webpack intro
Webpack dev server

Jest, TDD and basic game logic

Jest testing framework (TDD vs TLD)
Field generator part1
Field generator part2
Field generator part3
Field generator part4
VSCode debug configuration
Debug basic game logic

Storybook and Components Library

Library Emotion for css-in-js
Styled components API
Storybook intro
Create components with Storybook
Components composition
Chromatic for visual testing
List and Keys

React Hooks intro

useState
Dynamic components with useState Hook
Testing-library for ReactJS components
Fragment
Cell component part1
Cell component part2
Cell component part3
Events
Cell component tests
Custom hooks
useDebugValue
Game Field (grid) component
Components library review

Code quality, app deploy and CI/CD

Test coverage report
Test quality tool Stryker-Mutator
Snapshot testing
Githooks and Husky
AWS Amplify deploy
CI/CD with Github Actions

React hooks and react testing library

Static game
Game logic
useState and player field generator
Testing library user-event
Generate game field and open cell handler
Test player field generator
Debug session and useMemo
Click to the cell test cases
Reset game by TDD

Game hook

Create game over behavior by TDD
Game custom hook
Test refactoring
Set flag action
Solved puzzle detector
Create win game state handler
Add test case for win state

useEffect, useCallback, React.memo

useEffect
Game timer and useEffect
Bombs counter
Test reports and refactoring session
Test reports and refactoring session 2
Refactoring useGame
Refactoring useGame 2
RDT profiler and React.memo + useCallback intro
React.memo + useCallback optimization
Stryker disable mutants

React-Router

What is URL?
ReactRouter and Webpack-Dev-Server
URL Params

Redux intro

Pure functions benifits
Referential transparency
Redux basic example
Game module by TDD (Ducks)
Game module by TDD with createSlice
Game module by TDD with createSlice 2
React + Redux and useReducer

Minesweeper with Redux

React-Redux
Global store benifits and redux-dev-tools
Redux middlewares and timer
Refactoring with Stryker