react-js-tutorial
react-js-tutorial copied to clipboard
Published
20 hours ago •
nickovchinnikov
nickovchinnikov
react-js-tutorial
Global updates
Refactoring tests using react-testing-library
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
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
Lesson 3: Установка и настройка React
- @babel/preset-react
- Storybook
- Jest config
Update storybook + MDX
Lesson 4: Консультация по проекту
Lesson 5: React and JSX
- React elements
- JSX
- Component docs
Lesson 6: JSX + CSS
- Project architecture
Lesson 7: TDD + React
- TDD + React
Lesson 8: CI/CD Github Actions
- Deploy config
Module 2 - React
Lesson 9: Typescript part 2
- Generics
- Classes
- Indexed types/mapped types/infer
- React+Typescript: common pitfalls
Lesson 10: React lifecycles
- React state/props
- PureComponent
Lesson 11: React Hooks
- Basic Hooks
Lesson 12: Обзор React testing library
- Basic Hooks
Lesson 13: React Hooks advanced
Lesson 14: Основные концепты Redux и useReducer
Lesson 15: Lists, Events, Forms, Refs
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.
Lesson 17: React Patterns part 2
- Event switch
- Layout component
- Container component
- Higher-order component
- State hoisting
- Controlled input
Lesson 18: React Router
Module 3: React + Redux
Lesson 19: Functional programming basic
Lesson 20: Redux middlewares and side-effects
Lesson 21: Redux toolkit
Lesson 22: React + Redux
Lesson 23: JS Generators, введение в Redux-Saga
- Generators
Lesson 24: Redux-saga и интеграционное тестирование
- Integration testing
- redux-saga-test-plan
Lesson 25: Redux-saga примеры использования effects
Lesson 26: Архитектура React-приложения
Lesson 27: React+Redux, Thunk, Redux-Saga на примерах
Module 4: Developer flow, HTTP, WebSockets, GraphQL
Lesson 1: React developer flow
Lesson 2: Application config
Lesson 3: Test quality tools
- E2E testing
- Stryker
Pull request
Pull request2
Presentation
Lesson 4: Websocket
- Webworker + Comlink
Lesson 5: GraphQL
Optional and old
Functional programming basic (OLD)
Pull request examples
Pull request homework
Presentation
nickovchinnikov