Участвует в распродаже Скидки до 50% действуют 0 дней 00:00:00

Курс

JavaScript-фреймворк React.js

Расширьте свои профессиональные знания и навыки разработчика, научившись использовать в работе фреймворк React.js

Длительность 2 месяца
Онлайн в удобное время
Обучение на практике
Доступ к курсу навсегда

О профессии

На рынке не хватает JavaScript-разработчиков

10 218 компаний
сейчас ищут JavaScript-разработчиков
70 000 рублей
зарплата начинающего специалиста

Кому подойдёт этот курс

Практикующим JavaScript-разработчикам
Вы освоите работу с фреймворком React.js, увеличите круг своих компетенций и задач, которые сможете выполнять на проекте — станете более конкурентоспособным сотрудником.
Frontend-разработчикам
React.js — один из самых популярных фреймворков в мире. Вы научитесь создавать изоморфные приложения на React Redux, типизировать их с помощью Typescript и работать с различными публичными сервисами.

Чему вы научитесь

Создавать приложения с нуля
Конфигурировать их с помощью Webpack или использовать готовые решения.
Работать с публичными API
Узнаете о механизмах OAuth и имплементациях в React.
Познакомитесь с Flux, Redux, Mobx
Узнаете подробности о состоянии приложения и работе с ним.
Профилировать свое приложение
Искать слабые места и оптимизировать их.
Тестировать свое приложение
Познакомитесь с библиотеками Jest и Enzyme.
Создавать SPA и RIA приложения с нуля
Будете применять разные подходы, с SSR или без него, включая деплой в облачный сервис Now.

О Skillbox

Skillbox в странах СНГ. На платформе вы сможете получить актуальные знания и освоить востребованную профессию из любой точки мира.

Как проходит обучение на платформе

Регистрация
Знакомитесь с платформой

Платформа Skillbox — собственная разработка компании, которую мы постоянно улучшаем. Вас ждут видео, практические задания и общение с кураторами. Доступ к материалам откроется сразу после покупки курса.
Теория
Получаете знания

Курсы состоят из тематических видео разной длительности. Смотрите их когда и где угодно. Доступ бессрочный, чтобы вы всегда могли вернуться и повторить теорию.
Практика
Выполняете задания

Мы уверены, что навыки отрабатываются только через практику. Поэтому после теории вас ждёт практическая работа или тест. Все задачи приближены к реальным — их можно с гордостью положить в портфолио.
Обратная связь
Работаете с куратором

Проверкой заданий занимаются кураторы. Это эксперты по теме курса. Они помогут с трудными задачами и подскажут, как улучшить ваши проекты. Общаться с проверяющими кураторами можно прямо на платформе.

Введение в React
- 1. Что такое React. Основные преимущества
  2. Основы декларативного подхода
  3. Возможности React, компоненты, состояние, применения
  4. Экосистема React, основные библиотеки, из чего обычно состоит React-стек
Создание проекта
- 1. Конфигурация webpack на клиенте
  2. Конфигурация webpack на сервере
  3. Подключение к проекту HMR и SSR
  4. Подключение Typescript
  5. Подключение CSS modules, Jest, Enzyme
Typescript
- 1. Основы TypeScript. Типы
  2. Работа с массивами
  3. Работа с объектами и интерфейсами
  4. Типизация функций и типы TS
  5. Generics
  6. Классы
  7. Infer, typeof, keyof, Mapped Types
Компоненты на примере новостной карточки Reddit
- 1. Компоненты в React
  2. Состояния в Class Components
  3. Состояния в Functional Components
  4. Создание Layout приложения. Часть 1
  5. Создание Layout приложения. Часть 2
  6. Создание компонента новостной карточки
  7. Жизненный цикл компонента
Hooks и функциональное программирование
- 1. Каррирование и функции высшего порядка
  2. Hooks в React
  3. Map и Reduce в React
  4. Создание компонента dropdown c использованием hooks
  5. Compose, Pipe и их применение в React
Компоненты - продвинутые темы. Введение в тестирование компонентов
- 1. Адаптивные и неадаптивные компоненты. Mobile first и desktop first подходы
  2. Создание Dropdown-меню с использованием state
  3. Введение в unit-тесты и Jest
  4. Написание тестов для React компонента. Enzyme vs Snapshots
  5. Вспомогательные компоненты
Работа с публичным API на примере Reddit
- 1. Как работать с API
  2. Регистрируем аккаунт разработчика на Reddit
  3. OAuth2
  4. Страница авторизации пользователя
  5. Как структурировать API-запросы в приложении
React Context
- 1. Забираем из API данные пользователя
  2. Отображаем данные пользователя в компоненте через prop
  3. Используем React Context для работы с данными
  4. Обновляем данные через контекст
Портал и форма
- 1. Верстаем карточку поста, используя ReactPortal
  2. Ref и useRef React hook. Реализуем механизм click outside для скрытия модального окна
  3. Controlled и uncontrolled компоненты на примере поля комментария
  4. Сохраняем состояние формы, используя контекст
Введение в Redux на примере поля для ввода комментария
- 1. Введение в Redux
  2. Устанавливаем Redux, подключаем его к приложению
  3. Action + reducer
  4. Presentation Components/Container Components
