By Nikita Ovchinnikov, Developer

Hands-On way to build Frontend with React

Language: English
All Levels

Course description

Hands-On course, build frontend application with React and Typescript followed by TDD

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 ReactJS app * basic algorithms of Minesweeper Step-by-step 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. 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. We'll introduce you to React-Hooks - it's the basic way to make dynamic UI for the applications. 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! See you on the course!

Related Skills

Course overview - 95

  • Project init

  • Code-style and Eslint

  • Prettier

  • Typescript basic

  • Parametric types with generics

  • Interfaces, Types, and Union

  • Unknown, never, and Tuple

  • UtilityTypes

  • Utility types challenge

  • Utility types challenge solution

  • Minesweeper basic types

  • Create React App

  • JSX at Glance

  • JSX compilation

  • Props and conditional rendering

  • Props and conditional rendering assignment

  • Props and conditional rendering solution

  • Ecma TC39 and Babel

  • Webpack intro

  • Webpack dev server

  • Jest testing framework (TDD vs TLD)

  • Field generator part 1

  • Field generator part 2

  • Field generator part 3

  • Field generator part 4

  • VSCode debug configuration

  • Debug basic game logic

  • Library Emotion for css-in-js

  • Styled components API

  • Storybook intro

  • Create components with Storybook

  • Components composition

  • Chromatic for visual testing

  • List and Keys

  • 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

  • Test coverage report

  • Test quality tool Stryker-Mutator

  • Snapshot testing

  • Githooks and Husky

  • AWS Amplify deploy

  • CI/CD with Github Actions

  • Static game

  • Game logic

  • useState and player field generator

  • Generate game field and openCell handler

  • Test player field generator

  • Testing library user-event

  • Debug session and useMemo

  • Click to the cell test cases

  • Reset game by TDD

  • 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

  • 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

  • What is URL?

  • ReactRouter and Webpack-Dev-Server

  • URL Params

  • Pure functions benefits

  • 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

  • React-Redux

  • Global store benefits and redux-dev-tools

  • Redux middlewares and timer

  • Refactoring with Stryker

  • Fix timer

  • Congratulations!

Learners who have already enrolled in this course

Meet your instructor

Passionate Software lead engineer. Frontend web application development is my primary skill. Nowadays I work with Math and DS, but Frontend is still interesting to me. * Strong soft skill and leadership * Architecture and high-lvl vision * Agile methodology and lifecycle of app * Strong knowledge of architecture on Web-based applications * Primary languages JS, Typescript * React, Redux, Redux-Saga * DBMS - Mongo, MySQL