[loftschool] React.js Разработка веб-приложений [10.08.2021 - 20.09.2021]
Во время первой половины курса создадим дизайн систему: изучим React.js с помощью написания компонент от простых до сложных, а вторую половину занятий посвятим созданию приложения Loft-такси с помощью этого набора.
Во время первой половины курса создадим дизайн систему: изучим React.js с помощью написания компонент от простых до сложных, а вторую половину занятий посвятим созданию приложения Loft-такси с помощью этого набора.
Программа курса была переработана!
Теперь каждая неделя включает в себя:
- 2-3 обучающих модуля
Каждый модуль состоит из видеоуроков и методичек. - 1 групповую практику
С наставником и одногруппниками. - 1 практический вебинар
С преподавателем.
Разрабатывать 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)
- 1. Lifecycle методы (05:19)
Бесплатный урок - 2. Компоненты - функции (01:29)
- 3. Pure Component (02:54)
- 4. Synthetic Events (01:42)
- 5. Работа с формами (02:51)
- 6. Обработка ошибок (01:39)
- 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)
- 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)
- 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)
- 1. Intro (04:07)
Бесплатный урок - 2. Store (05:03)
- 3. Actions (02:17)
- 4. Reducers (07:56)
- 5. React-redux (03:26)
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
https://loftschool.com/course/react/