Время ограничено!
Дополнительные скидки – только до 27 января. Торопитесь! Подробности в чате.

Подробнее

help@otus.ru +7 499 110-61-65

Рекрутерам Отзывы FAQ Блог Контакты

+7 499 110-61-65

React.js разработчик

Самый популярный JS-фреймворк для Frontend-разработки

Подойдет ли мне этот курс?

Обучение сотрудников

Длительность

4 месяца

Начало

31 марта

Занятия

Пт 20:00, Вт 20:00

Общая стоимость

45 000 ₽

В месяц

14 000 ₽

В кредит:

14000 ₽ в месяц

Общая стоимость

45 000 ₽

В месяц: 14 000 ₽

В кредит: 45000 ₽

в месяц

Продолжительность

4 месяца, 4 академ. часа в неделю

Пт 20:00, Вт 20:00

Начало занятий

31 марта

Что даст вам этот курс

На курсе вы научитесь:

продвинутым возможностям Redux, Redux-Saga, Redux-thunk;

создавать SPA-приложения и оптимизировать их для production;

писать чистый и лаконичный код с TypeScript;

применять интеграционные и юнит-тесты;

работать в GraphQL, Apollo, Relay.

Также вы узнаете, как работает под капотом Webpack и Babel, освоите паттерны функционального программирования и научитесь их применять в React.

Для кого этот курс:

JavaScript-разработчиков с навыками HTML/CSS;

Backend-разработчиков, желающих стать Fullstack;

начинающих React-разработчиков.

ReactJS: быстрый старт. Сильные и слабые стороны, 3 февраля в 20:00

Рассмотрим, что входит в стандартный набор возможностей ReactJS - можно ли с помощью этого построить сложное приложение?
Композиция против наследования.
Функциональное программирование - это легко?
Что такое Redux и зачем он нужен.
Также на открытом уроке мы разработаем небольшое веб-приложение на ReactJS.

Ведет

Никита
Овчинников

Преподаватель

Никита Овчинников

Окончил Волгоградский государственный технический университет по специальности «Автоматизированные системы обработки информации и управления». Увлёкся программированием ещё в студенческие годы (в 2010 году) и остановиться так и не смог. В коммерческой разработке с 2012 года.

Работал с проектами разного масштаба, прошёл путь от Junior до Senior. С 2016 года — старший инженер-программист в EPAM Systems, с 2018 по май 2019 — технический руководитель по разработке софта в Skywind Group.

Участвовал в международном проекте компании Ericsson, занимался web-программированием и собственными проектами.

Является специалистом по архитектуре веб-приложений, хорошо знает JS, React, Node, Mongo, MySQL, фреймворки Express, Koa2, AngularJS. Уверен, что в программировании всё приходит с практикой.

Руководитель программы

Преподаватель

Никита Овчинников

знакомство с HTML/CSS;
опыт работы с JavaScript.

Будет плюсом:

знание основ работы браузера и браузерного API;
базовые навыки работы с Git.

Подготовительный курс

Курс по Frontend-разработке на Javascript для начинающих программистов

Занятия в формате видео и проверочные тесты

Подготовка к курсам "Fullstack разработчик Javascript", "React.js-разработчик" и "Node.js-разработчик"

Записаться

Процесс обучения

Все обучение проходит онлайн: вебинары, общение с преподавателями и вашей группой в слаке курса, сдача домашних работ и получение обратной связи от преподавателя.

Вебинары идут дважды в неделю по 2 академических часа (то есть астрономических 1,5 часа). Все вебинары сохраняются и в записи в вашем личном кабинете.

Домашнее задание выдается в среднем одно в неделю.

Возникающие вопросы по материалам лекций, домашним заданиям и по выпускному проекту вы сможете задавать преподавателю в слаке или во время вебинаров.

Подробная программа PDF 190 kb

Программа обучения

Модуль 1

React basics

Модуль 2

Redux и стейт приложения

Модуль 3

React и процесс реальной разработки приложения

Модуль 4

Проектный модуль

Подробная программа PDF 190 kb

React basics

Тема 1: Webpack + babel

после занятия вы сможете:
объяснить, что из себя представляет Ecma TC39;
проанализировать, как в стандарт попадают новые возможности языка;
познакомиться с транспиляцией, babel 7, типовой конфигурацией для Typescript;
разобраться, что такое Webpack, базовая настройка Webpack, установка и настройка Jest;
проанализировать, что такое TDD и BDD;
Big O notation.

31 марта, 20:00 — 21:30

Домашние задания: 1

1 Webpack + babel + typescript базовая настройка

Цель: В результате получим базовый скелет webpack + typescript проекта

Тема 2: Typescript

после занятия вы сможете:
использовать: Basic Types, Interfaces, Functions, Classes, Generics, Enums, Iterators and Generators, Modules, Type Checking JavaScript Files.

3 апреля, 20:00 — 21:30

Домашние задания: 1

1 Разработать калькулятор reverse polish notation

