Кто такой React-разработчик?
React-разработчик — это программист, который отвечает за внешний вид сайта или приложения и делает так, чтобы все интерактивные элементы работали, как задумано дизайнерами. React-разработчики используют знания в JavaScript, CSS, HTML.
Что делают React-разработчики и чем занимаются?
Обязанности на примере одной из вакансий:
- Участие в проекте в роли front-end разработчика
- Разработка технических решений
- Планирование, оценка и кодирование задач, code-review
- Разработка пользовательского интерфейса прикладных программ (JS)
- Исправление багов
- Взаимодействие с разработчиками и другими командами в формате Agile
Что должен знать и уметь React-разработчик?
Требования к React-разработчикам:
- Создавать приложения с нуля
- Работать с публичными API
- Познакомитесь с Flux, Redux, Mobx
- Профилировать свое приложение
- Тестировать свое приложение
- Создавать SPA и RIA приложения с нуля
Востребованность и зарплаты React-разработчиков
На сайте поиска работы в данный момент открыта 6 951 вакансия, с каждым месяцем спрос на React-разработчиков растет.
Количество вакансий с указанной зарплатой React-разработчика по всей России:
- от 90 000 руб. – 2 200
- от 180 000 руб. – 1 506
- от 275 000 руб. – 648
- от 365 000 руб. – 235
- от 455 000 руб. – 73
Вакансий с указанным уровнем дохода по Москве:
- от 95 000 руб. – 775
- от 190 000 руб. – 607
- от 290 000 руб. – 299
- от 385 000 руб. – 107
- от 485 000 руб. – 32
Вакансий с указанным уровнем дохода по Санкт-Петербургу:
- от 100 000 руб. – 376
- от 190 000 руб. – 252
- от 280 000 руб. – 105
- от 370 000 руб. – 35
- от 460 000 руб. – 12
Как стать React-разработчиком и где учиться?
Варианты обучения для React-разработчика с нуля:
- Самостоятельное обучение – всевозможные видео на YouTube, книги, форумы, самоучители и т.д. Плюсы – дешево или очень недорого. Минусы – нет системности, самостоятельное обучение может оказаться неэффективным, полученные навыки могут оказаться невостребованными у работодателя;
- Классическое оффлайн-образование в ВУЗах, колледжах и университетах. Диплом является преимуществом при устройстве на работу, при этом обучение обычно длится не менее четырех лет, часто дают устаревшие неактуальные знания;
- Онлайн-обучение. Пройти курс можно на одной из образовательных платформ. Такие курсы рассчитаны на людей без особой подготовки, поэтому подойдут большинству людей. Обычно упор в онлайн-обучении делается на практику – это позволяет быстро пополнить портфолио и устроиться на работу сразу после обучения.
Ниже сделали обзор 15+ лучших онлайн-курсов.
15+ лучших курсов для обучения React-разработчика: подробный обзор
На курсе вы научитесь:
- продвинутым возможностям Redux, Redux-Saga, Redux-thunk;
- создавать SPA-приложения и оптимизировать их для production;
- писать чистый и лаконичный код с TypeScript;
- применять интеграционные и юнит-тесты;
- работать в GraphQL, Apollo, Relay.
Также вы узнаете, как работает под капотом Webpack и Babel, освоите паттерны функционального программирования и научитесь их применять в React.
Для кого этот курс:
- JavaScript-разработчиков с навыками HTML/CSS;
- Backend-разработчиков, желающих стать Fullstack;
- начинающих React-разработчиков.
Программа обучения
В процессе обучения вы получите комплексные знания и навыки.
Модуль 1 — Preface
- Тема 1. Webpack + babel
- Тема Typescript (часть 1)
- Тема 3. Установка и настройка React
- Тема 4. Консультация по проекту
- Тема 5. JSX как основа ReactJS. Functional components
- Тема JSX + CSS
- Тема TDD + React
- Тема 8. CI/CD GitHub actions
Модуль 2 — React
- Тема 9. Typescript (часть 2)
- Тема Components Lifecycle
- Тема Консультация по React testing library
- Тема Списки, события, формы
- Тема 13. Основы функционального программирования
- Тема React patterns часть 1
- Тема React patterns часть 2
- Тема React-hooks
- Тема React hooks advanced
- Тема 18. React router
Модуль 3 — React + Redux
- Тема 19. Основные концепты Redux
- Тема 20. React + redux
- Тема Redux middwares and side effects
- Тема Redux toolkit
- Тема Redux-saga intro
- Тема 24. Redux-saga и интеграционное тестирование
- Тема Redux-saga basic concepts
- Тема Архитектура React-приложения
- Тема 27. Redux-saga advanced concept
Модуль 4 — Процесс разработки приложения, HTTP, WebSockets, GraphQL
- Тема 28. Процесс разработки React-приложения
- Тема 29. Продвинутая конфигурация приложения
- Тема 30. Test quality tools
- Тема HTTP and REST API
- Тема Потоки событий и WebSockets. WebWorkers и comlink для отложенной работы.
- Тема 33. Обзор GraphQL
Модуль 4 — Процесс разработки приложения, HTTP, WebSockets, GraphQL
- Тема 28. Процесс разработки React-приложения
- Тема 29. Продвинутая конфигурация приложения
- Тема 30. Test quality tools
- Тема HTTP and REST API
- Тема Потоки событий и WebSockets. WebWorkers и comlink для отложенной работы.
- Тема 33. Обзор GraphQL
Выпускной проект
В течении всего курса вы будете работать над проектом.
Будет предложено несколько вариантов на выбор:
- Разработка проекта, связанного с браузерной визуализацией. Аналог «conway’s game of life».
- Контроль расходов:
— регистрация чеков, сумм и дат;
— список чеков и квитанций;
— возможность строить графики со статистикой (в этом году/в прошлом году);
— хранение данных.
Выпускной работой студента станет доведение приложения, разрабатываемого на протяжении всего курса, до готовности к production.
После обучения вы:
- заберете с собой полный комплект обучающих материалов: видеозаписи всех вебинаров, презентации к занятиям, а также решение задач и проектов в виде кода на github и другие дополнительные материалы;
- получите сертификат о прохождении курса;
- приобретете опыт Frontend-разработки на React;
- получите приглашение пройти собеседование в компаниях-партнерах (эту возможность получают самые успешные студенты).
- Длительность — 3 месяца
- Онлайн в удобное время
- Обучение на практике
- Доступ к курсу навсегда
Кому подойдёт этот курс:
- Практикующим JavaScript-разработчикам
Вы освоите работу с фреймворком React.js, увеличите круг своих компетенций и задач, которые сможете выполнять на проекте — станете более конкурентоспособным сотрудником. - Frontend-разработчикам
js — один из самых популярных фреймворков в мире. Вы научитесь создавать изоморфные приложения на React Redux, типизировать их с помощью Typescript и работать с различными публичными сервисами.
Чему вы научитесь:
- Создавать приложения с нуля
Конфигурировать их с помощью Webpack или использовать готовые решения. - Работать с публичными API
Узнаете о механизмах OAuth и имплементациях в React. - Познакомитесь с Flux, Redux, Mobx
Узнаете подробности о состоянии приложения и работе с ним. - Профилировать свое приложение
Искать слабые места и оптимизировать их. - Тестировать свое приложение
Познакомитесь с библиотеками Jest и Enzyme. - Создавать SPA и RIA приложения с нуля
Будете применять разные подходы, с SSR или без него, включая деплой в облачный сервис Now.
Программа
Вас ждут 3 месяца теории и практики, которые добавят вам реальных знаний в разработке на JavaScript.
16 тематических модулей, 76 онлайн-уроков.
- Введение в React
- Что такое React. Основные преимущества
- Основы декларативного подхода
- Возможности React, компоненты, состояние, применения
- Экосистема React, основные библиотеки, из чего обычно состоит React-стек
- Создание проекта
- Конфигурация webpack на клиенте
- Конфигурация webpack на сервере
- Подключение к проекту HMR и SSR
- Подключение Typescript
- Подключение CSS modules, Jest, Enzyme
- Typescript
- Основы TypeScript. Типы
- Работа с массивами
- Работа с объектами и интерфейсами
- Типизация функций и типы TS
- Generics
- Классы
- Infer, typeof, keyof, Mapped Types
- Компоненты на примере новостной карточки Reddit
- Компоненты в React
- Состояния в Class Components
- Состояния в Functional Components
- Создание Layout приложения. Часть 1
- Создание Layout приложения. Часть 2
- Создание компонента новостной карточки
- Жизненный цикл компонента
- Hooks и функциональное программирование
- Каррирование и функции высшего порядка
- Hooks в React
- Map и Reduce в React
- Создание компонента dropdown c использованием hooks
- Compose, Pipe и их применение в React
- Компоненты — продвинутые темы. Введение в тестирование компонентов
- Адаптивные и неадаптивные компоненты. Mobile first и desktop first подходы
- Создание Dropdown-меню с использованием state
- Введение в unit-тесты и Jest
- Написание тестов для React компонента. Enzyme vs Snapshots
- Вспомогательные компоненты
- Работа с публичным API на примере Reddit
- Как работать с API
- Регистрируем аккаунт разработчика на Reddit
- OAuth2
- Страница авторизации пользователя
- Как структурировать API-запросы в приложении
- React Context
- Забираем из API данные пользователя
- Отображаем данные пользователя в компоненте через prop
- Используем React Context для работы с данными
- Обновляем данные через контекст
- Портал и форма
- Верстаем карточку поста, используя ReactPortal
- Ref и useRef React hook. Реализуем механизм click outside для скрытия модального окна
- Controlled и uncontrolled компоненты на примере поля комментария
- Сохраняем состояние формы, используя контекст
- Введение в Redux на примере поля для ввода комментария
- Введение в Redux
- Устанавливаем Redux, подключаем его к приложению
- Action + reducer
- Presentation Components/Container Components
- Использование Redux-Thunk на примере загрузки профиля пользователя
- Работа с асинхронными запросами в Redux
- Пишем простой logger middleware
- Подключаем thunk к приложению. Пишем свой первый асинхронный action
- Работа с асинхронным состоянием
- Пишем простой loader
- Формы на примере комментариев и карточки поста
- Экскурс в формы. Проблематика форм React
- Состояние полей. Различные подходы
- Какие можно использовать библиотеки и почему они могут мешать
- Сохраняем состояние формы, валидируем поля и выводим ошибки
- Доступности, нативные элементов и возможности работать с формой через табуляцию
- «Бесконечные» списки на примере ленты постов
- Работа с запросами к API
- Делаем загрузку ленты постов
- Виды бесконечных скроллов и пагинаций
- Делаем подгрузку ленты постов
- Эффективный рендеринг больших списков
- Сайдбар + роутинг
- Создаем сайдбар, используя более продвинутые практики
- Роутинг в SPA и в React
- Подключаем React Router
- Подключаем новостную ленту к роутеру
- Дополнительный функционал роутинга
- SSR + NextJS
- Серверный и статический рендеринг. Изоморфные приложения
- Делаем серверный рендеринг, используя express
- NextJS
- Переносим приложение на Next
- Деплой приложения в Zeit
- Бонусный модуль: Mobx.
Курс для начинающих разработчиков, которые уже освоили JavaScript и хотят расширить знания, чтобы работать над более сложными и интересными задачами. В процессе обучения вас ждёт практика на реальных проектах, максимально применимая в работе, и индивидуальный фидбэк от преподавателей.
Программа курса
- Компоненты
Библиотека React предоставляет нам возможность эффективной разработки современных фронтенд-приложений. В этом разделе мы ознакомимся с компонентным подходом, позволяющим создавать сложные интерфейсы на основе композиции простых блоков, научимся обрабатывать события и работать с внутренним состоянием компонентов, а также приобретём опыт работы с формами. - Продвинутые техники, одностраничные приложения
В этом блоке мы научимся организовывать сложные интерфейсы, используя композицию компонентов, интегрируемся с REST API, глубже изучим работу на основе современных подходов — хуков и Context API, а также научимся организовывать постраничную навигацию с помощью React Router. - Redux — управление состоянием
В этом разделе мы познакомимся с одним из ключевых навыков в разработке сложных приложений — управлением глобальным состоянием приложения. Мы начнём с простых инструментов: библиотеки Redux, лежащей в основе всего, и Redux Thunk для организации простых побочных эффектов, а закончим продвинутыми инструментами: Redux Observable и Redux Saga. - GIT — система контроля версий
в подарок
За 3 занятия вы научитесь работать с системой Git и с сервисом GitHub, сможете публиковать свои домашние работы и уже в процессе обучения сформируете первое портфолио (работодатели часто просят показать примеры вашего кода на GitHub).
- Дипломный проект
В рамках дипломного проекта вы создадите и развернёте в интернете полноценный фронтенд для интернет-магазина: с поиском, корзиной, оформлением заказа и постраничной навигацией.
Вашу квалификацию подтвердят документы установленного образца.
Программа обучения:
Неделя 1 — Введение в React.js
— Знакомимся с командой курса и одногруппниками.
— Изучаем JSX и Virtual DOM в React.
— Рассматриваем компонентный подход и способы передачи данных.
Неделя 2 — Паттерны React.js, тестирование
— Изучаем компоненты, элементы и экземпляры класса компонент.
— Рассматриваем библиотеку Recompose, паттерны high order components и Render Props.
— Разбираемся в преимуществах тестов, изучаем Jest, Enzyme, Snapshots.
Неделя 3 — Redux, роутинг
— Изучаем роутинг: Simple routing, роутинг со Switch, а также вложенный роутинг.
— Знакомимся с библиотекой Redux: основные понятия и концепции Store, Actions, Reducers, React-redux.
— Рассматривается middleware как способ работы с Sideeffect.
Неделя 4 — Redux-saga
— Изучаем библиотеку Redux-saga. Повторяем generator* functions. Учимся запускать их параллельно.
— Разбираем метод Take. Изучаем select, как способ получения данные из Store.
— Рассматриваем способы стилизации React приложения. Изучаем библиотеки ClassNames, StyledComponents, BrowserList, MaterialUI.
Неделя 5 — Формы, CI & DI & Client error handling
— Рассматриваем работу с формами с помощью библиотек Formik, Redux Forms, React Final Form.
— Рассматриваем методы обеспечения качества production кода. Разбираем такие инструменты как: Husky, TravisCI, HerokuNow.
— Изучаем набор полезных библиотек для разработки (Storybook, RamdaJS, Axios).
— Рассматриваем TypeScript.
Неделя 6 — Работа над проектом
— Доделываем приложение и отправляем на проверку.
Выпускной проект
- Во время первой половины курса мы займемся созданием дизайн системы: изучим React.js с помощью написания компонент от простых до сложных, а вторую половину занятий посвятим созданию приложения Loft-такси с помощью этого набора.
По окончании обучения вы получите сертификат.
LoftSchool знают и ценят работодатели, поэтому сертификат станет вашим дополнительным плюсом при трудоустройстве в IT-компанию.
Курс позволит освоить React от азов до создания полноценного SPA(single page application)-приложения с роутингом и продвинутым управлением состоянием.
Создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.
В курсе на практике создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.
- Узнаете все особенности последней версии React 17
- Научитесь работать и с классовыми, и с функциональными компонентами
- Разберётесь, чем отличаются управляемые и неуправляемые компоненты
- Научитесь использовать хуки
- Освоите работу с состоянием и жизненным циклом приложения
- Создадите SPA (single page application) с react-router
Для кого этот курс
- Для тех, кто хочет изучить самый популярный frontend фреймворк React JS и подготовить портфолио
- Для тех, кто пробовал сам изучать React, но по какой-либо причине не справился и хочет закрыть пробелы
- Для тех, кто хочет углубиться в веб-разработку и взять лучшее из современных практик
- Для тех, кто застрял на первых шагах профессии и хочет добрать компетенций к резюме
- Для тех, кто хочет получить актуальные навыки и стать более востребованным на рынке веб-разработки
ПЛАН КУРСА:
Программа обучения включает видео уроки по изучению React с нуля для начинающих. Благодаря практическим заданиям и примерам, Вы сможете закрепить полученные знания по использованию React JS на практике.
- ВВЕДЕНИЕ
- REACT С JSX И БЕЗ
- КЛАССОВЫЕ REACT-КОМПОНЕНТЫ
- РАБОТА С ФОРМАМИ В REACT
- ПРОЕКТ «ФИЛЬМЫ»
- ФУНКЦИОНАЛЬНЫЕ REACT-КОМПОНЕНТЫ
- ХУКИ ПОДРОБНО
- ПРОЕКТ «ВИТРИНА»
- ПРОДВИНУТОЕ УПРАВЛЕНИЕ СОСТОЯНИЕМ ПРИЛОЖЕНИЯ
- РОУТИНГ И SPA-ПРИЛОЖЕНИЕ
- ПОДВЕДЕНИЕ ИТОГОВ
ЗАВЕРШЕНИЕ КУРСА — ПОЛУЧЕНИЕ СЕРТИФИКАТА.
В ходе курса вы:
- изучите работу с реактом,
- научитесь прописывать на его основе программы и создадите одно полноценное приложение с красивым пользовательским дизайном.
План курса:
За курс вами будет изучена библиотека React JS, начиная от её установки и заканчивая реализацией небольшого веб проекта.
Прежде чем приступать к видео курсу вам стоит ознакомиться с языком JavaScript и Node JS, так как именно они являются основными платформами на которых построена библиотека React.
На курсе вы за три месяца разберётесь в этом стеке технологий. Вам предстоит изучать теорию в тренажёре, написать своё приложение и по желанию работать в командах над проектными задачами. Курс подойдёт тем, кто умеет верстать и знает основы JavaScript.
Сертификат — официальный документ о дополнительном образовании. Чтобы его получить, нужно сдать проектную работу.
Программа обучения:
Бесплатное входное тестирование
Около 2 часов
- Вам предстоит решить несколько задач по вёрстке и JavaScript и пройти тест по базовым технологиям. Это позволит понять, подойдёт ли вам курс, и получить рекомендации о том, что повторить перед стартом.
Погружение в React и Redux
4 недели, 80 часов
- В этом модуле вы изучите основы и инструментарий React. Научитесь работать с классовыми и функциональными компонентами и попрактикуетесь в их написании. Узнаете, как с помощью хуков привнести мощь классовых компонентов в функциональные. Создадите простую заготовку React-приложения посредством CRA и научитесь выполнять его отладку с применением плагина React DevTools.
Узнаете, что такое «состояние» в терминологии современных фреймворков и библиотек. Научитесь работать с одной из самых популярных библиотек для хранения состояния — Redux.
В проектной работе:
Вы сверстаете первый экран в приложении, подключите к нему Redux-хранилище и реализуете перетаскивание ингредиентов с помощью React DnD.
Роутинг, безопасность и TypeScript
4 недели, +1 неделя каникул, 80 часов
- Вы узнаете, как настраивать роутинг в SPA-приложении и создавать динамические маршруты. Научитесь работать с основными хуками в React Router. После этого изучите процессы аутентификации и авторизации пользователей — это поможет сделать так, чтобы доступ к определённым действиям и страницам приложения был только у авторизованных пользователей.
Затем погрузитесь в основы TypeScript и научитесь использовать его в React-приложениях.
В проектной работе:
Создадите новые страницы в приложении и настроите роутинг. Добавите регистрацию и авторизацию в приложение и защитите маршруты от неавторизованных пользователей. Перепишите код на TypeScript.
Протокол WebSocket и деплой приложения
4 недели, +1 проект в портфолио, 70 часов
- Вы завершите изучение TypeScript типизацией Redux. После этого реализуете соединение с сервером в режиме реального времени с использованием протокола WebSocket.
Познакомитесь с подходами к тестированию и узнаете больше об автоматизированном тестировании приложения. А также научитесь деплоить готовое приложение.
В проектной работе:
Создадите ленту заказов с использованием WebSocket и перепишите всё хранилище на TypeScript. Добавите к приложению тесты на Cypress и Jest, а после загрузите проект на удалённый сервер.
Карьерный трек (опционально)
От 40 часов
- Параллельно с основной программой мы помогаем с поиском первой работы или сменой текущей: продумываем стратегию и сопровождаем в процессе. Вместе c опытными IT-рекрутерами вы поработаете над резюме и оформите портфолио на GitHub.
На курсе вы разработаете 3 веб-приложения, освоите React и познакомитесь с его экосистемой – напишете первые тесты для ваших веб-приложений, а также создадите UI-библиотеку. Помимо технических навыков, получите soft-скиллы – опыт работы в команде и рекомендации по успешному прохождению собеседования.
Программа курса
- Введение
Разберём, как проходит процесс обучения, кому подойдет этот курс и какие инструменты будут изучаться. - Сложные концепции в JS
Углубимся в изучение JS. Рассмотрим продвинутые концепции, которые будут встречаться в дальнейшем и без понимания которых будет сложно перейти к изучению React.
- Деструктуризация
- Обработка ошибок
- Асинхронность
- Реактивность
- Регулярные выражения
- Новые возможности
- ФП в JS
- ООП в JS
- Прототип Pomadoro — приложения для личной продуктивности.
- Подготовка рабочего места
Подготовим рабочее место для того, чтобы писать грамотный и красивый код стало проще и удобнее. Научимся пользоваться консолью.
- Установка VSCode
- Установка NPM
- Работа с консолью
- Eslint
- Prettier
- Husky
- Добавляем возможность настраивать Pomadoro под себя. Автоматизируем таймер. Исправляем баги.
- React
Разберем базовые функции и основные концепции React. Поймем, что отличает функциональный подход от компонентного. Создадим первую форму на React.
- Cтарый React
- Новый React
- JSX
- React + CSS
- Основные принципы
- Модульность
- Создаем прототип экрана регистрации/логина.
- Redux
Узнаем про самую популярную библиотеку для React, разберем её концепции. Проанализируем плюсы и минусы данного подхода. Рассмотрим основные функции и совместим React и Redux.
- Плюсы
- Минусы
- Аналоги
- Основные сущности — store, type, action и reducer.
- Middleware
- Мутации
- Делаем To-Do лист. Выводим список из Redux.
- Продвинутая работа с React, React Thunk
Разберем более продвинутые концепции в React. Узнаем, как искать и исправлять баги в React. Напишем асинхронный код. Научимся создавать правильную форму входа и рассмотрим виды запросов.
- React изнутри
- Продвинутые хуки
- Кастомные хуки
- Лучшие практики
- Отладка кода
- Redux Thunk
- Работа с бэкендом
- Дорабатываем форму входа. Создаем список всех зарегистрированных пользователей. Реализуем фильтрацию.
- Маршрутизация. React Router
Разберем более продвинутые концепции в React. Узнаем, как искать и исправлять баги в React. Напишем асинхронный код. Научимся создавать правильную форму входа и рассмотрим виды запросов.
- React изнутри
- Продвинутые хуки
- Кастомные хуки
- Лучшие практики
- Отладка кода
- Redux Thunk
- Работа с бэкендом
- Объединяем все страницы в одно приложение. Создаем личный кабинет пользователя.
- Вспомнить всё!
Закрепим изученные технологии. Углубимся в работу с бэкендом и реализуем новую, более сложную, функциональность приложения.
- Рефакторинг приложения. Модальные окна. Продвинутая работа с бэкендом.
- Jest
Научимся тестировать код автоматизировано. Разберемся, как тестировать функциональность приложения и как это отличается от тестирования компонентов. Попробуем новый процесс разработки – TDD.
- Зачем нужны тесты?
- TDD
- Виды тестирования
- Пирамида тестирования
- Jest
- Синхронное тестирование
- Асинхронное тестирование
- Snapshot тестирование
- React Testing Library
- Покрываем код тестами. Пробуем TDD.
- Пишем стили правильно. Styled-Components. Storybook.
Узнаем, что такое css-in-js. Реализуем темную и светлую тему и переключатель между ними. Разберемся, как совместно с дизайнером разрабатывать хорошие интерфейсы. Создадим библиотеку компонентов в своем приложении.
- Styled-Components
- API
- Создание темы
- Storybook
- API
- Аддоны
- Мигрируем приложение с CSS на styled-components. Создаем библиотеку компонентов в Storybook. Создаем темную тему.
- Архитектура React приложений
Подготовка к созданию выпускного проекта. Разберём, как проектировать приложения, разобьемся на команды и выберем темы.
- Зачем нужна архитектура?
- Какие виды существуют?
- Плохая архитектура
- Хорошая архитектура
- Feture Slice
- Atomic
- Flux
- Dumb/Smart
- Собираем команду для итогового приложения. Распределяем задачи. Нулевой спринт.
- Мастер-класс
- Зачем писать код, если есть no-code
Узнаем про инструменты, которые могут ускорить и упростить создание приложений. Разберем на реальных кейсах плюсы и минусы такого подхода. Научимся применять no-code решения на практике.
- Что такое no-code и low-code
- Когда стоит использовать
- Когда не стоит использовать
- Удачные примеры
- Netlify
- Первый и второй спринт.
- Как найти работу
Рассмотрим виды компаний, разберем плюсы и минусы фриланса, поговорим о том, как составлять резюме и что писать в сопроводительном письме, проанализируем вопросы, которые задают на собеседовании, и научимся отвечать на них грамотно и уверено.
- Третий спринт. Завершение итогового приложения. Подготовка презентации.
- Подводим итоги
- Выбираем лучшее приложение
- Составляем роадмап на будущее
- Какие проекты можно ещё написать?
- Точки роста
Проекты курса:
- Pomadoro
- LMS
- Хакатон
Ваш сертификат, подтверждающий обучение в Skill-Branch, профессиональные знания и навыки.
Приложите его к CV или резюме, чтобы обойти конкурентов и получить престижную работу!
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Программа курса
- Первая неделя
Участие в живых лекциях, работа над проектом с личным наставником.
- Вторая неделя
Улучшим знания о React и компонентах. Разберём state, события и методы жизненного цикла компонента. Познакомимся с React Hooks и узнаем, как с их помощью заменить class-компоненты.
- Третья неделя
Знакомимся с Flux-архитектурой: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Подключаем к проекту Redux и обновляем кодовую базу.
- Четвёртая неделя
Поговорим о производительности React-приложений: какие есть особенности, на что следует обращать внимание при проектировании компонентов в первую очередь.
- Пятая неделя
Познакомимся с инструментами и методиками тестирования React-приложений. Настроим инфраструктуру для тестирования, напишем тесты для созданных компонентов.
- Шестая неделя
Подготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества. Завершение работы над проектом и подготовка к итоговой защите.
- Седьмая неделя
Первая оценка проекта проверяющим наставником по критериям качества.
- Восьмая неделя
Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.
- Девятая неделя
Внесение финальных правок и получение итоговой оценки.
Курс состоит из 4-х блоков:
- Знакомство с React, и его экосистемой.
- Построение приложений с React: Redux.js.
- React для SPA: react-router и продвинутые API Реакта.
- Куда развиваться дальше.
Программа курса:
Блок 1 — Знакомство с React и его экосистемой.
В этом блоке мы начнем с того, на чем остановились в скринкасте по Реакт. Научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход, познакомимся с экосистемой, научимся использовать сторонние компоненты и работать с формами.
- Разбираем как работает create-react-app.
- Глубже знакомимся с Реактом, Virtual DOM, JSX.
- Разбираем React Hooks, их отличия от стейта и lifecycle методов.
- Разберем примеры тестирования компонент с помощью Jest и Enzyme.
- Подключаем стили с css modules.
- Учимся переиспользовать код с помощью наследования, декораторов и кастомных хуков.
- Связь с DOM: keys & refs.
- Подключаем сторонние компоненты.
Блок 2 — Построение приложений с React: Redux.js
Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, настраивать потоки данных и взаимодействие с сервером. В процессе построения простого новостного приложения мы детально разберем самую популярную библиотеку для одностороннего потока данных, узнаем ее особенности и научимся использовать дев-тулзы.
- Особенности Redux.js: функциональный подход, Redux dev tools.
- Store как иммутабельный объект: Redux + Immutable.js.
- Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
- React-redux для связи компонентов с логикой.
- Мемоизированные селекторы reselect.
- Side-effects в Redux: создание и использование Middlewares.
- Получение данных от сервера.
- Асинхронные экшены с redux-thunk
Блок 3 — React для SPA: react-router и продвинутые API Реакта
Разработка single-page applications – одно из основных направлений фронтэнда. Мы разберем, как строить их, используя React. Научимся использовать react-router и продвинутые элементы API React.JS.
- Зачем нужен роутинг и как он устроен, проектируем структуру приложения.
- Разбираем react-router v5.
- Настраиваем вложенные роуты.
- Выбираем и настаиваем history для нашего приложения.
- Объединяем react-router и
- Учимся обрабатывать серверные ошибки и декларативно управлять роутером.
- Используем context – еще один механизм передачи данных.
- Обзор Advanced API react-router.
- Используем props.children для композиции компонентов.
- Анимации в React, CSSTransitionGroup.
Блок 4 — Куда развиваться дальше
На этот момент вы уже знаете все, что необходимо, для разработки React приложений. Но на этом рано останавливаться, вокруг Реакта выросла огромная экосистема. Мы обзорно пройдемся по основным возможностям для развития, разным платформам, библиотекам и вспомогательным инструментам. + Будет возможность разобрать интересующие именно вас вопросы.
- Работа с формами: redux-form, final-form, formik.
- Что ждать от React 17.
- React Native и React VR.
- GraphQL + Relay/Apollo.
- MobX vs Redux.
- Разные подходы к сайд-эффектам: redux-thunk, redux-loop, redux-saga, redux-observable.
Курсовой проект
- Сервис выбора ресторана и заказа еды.
Вы научитесь:
- cоздавать компоненты на основе ReactJS;
- настраивать жизненный цикл компонентов;
- отрисовывать форму по условию;
- обрабатывать события и управлять всплытием состояний.
Программа курса:
Модуль 1. Введение в React и JSX (4 ак. ч.)
- Что такое React?
- Какие задачи решает React?
- Установка библиотеки ES6 и JSX
- Встраиваемые выражения
- Определение атрибутов в JSX
- Указание дочерних элементов
- React-элементы
- Отрисовка элементов
- Обновление элементов
Модуль 2. React-компоненты, состояния и жизненный цикл (4 ак. ч.)
- Функциональные и классовые компоненты
- Отрисовка компонентов React
- Композиция элементов
- Извлечение компонентов
- Понятие состояния
- Преобразование функции в класс
- Локальное состояние класса
- Методы жизненного цикла
- Рекомендации по работе с состояниями
- Нисходящие потоки данных
Модуль 3. Условная отрисовка. Формы (4 ак. ч.)
- Отрисовка с условием
- Предотвращение отрисовки компонента
- Отрисовка нескольких компонентов
- Основной компонент списка
- Ключи
- Извлечение компонентов с ключами
- Размещение map() в JSX
- Контролируемые компоненты
- Теги
- Альтернатива контролируемым компонентам
Модуль 4. Всплытие состояний (4 ак. ч.)
- Всплытие состояний.
Цель курса:
Изучить философию и дух компонентного подхода современных javascript-фреймворков, научиться использовать React для решения практических задач.
Для новичков React сложнее, чем Vue.js. Но вакансий и заказов на фрилансе на нём больше.
Программа курса
- Простая сборка с webpack
- Основы компонентного подхода
- Понимание JSX
- Функциональные компоненты vs классы
- Классический React vs функции + хуки
- Изменение состояния и иммутабельность
- JSX и ветвления при рендеринге
- Рендеринг элементов в цикле
- Нюансы атрибута key
- Понимание основных хуков
- useState, useEffect, useRef
- Создание своих хуков
- Взаимодействие между компонентами
- Однонаправленный поток данных
- Обработка событий
- Модульный CSS vs CSS in JS
- Работа с формами
- Children — передача контента в компонент
- Проблемы большой иерархии компонентов
- Идеи хука useContext
- Идеи единого склада данных
- Состояние и хук useReducer
- Управление состоянием приложения
- Централизованный склад данных
- Понимание flux-архитектуры
- Redux, который бесит новичков
- Основы работы с Mobx
- Организация работы с Mobx
- Модули и rootStore
- Основы React Router
- Api History
- Создание небольшого SPA
- Общение с серверным API
- Fetch и промисы
- Обработка ошибок
- Подключение полифилов
- Построение архитектуры приложения
- Доработка SPA
- Применение изученных тем
- Сборка в production
- Перенос SPA на сервер
- План дальнейшего развития.
Чему вы научитесь:
- Создавать полноценные приложения на React
- Грамотно организовывать состояние приложения
- Взаимодействовать с бекендом по API
- Интегрировать React со сторонними библиотеками.
Уроки курса:
Продолжительность 24 часа
- Введение
Познакомиться с курсом и подготовить окружение. - Компоненты
Познакомиться с базовой единицей в react — компонентом. Научиться его создавать и отрисовывать в браузере. - JSX
Научиться эффективно использовать jsx. - Props
Познакомиться с механизмом передачи данных в компоненты. - Работа с коллекциями
Научиться обрабатывать коллекции данных внутри компонентов. - Различия jsx и html
Узнать об особенностях jsx, которые работают не так как в html. - Обработка имён классов
Научиться правильно работать с классами компонентов, которые могут изменяться динамически. - Children
Научиться создавать компоненты боксы, способные работать с вложенными компонентами. - Состояние
Познакомиться с созданием stateful компонентов. Научиться добавлять интерактивности. - События
Познакомиться с особенностями системы событий React. - Автоматное программирование
Вспомнить что все вокруг автоматы. Научиться правильно работать с автоматами в React. - Формы
Изучить принципы взаимодействия с формами. - Неизменяемость
Научиться работать с составными структурами в неизменяемом стиле. Познакомиться с библиотекой `immutability-helper`. - Вложенные компоненты
Разобраться с хранением состояния и управлением событиями во вложенных компонентах. - Функциональные компоненты
Рассмотреть создание компонентов на основе функций и использования пространств имён. - Virtual Dom
Познакомиться с устройством React. - Тестирование
Узнать о проблемах, которые поджидают разработчика при работе с исходным кодом. - Асинхронная обработка
Узнать об особенностях работы с объектом событием в асинхронном коде. Попрактиковаться в создании асинхронных обработчиков. - Жизненный цикл компонента
Познакомиться с жизненным циклом компонента в процессе работы. - Производительность
Научиться выжимать из React максимальную производительность. - Refs
Научиться взаимодействовать с реальным DOM для интеграции сторонних компонентов. - Дополнительные материалы
Помогают глубже и всесторонне рассмотреть тему курса в открытых статьях и видео подобранных командой Хекслета.
Чему вы научитесь с помощью данного видео курса:
- Работать с платформой React и создавать несложные веб-приложения
- Работать с компонентами и окружением React
- Использовать маршрутизацию и ES2015
- Разбираться в архитектуре Flux, работать с API
- Создавать полноценное SPA (одностраничное приложение)
- Совершать хостинг разработанного веб-приложения.
Основные темы:
- План курса
- Что такое React?
- DOM-дерево
- Как скачать библиотеку React
- Как подключить библиотеку React
- JSX
- Как поместить компонент в DOM-дерево
- Параметры компонетов
- Компонеты в React
- Написание списка контактов на React
- События в React
- Подведение итогов.
Пройдя данный курс, вы сделаете первый шаг к серьезному обучению и сможете чётко определиться с направлением ваших интересов.
Уроки:
- Введение
- Настройка окружения
- Компоненты и элементы
- Свойства компонентов
- Условный рендеринг
- Состояние компонентов
- Жизненные циклы компонентов
- Списки и ключи
- Формы
- Контекст
- Компоненты высшего порядка
- Redux.
В рамках курса по изучению библиотеки React JS, мы создадим приложение для заказа бургеров в сети ресторанов Hot Burgers! С помощью приложения можно будет в реальном времени управлять стоимостью и ассортиментом меню.
Приложение будет включать компоненты меню, форму заказа и панель администратора. Наши данные будут храниться в базе данных Google Firebase и обновляться в режиме реального времени! Система авторизации позволит регулировать доступ к системе управления меню.
Курс состоит из 29 видео-уроков:
- Настраиваем Инструменты
- Компоненты React
- Создаем первый компонент Landing
- JSX в React
- Добавляем CSS в React
- Объект State, обработчики событий и значение this
- Пишем логику обновления объекта State
- Головной компонент App и структура приложения
- Объект Props в React
- Функциональные компоненты React
- Настраиваем React Router
- Push State в компоненте Landing
- Объект State в компоненте App
- Загружаем бургеры в меню
- Отображаем бургеры из объекта State
- Объект State в компоненте Order
- Отображаем компонент Order
- Пишем компонент Shipment
- Интеграция с Google Firebase
- Cохраняем данные о заказе в Local Storage
- Редактирование свойств бургера
- Удаление бургера из меню
- Создание анимации
- Прописываем Prop Types
- React Хук useState
- Авторизация с Google Firebase
- Сборка готового приложения
- Размещение на хостинге Now
- Размещение на хостинге Netlify.
Чему Вы научитесь:
- Создавать приложение на React.JS с нуля
- Cоздавать компоненты React, используя JSX синтаксис
- Использовать модули Javascript
- Использовать новые фичи Javascript ES6 при написании кода
- Создавать и управлять сосотоянием компонентов
- Передавать данные между компонентами
- Использовать объект LocalStorage в браузерах
- Создавать маршрутизацию с помощью React Router 4
- Обрабатывать данные из форм
- Использовать хук useState
- Использовать возможности базы данных Google Firebase
- Создавать систему авторизации
- Развертывать приложение на хостинге (Netlify и Now).
