[loftschool] React.js Разработка веб-приложений [2021]

[loftschool] React.js Разработка веб-приложений [10.08.2021 - 20.09.2021]


Во время первой половины курса создадим дизайн систему: изучим React.js с помощью написания компонент от простых до сложных, а вторую половину занятий посвятим созданию приложения Loft-такси с помощью этого набора.​

Программа курса была переработана!
Теперь каждая неделя включает в себя:

• 2-3 обучающих модуля
  Каждый модуль состоит из видеоуроков и методичек.
• 1 групповую практику
  С наставником и одногруппниками.
• 1 практический вебинар
  С преподавателем.

Спойлер: За 6 недель Вы научитесь

Разрабатывать SPA на React.js
Для полноценной работы приложения помимо самого React.js, вы изучите, как хранить данные и общаться с сервером.

Оптимизировать React.js приложения
Научитесь пользоваться современными инструментами Google Chrome и с их помощью находить кандидатов на оптимизацию.

Разделять работу с данными и представлением
Строго отделив представление от данных, вы научитесь рендерить React-приложения как на стороне клиента, так и на стороне сервера.

Управлять потоками ваших данных
Научитесь нормализовывать данные, писать абстракции, работающие со всеми типами данных и организовывать общение ваших компонентов.

Тестировать приложения
Научитесь тестировать каждую часть вашего приложения, автоматизировать тестирование и наслаждаться стабильностью работы.

Выбирать правильные инструменты для вашего стартапа
React Router, Redux, Redux Saga, Styled Components.

Спойлер: Программа обучения

Неделя 1 — Введение в React.js
— Знакомимся с командой курса и одногруппниками. — Изучаем JSX и Virtual DOM в React. — Рассматриваем компонентный подход и способы передачи данных.

Спойлер: Обучающие модули

Знакомство

I React.js

• 1. Что такое React (07:05)
  Бесплатный урок
• 2. Virtual DOM (02:46)
  Бесплатный урок
• 3. JSX (06:10)
• 4. Рендеринг с условиями (05:11)
• 5. Работа со списками (02:45)
• 6. Компоненты (02:41)
• 7. Props (01:45)
• 8. State (06:45)
• 9. События (02:26)
• 10. React Devtools (03:58)

II React.js

• 1. Lifecycle методы (05:19)
  Бесплатный урок
• 2. Компоненты - функции (01:29)
• 3. Pure Component (02:54)
• 4. Synthetic Events (01:42)
• 5. Работа с формами (02:51)
• 6. Обработка ошибок (01:39)

Разбор заданий #1

• 1. Workshop #1 (30:36)

Неделя 2 — Паттерны React.js, тестирование
— Изучаем компоненты, элементы и экземпляры класса компонент. — Рассматриваем библиотеку Recompose, паттерны high order components и Render Props. — Разбираемся в преимуществах тестов, изучаем Jest, Enzyme, Snapshots.

Спойлер: Учебные модули

III React

• 1. Intro (01:43)
  Бесплатный урок
• 2. PropTypes (10:18)
• 3. Context (05:19)
• 4. Refs (05:18)
• 5. Portals (05:02)
• 6. Hooks (10:42)

IV React.js

• 1. High Order Components (HOCs) - Компоненты Высшего Порядка (10:33)
  Бесплатный урок
• 2. Ref-forwarding (HOCs) (04:31)
• 3. Рендер пропс паттерн (05:25)
• 4. Библиотека ХОКов Recompose (10:32)
• 5. Профайлинг (04:02)

Тестирование

• 1. Intro (05:06)
  Бесплатный урок
• 2. Test Runner (02:51)
  Бесплатный урок
• 3. Test DSL (08:41)
• 4. Enzyme (06:57)
• 5. Snapshots (03:09)
• 6. Testing sagas (05:01)
• 7. React Testing Library (06:32)

Разбор заданий #2

• 1. Workshop #2 (27:54)

Неделя 3 — Redux, роутинг
— Изучаем роутинг: Simple routing, роутинг со Switch, а также вложенный роутинг. — Знакомимся с библиотекой Redux: основные понятия и концепции Store, Actions, Reducers, React-redux. — Рассматривается middleware как способ работы с Sideeffect.