Цель: В результате получим калькулятор для reverse polish notation Минимальные требования к интерфейсу - поле ввода нотации + кнопка "посчитать". Результат выводить под полем ввода. Остальное оформление на собственный выбор. Доп информация о том, как это должно работать: https://en.wikipedia.org/wiki/Reverse_Polish_notation

Тема 3: Установка и настройка React

после занятия вы сможете:
с нуля установить и настроить проект ReactJS с использованием create-react-app (CRA) либо конфигурируя приложения, используя webpack + babel;
установить и настроить Storybook;
использовать первый простой компонет на React;
Eslint, Typescript typechecker;
Precommit hooks.

7 апреля, 20:00 — 21:30

Домашние задания: 1

1 Установка и настройка React

Цель: Самостоятельно сконфигурировать ReactJS-проект. В результате получим готовый шаблон приложения для дальнейшей разработки.

Тема 4: JSX как основа ReactJS. Functional components

после занятия вы сможете:
объяснить, что такое JSX, почему завоевал такую большую популярность, во что превращается JSX;
учитывать JSX props, типы данных для props;
проверить типы с помощью PropTypes и Typescript;
разработать сложный компонент с использованием Storybook;
добавить knobs;
добавить unit-тесты для сложного компонента.

10 апреля, 20:00 — 21:30

Домашние задания: 1

1 JSX как основа ReactJS. Functional components

Цель: Учимся разрабатывать сложные компоненты и познаем основы композиции. В результате сможем спроектировать и разработать сложный компонент.

Тема 5: JSX + CSS

после занятия вы сможете:
разобраться, что такое className;
BEM, CSS modules, CSS preprocessors;
CSS-in-JS;
использовать Webpack и Babel-настройки для работы со стилями;
добавить стили в сложный компонент;
тестировать стили с помощью Jest.

14 апреля, 20:00 — 21:30

Тема 6: Components lifecycle

после занятия вы сможете:
объяснить, что такое React state;
использовать state компонентов;
разобраться, как работает vDOM и перерисовка контента;
использовать жизненный цикл компонентов, Lifecycle hooks;
Presentational and Container Components (smart/dumb componets);
написать тест к компоненту с lifecycle;
разработать компонент с жизненным циклом и покрыть его тестом.

17 апреля, 20:00 — 21:30

Домашние задания: 1

1 Components lifecycle

Цель: Используем styled-components для разработки и манипуляции стилями. Добавим стили в компоненты, разработанные в рамках предыдущего ДЗ. Реализуем несколько динамичных компонентов blinker: https://en.m.wikipedia.org/wiki/File:Game_of_life_blinker.gif beacon: https://en.m.wikipedia.org/wiki/File:Game_of_life_beacon.gif

Тема 7: Списки, события, формы

после занятия вы сможете:
list and keys;
управлять событиями в приложении;
работать с формами в приложении;
React refs.

21 апреля, 20:00 — 21:30

Домашние задания: 1

1 Списки, события, формы

Цель: Добавляем элементы управления в приложение

Тема 8: React patterns часть 1

после занятия вы сможете:
использовать основные паттерны, которые часто встречаются на практике.

24 апреля, 20:00 — 21:30

Тема 9: React patterns часть 2

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

28 апреля, 20:00 — 21:30

Домашние задания: 1

1 React patterns

Цель: Оптимизируем код с помощью react patterns

Тема 10: React-hooks

после занятия вы сможете:
проанализировать, какие изменения произошли в 16 версии;
React Fiber;
React hooks.

1 мая, 20:00 — 21:30

Тема 11: React router

после занятия вы сможете:
объяснить, что такое роутинг в приложении;
HTML5 history API;
React router;
подвести итоги.

5 мая, 20:00 — 21:30

Домашние задания: 1

1 React router

Цель: Реализовать переход между страницами в приложении

Redux и стейт приложения

Тема 1: Основы функционального программирования

после занятия вы сможете:
pure Functions;
Currying (каррирование);
Composing (композиция);
Signatures (сигнатуры типов);
ramdajs.

8 мая, 20:00 — 21:30

Домашние задания: 1

1 Основы функционального программирования

Цель: Трансформируем данные в нужный формат

Тема 2: Основные концепты Redux

после занятия вы сможете:
immutability;
Actions, Reducers, Store.

12 мая, 20:00 — 21:30

Тема 3: Redux actions

после занятия вы сможете:
объяснить, что такое Redux-Actions и как это упрощает работу;
Redux debbug tools;
разобраться, что такое тестирование Redux, что нужно тестировать и как.

15 мая, 20:00 — 21:30

Тема 4: Redux middwares and side effects

после занятия вы сможете:
объяснить, что такое side-effect;
Redux middlwares;
Redux thunk;
тестирование side-effects.

19 мая, 20:00 — 21:30

Домашние задания: 1

1 Redux middwares and side effects

Цель: Повысить стабильность приложения и реализовать базовый функционал

Тема 5: React + redux

после занятия вы сможете:
работать с Redux в React приложении;
Memoization and Reselect;
покрыть тестами connect.

22 мая, 20:00 — 21:30

Тема 6: Redux-saga intro

после занятия вы сможете:
jS Generators;
проанализировать основные концепты Redux-Saga — call, put, takeEvery;
покрыть тестами простую сагу.

