Git Product home page Git Product logo

react-js-tutorial's Introduction

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

react-js-tutorial's People

Contributors

alietta avatar antihero avatar dependabot[bot] avatar ejohnf avatar fedos2589 avatar grigorykazakov avatar nickovchinnikov avatar saitonakamura avatar vvscode avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

vvscode useacode alietta shurupov alexandra-rm lamka-tatya muhammadabumansur warhamsterboo pelmenya saitonakamura radevicha dodozuev j8088 fedos2589 ximera405 andrey-stepantsev mu57di3 anton291291 veterenar77777 eexxyyq artem-kochetkov-94 mkremnev eliasvolkov ykornilov ikzsl mifon savinru avpeshkov web2ls thespirit3000 glebzhidovich oleg-sl spiggoth superqw3rty paveldub aiba0 denis0372 alixkononov sazonovoleg anatolylitvinenko s-ilya leguich1985 vensky danbamikiya vlasenkovbogdan alcotras71 workgames maximpolianskih divodivnoe ansgit gvloginov reustick avokiress kojimagenius qwelp avkapitanov sinyawskiy annapimenova nontrivalcodewriter ligalaiz krecer ermakof arzamastsevroman sergaykalashnickov vasiliev-alexey svgerasimov paulmartynov kiselb trooper593 romannevmirich andreyfadeev tramak vladimir2308 andreyosipuk bekbol-ibragimov zelkowsky korobprog bulyginr dmitriyal orbis1 romanparaskiva noor696 milapdave solomatinatatyana radmiry dgolovko97 lavrov-lavrov evgeniirom art3mk4 crazy-pythons-crew klarkcharlz post032 raventus camarill spirit-drive dmitryplus nlastya agrowein xeniaweb-test

react-js-tutorial's Issues

Содержимое ветки

Внутри ветки должно быть только то, что соответсвует данной теме.
Не должно быть директорий lessen11, lessen12... Весь код хранить в соответствующей директории, и только то что касается тематики урока.

Названия веток

Должно быть ровно столько веток сколько тем. Так как номера уроков часто меняются, название ветки должно соответствовать названию темы.
Например: redux, redux-thunk, redux-saga...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.