Спойлер: Учебные модули

Роутинг в браузере

• 1. History API (02:48)
  Бесплатный урок
• 2. Simple routing (05:39)
• 3. Роутинг со Switch (04:16)
• 4. Вложенный роутинг (05:32)
• 5. Приватный роут (04:39)

Redux

• 1. Intro (04:07)
  Бесплатный урок
• 2. Store (05:03)
• 3. Actions (02:17)
• 4. Reducers (07:56)
• 5. React-redux (03:26)

II Redux

• 1. Intro (03:11)
  Бесплатный урок
• 2. CreateActions (redux-actions) (09:13)
  Бесплатный урок
• 3. Middleware (07:54)
• 4. Handle actions (05:52)
• 5. Selectors (06:17)
• 6. Reselect (04:49)
• 7. Ducks (06:56)

Разбор заданий #3

• 1. Workshop #3 (39:13)

Неделя 4 — Redux-saga
— Изучаем библиотеку Redux-saga. Повторяем generator* functions. Учимся запускать их параллельно. — Разбираем метод Take. Изучаем select, как способ получения данные из Store. — Рассматриваем способы стилизации React приложения. Изучаем библиотеки ClassNames, StyledComponents, BrowserList, MaterialUI.

Спойлер: Учебные модули

I Redux-saga

• 1. Intro (00:57)
  Бесплатный урок
• 2. Overview (02:08)
  Бесплатный урок
• 3. Generators (04:11)
• 4. Adding sagas (02:07)
• 5. React on actions (03:53)
• 6. Запуски функций (02:06)

II Redux-saga

• 1. Intro (00:27)
  Бесплатный урок
• 2. Выполняем эффекты параллельно (03:41)
• 3. Эффект Take (02:45)
• 4. Эффект Select (02:04)
• 5. Отмена эффектов (04:05)

Работа со стилями

• 1. Intro (01:34)
  Бесплатный урок
• 2. CRA Styles (05:21)
  Бесплатный урок
• 3. ClassNames (06:32)
• 4. StyledComponents (07:11)
• 5. BrowserList (01:37)
• 6. Material UI (08:13)

Разбор заданий #4

• 1. Workshop #4 (09:55)

Неделя 5 — Формы, CI & DI & Client error handling
— Рассматриваем работу с формами с помощью библиотек Formik, Redux Forms, React Final Form. — Рассматриваем методы обеспечения качества production кода. Разбираем такие инструменты как: Husky, TravisCI, HerokuNow. — Изучаем набор полезных библиотек для разработки (Storybook, RamdaJS, Axios). — Рассматриваем TypeScript.

Спойлер: Учебные модули

Работа с формами

• 1. Intro (05:07)
  Бесплатный урок
• 2. Formik (08:51)
• 3. Redux form (06:22)
• 4. React final form (06:36)

CI & DI & Client error handling

• 1. Intro (05:07)
  Бесплатный урок
• 2. Husky (02:32)
• 3. CI using TravisCI (03:32)
• 4. Deploy to heroku (04:57)
• 5. Rollbar (02:00)

Набор полезных библиотек для разработки

• 1. Storybook (05:32)
  Бесплатный урок
• 2. RamdaJS (04:47)
• 3. Axios (05:52)
• 4. Typescript (09:31)

Разбор заданий #5

• 1. Workshop #5 (13:17)

Неделя 6 — Работа над проектом
— Доделываем приложение и отправляем на проверку.

Как получить работу в IT: фишки и советы

• 1. Как получить работу в IT? Поиск, собеседование и испытательный срок (42:21)
  Бесплатный урок
• 2. Как найти удаленную работу и фриланс-заказы? (20:12)
  Бесплатный урок
• 3. Первая работа в IT — как себя вести? Стажировки, официальное трудоустройство и работа "за еду" (14:11)
• 4. Как пройти испытательный срок? (27:10)
• 5. Как подготовиться к собеседованию в компании уровня FAANG (08:52)

Ссылка на курс