Использование Redux-Thunk на примере загрузки профиля пользователя
- 1. Работа с асинхронными запросами в Redux
  2. Пишем простой logger middleware
  3. Подключаем thunk к приложению. Пишем свой первый асинхронный action
  4. Работа с асинхронным состоянием
  5. Пишем простой loader
Формы на примере комментариев и карточки поста
- 1. Экскурс в формы. Проблематика форм React
  2. Состояние полей. Различные подходы
  3. Какие можно использовать библиотеки и почему они могут мешать
  4. Сохраняем состояние формы, валидируем поля и выводим ошибки
  5. Доступности, нативные элементов и возможности работать с формой через табуляцию
«Бесконечные» списки на примере ленты постов
- 1. Работа с запросами к API
  2. Делаем загрузку ленты постов
  3. Виды бесконечных скроллов и пагинаций
  4. Делаем подгрузку ленты постов
  5. Эффективный рендеринг больших списков
Сайдбар + роутинг
- 1. Создаем сайдбар, используя более продвинутые практики
  2. Роутинг в SPA и в React
  3. Подключаем React Router
  4. Подключаем новостную ленту к роутеру
  5. Дополнительный функционал роутинга
SSR + NextJS
- 1. Серверный и статический рендеринг. Изоморфные приложения
  2. Делаем серверный рендеринг, используя express
  3. NextJS
  4. Переносим приложение на Next
  5. Деплой приложения в Zeit
Бонусный модуль: Mobx

Спикеры

Александр Кузнецов
Frontend-разработчик в ТАСС
Ольга Климонова
Ведущий разработчик ТАСС
Алексей Авдеев
CTO в дизайн-лаборатории Mish. 10 лет в веб-разработке

Отзывы участников

Иван Медведев, г. Ивантеевка Курс «Профессия Инженер по тестированию»

Если какой-то материал тяжело даётся, есть вопрос по ДЗ, достаточно написать преподавателю, который поможет разобраться с информацией и подскажет, как решить задачу.
По итогу 9-месячной учёбы стал по-другому смотреть на сайты. Замечаю баги, разбираюсь в вёрстке, веду репорты. Узнал, как работать со специфическим ПО.
Уже сейчас нисколько не жалею, что выбрал Skillbox. Спасибо!!!
- ВКонтакте
Александр Моль Курс «Профессия Frontend-разработчик PRO»

Понравилось, что все необходимые знания собраны в грамотном для изучения порядке. Спикеры в видео всё хорошо объясняют на примерах. Есть возможность учиться сразу на практике. К тому же, никто не заставляет проходить курс. Мой прогресс — это моя ответственность и моё желание. Для меня это плюс.

Жаль, что доступ к курсам даётся на определённый срок. По крайней мере, когда я брал профессию Frontend-разработчика, доступ, по-моему, давался на три года. Для меня это недостаточный срок, чтобы качественно изучить весь материал. Хотя, может быть, проблема во мне.
- ВКонтакте
Валентина Нарушевич, г. Санкт-Петербург Курс «Графический дизайнер с нуля до PRO»

Благодаря курсу я научилась создавать классные постеры и векторные изображения. Также мой список новых скилов пополнили ретушь и обтравка изображений — одни из главных навыков профессионального графического дизайнера.
Ну, и умение верстать журналы! Теперь я, как самый настоящий графический дизайнер, с лёгкостью могу создать разворот какого-нибудь модного журнала.
Яна Щербицкая, г. Санкт-Петербург Курс «Photoshop с нуля до PRO»

Курс очень круто структурирован, там есть все знания, которые мне нужны, чтобы освоить программу. Сама бы я точно что-нибудь пропустила.
Преподаватели всё спокойно и терпеливо объясняют. Если ты что-то не понял, снимут дополнительный видеоролик и покажут ещё раз.
Самое крутое в курсах Skillbox — постоянная связь с теми, кто подскажет, как правильно.
- Instagram
Алла Комиссаренко Курс «UX-дизайнер с нуля до PRO»

Работать дизайнером мне очень нравится, от UX я вообще в восторге, тяга к аналитике у меня была всегда. После долгих поисков работы в новой сфере подруга помогла мне получить заказ на редизайн сайта большой компании.
Отдельно хочу сказать спасибо куратору Александру Свободе, он очень подробно расписывал все недочёты и ошибки решений в дизайне.
- ВКонтакте
- Примеры работ
Елена Кальво, г. Ницца, Франция Курс «Копирайтинг от А до Я 2.0»

«Почему бы не сделать из хобби источник заработка?» — однажды подумала я.
Недолго размышляя, записалась на курс в Skillbox и встала в ряд претендентов на гордое звание копирайтера.
Работа с текстом помогла мне вернуть свою жизнь, вдохновила. Я начала снова ухаживать за собой, читать. Увидела, что я не только мать, но и писатель.
Ирина Семёнова, г. Бельцы, Молдова Курс «Профессия SMM-специалист»

Я узнала, что такое охваты, KPI и прочие слова, которые раньше пугали. Поняла, что чем проще и понятнее, тем лучше. Разобралась в сложной иерархии рекламного кабинета и научилась настраивать аудиторию и рекламу.

Я уже в теме и не боюсь назвать своих более опытных друзей коллегами.
- Примеры работ