26 мая, 20:00 — 21:30

Домашние задания: 1

1 Redux-saga intro

Цель: Подключим redux в react приложение

Тема 7: Redux-saga basic concepts

после занятия вы сможете:
saga Helpers;
Declarative Effects;
Dispatching actions;
обработать ошибки.

29 мая, 20:00 — 21:30

Тема 8: Redux-saga advanced concept

после занятия вы сможете:
управлять потоками эффектов (non- blocking, parralell, race);
оценить композицию saga;
Task cancellation
Fork model
Channels.

2 июня, 20:00 — 21:30

Домашние задания: 1

1 Redux-saga advanced concept

Цель: Реализуем движок генерации поколений в приложении

Тема 9: Redux-saga и интеграционное тестирование

после занятия вы сможете:
объяснить, что такое интеграционное тестирование;
встроить в приложение процесс интеграционного тестирования;
redux-saga-test-plan.

5 июня, 20:00 — 21:30

React и процесс реальной разработки приложения

Тема 1: Архитектура React-приложения

после занятия вы сможете:
использовать библиотеку презентационных компонентов;
применить архитектуру ducks;
использовать модули в приложении;

9 июня, 20:00 — 21:30

Домашние задания: 1

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

Цель: Повышаем качество кодовой базы

Тема 2: Процесс разработки React-приложения

после занятия вы сможете:
объяснить, что представляет из себя процесс разработки приложения;
применить Git flow и разработать приложения;
проектировать структуры компонентов;
применить шаги для разработки новой фичи в соответствии с TDD.

12 июня, 20:00 — 21:30

Тема 3: Продвинутая конфигурация приложения

после занятия вы сможете:
dev/Prod config
объяснить, что такое процесс сборки приложения;
CDN, Nginx;
Server side rendering (SSR) простая конфигурация;
проанализировать nextjs.

16 июня, 20:00 — 21:30

Домашние задания: 1

1 Продвинутая конфигурация приложения

Цель: Повысим качество приложения, добавим SSR

Тема 4: Test quality tools

после занятия вы сможете:
test coverage;
узнать, как правильно писать тесты;
оценить теорию хауса и мутабельное тестирование;
Stryker.

19 июня, 20:00 — 21:30

Домашние задания: 1

1 Test quality tools

Цель: Повышаем качество тестов до максимума

Тема 5: GraphQL

после занятия вы сможете:
объяснить, что такое REST;
проанализировать основы GraphQL;
queries and Mutations;
schemas and Types;
validation;

23 июня, 20:00 — 21:30

Тема 6: Appolo basic

после занятия вы сможете:
применить другой взгляд на state management в приложении;
queries;
mutations;
local state management;
subscriptions;
fagination.

26 июня, 20:00 — 21:30

Тема 7: Appolo advanced

после занятия вы сможете:
Appolo cache;
Testing React components;
Apollo with TypeScript;
Developer tools;
Appolo and SSR.

30 июня, 20:00 — 21:30

Домашние задания: 1

1 Appolo advanced

Цель: Реализуем с помощью Applo работу с API Instagram

Проектный модуль

Заключительный месяц курса посвящен проектной работе. Свой проект - это то, что интересно писать студенту. То, что можно создать на основе знаний, полученных на курсе.
При этом не обязательно закончить его за месяц, однако к защите надо разработать действующий прототип, который пояснит идею проекта.

В процессе написания по проекту можно получить консультации преподавателей.

Для достижения результата работа над проектом организуется в виде недельных итераций.

Проект должен стать примером кода, который можно показывать потенциальным работодателям.

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

Предлагаемые темы выпускного проекта:

1. Conway's Game of Life
2. Приложение для контроля расходов

Тема 1: Выбор темы и организация проектной работы

вы сможете:
выбрать и обсудить тему проектной работы;
спланировать работу над проектом;
ознакомиться с регламентом работы над проектом.

3 июля, 20:00 — 21:30

Домашние задания: 1

1 Проектная работа

Цель: Реализовать готовое для продакшн приложение

Тема 2: Консультация по проектам и домашним заданиям

вы сможете:
получить ответы на вопросы по проекту, ДЗ и по курсу.

7 июля, 20:00 — 21:30

Тема 3: Защита проектных работ

вы сможете:
защитить проект и получить рекомендации экспертов.

10 июля, 20:00 — 21:30

Выпускной проект

В течении всего курса вы будете работать над проектом.

Будет предложено несколько вариантов на выбор:
1. Разработка проекта, связанного с браузерной визуализацией. Аналог "conway's game of life".
2. Контроль расходов:
— регистрация чеков, сумм и дат;
— список чеков и квитанций;
— возможность строить графики со статистикой (в этом году/в прошлом году);
— хранение данных.

Выпускной работой студента станет доведение приложения, разрабатываемого на протяжении всего курса, до готовности к production.

После обучения вы

заберете с собой полный комплект обучающих материалов: видеозаписи всех вебинаров, презентации к занятиям, а также решение задач и проектов в виде кода на github и другие дополнительные материалы;