react-js-tutorial

Global updates

Refactoring tests using react-testing-library

pull request

Module 1 - preface

Lesson 1: Webpack + babel

Basic configuration for the project on the master branch. What configurations you can find:

• Babel
• Webpack
• Typescript
• Eslint
• Jest
• Precommit hooks / husky

Pull request

Presentation

Lesson 2: Typescript part 1

Math calculator with basic arithmetic operations without eval

npm run calc

Then you can calc simple math operations

Examples:

> 10 + 10
Result: 20
> 10 + 10 * 20 - 30
Result: 180
> 19 + -10
Result: 9

Pull request

Pull request2 with solution

Pull request3

Pull request4

Presentation

Lesson 3: Установка и настройка React

• @babel/preset-react
• Storybook
• Jest config

Pull request

Pull request2

Update storybook + MDX

Pull request3

Presentation

Lesson 4: Консультация по проекту

Presentation

Lesson 5: React and JSX

• React elements
• JSX
• Component docs

Pull request

Presentation

Lesson 6: JSX + CSS

• Project architecture

Pull request

Presentation

Lesson 7: TDD + React

• TDD + React

pull request

pull request2

pull request3

Presentation

Lesson 8: CI/CD Github Actions

• Deploy config

Pull request

Presentation

Module 2 - React

Lesson 9: Typescript part 2

• Generics
• Classes
• Indexed types/mapped types/infer
• React+Typescript: common pitfalls

Pull request

Presentation

Lesson 10: React lifecycles

• React state/props
• PureComponent

Sandbox with examples

Sandbox with react-hooks

Pull request

update tests

Presentation

Lesson 11: React Hooks

• Basic Hooks

Pull request

Presentation

Code samples

Lesson 12: Обзор React testing library

• Basic Hooks

Presentation

Code samples

Lesson 13: React Hooks advanced

Lesson 14: Основные концепты Redux и useReducer

Pull request

Presentation

Lesson 15: Lists, Events, Forms, Refs

Pull request

update tests

Presentation

Lesson 16: React Patterns part 1

• function component;
• destructuring props;
• JSX spread attributes;
• merge destructured props with other values;
• conditional rendering;
• children types;
• array as children;
• function as children;
• render prop;
• children pass-through;
• proxy component;
• style component.

Pull request

Presentation

Code samples

Lesson 17: React Patterns part 2

• Event switch
• Layout component
• Container component
• Higher-order component
• State hoisting
• Controlled input

Pull request

Presentation

Lesson 18: React Router

Pull request

Presentation

Module 3: React + Redux

Lesson 19: Functional programming basic

Pull request examples

Pull request homework

Presentation

Lesson 20: Redux middlewares and side-effects

Pull request

Homework

Presentation

Lesson 21: Redux toolkit

Pull request

Presentation

Lesson 22: React + Redux

Pull request

Presentation

Lesson 23: JS Generators, введение в Redux-Saga

• Generators

Pull request 1

Pull request 2

Pull request 3

Presentation

Lesson 24: Redux-saga и интеграционное тестирование

• Integration testing
• redux-saga-test-plan

Pull request

Presentation

Lesson 25: Redux-saga примеры использования effects

Pull request
Presentation

Lesson 26: Архитектура React-приложения

Pull request
Presentation

Lesson 27: React+Redux, Thunk, Redux-Saga на примерах

Pull request
Presentation

Module 4: Developer flow, HTTP, WebSockets, GraphQL

Lesson 1: React developer flow

Pull request
Presentation

Lesson 2: Application config

Presentation

Lesson 3: Test quality tools

• E2E testing
• Stryker

Pull request
Pull request2
Presentation

Lesson 4: Websocket

• Webworker + Comlink

Pull request
Presentation

Lesson 5: GraphQL

Pull request
Presentation

Optional and old

Functional programming basic (OLD)

Pull request examples
Pull request homework
Presentation

Optional: Functional Programming Advanced ***

Presentation