Трек
Для программистов

Веб-разработка на React

В этом треке вы подробно изучите работу с JavaScript в браузере и научитесь создавать полноценные фронтенд-приложения с помощью Websockets и API по лучшим архитектурным практикам.

Начать учиться
Картинка программы Веб-разработка на React
Самостоятельно,
в любое время
Обратная связь
по урокам от поддержки Хекслета
Неограниченный доступ
к пройденной теории
1754 студента
проходят трек прямо сейчас

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

Уроки
  • Введение

  • JavaScript в браузере

  • Глобальный объект Window

  • BOM-объекты

  • DOM

  • Навигация по DOM-дереву

  • Декларативный поиск по DOM-дереву

  • Консоль разработчика

  • Манипулирование DOM-деревом

  • Управление узлами DOM

  • Полифиллы

  • Введение в события

  • События на практике

  • Формы

  • Перехват и всплытие

  • События документа

  • AJAX

  • JQuery


Чему научитесь
  • Оживлять веб-страницы добавляя в них интерактивность

  • Взаимодействовать с любыми элементами на странице, выбирать их или изменять

  • Обеспечивать универсальную работу JavaScript в любом браузере

  • Правильно обрабатывать формы

  • Выполнять AJAX-запросы на сервер

  • Использовать JQuery для обработки DOM

Испытания
Уроки
  • Введение

  • Состояние приложения

  • Комплексное состояние

  • Отрисовка (рендеринг) состояния

  • Состояние отображения (UI State)

  • Процессы и автоматы, их описывающие

  • Нормализация данных

  • MVC

  • Состояние форм

  • Организация текстов интерфейса

  • Инициализация приложения


Чему научитесь
  • Создавать модульные и легко расширяемые фронтенд-приложения

  • Правильно разделять приложения на слои и строить зависимости между ними

  • Структурировать состояние приложения оптимальным способом

  • Использовать теорию автоматов для описания происходящих процессов в коде

Испытания
Уроки
  • Введение

  • Компоненты

  • JSX

  • Props

  • Работа с коллекциями

  • Различия jsx и html

  • Обработка имён классов

  • Children

  • Состояние

  • События

  • Автоматное программирование

  • Формы

  • Неизменяемость

  • Вложенные компоненты

  • Функциональные компоненты

  • Контекст (Context API)

  • Virtual Dom

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

  • Асинхронная обработка

  • Жизненный цикл компонента

  • Производительность

  • Refs

  • Заключение


Чему научитесь
  • Создавать полноценные приложения на React

  • Грамотно организовывать состояние приложения

  • Взаимодействовать с бекендом по API

  • Интегрировать React со сторонними библиотеками

Испытания
Уроки
  • Введение

  • Хук useState

  • Хук useEffect

  • Хук useContext

  • Хук useRef

  • Хуки useCallback и useMemo

  • Композиция компонентов


Чему научитесь
  • Использовать встроенные хуки

  • Создать приложение, состоящее только из функциональных компонентов

  • Внедрить готовые хуки для решения типовых задач

Испытания
Уроки
  • Введение

  • Redux

  • Редьюсеры

  • Мидлвары

  • Подключение Redux Toolkit к React

  • Подробнее о слайсах

  • Нормализация данных в Redux

  • Механизм Entity Adapter

  • Механизм ExtraReducers

  • Асинхронные запросы

  • RTK Query


Чему научитесь
  • Строить фронтенд-приложения, которые легко поддерживать

  • Организовывать данные и доступ к ним внутри хранилища

  • Автоматизировать работу с HTTP-запросами

Испытания

Напишите real-time приложение на React/Redux, используя AJAX, REST, websockets, React (с хуками) + Redux (@reduxjs/toolkit) + Formik

Подробнее

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

Курс состоит из учебных модулей с уроками и проектами
  • В каждом уроке — теория, тесты на закрепление изученного и практика прямо в браузере

  • Задания проходят автоматическую проверку тестами и линтером

Теоретический материал
Мы воссоздали реальное рабочее пространство программиста. Прочувствуйте разработку «как есть» — с установкой софта, запуском кода, чтением ошибок и консольными командами
  • Вы прямо в браузере получаете доступ к виртуальной машине, редактору кода и к консоли

  • Сразу видите обратную связь по своему решению в виде тестов и их результатов

Упражнение в IDE
Проходите уроки самостоятельно в любое удобное время
  • Урок — это теория, квиз (проверочный тест) и практика

  • Учебный материал представлен в текстовом формате, иногда встречаются короткие видео

  • Практика может быть в виде упражнений в браузере, испытаний, проектов, самостоятельной работы и домашних заданий

  • Можно задавать вопросы по теории и практике уроков команде поддержки Хекслета

Тесты

Что говорят наши студенты о курсах и проектах

Грамотная задача, применялось все что было в предыдущих уроках. Плюс решение очень близко к учительскому. Спасибо! Функциональный стиль + реакт + редукс + финтюфлишки + ООП непреднамеренно заставляет писать всех приблизительно в одном общем стиле(или мне так кажется (-: ). Все равно круто! React + redux можно считать грамотным подведением итогов, т.к. я думаю у тех кто смог вынести для себя достаточно информации из всех предыдущих глав с этими 2 курсами проблем вообще не может быть.

Спасибо команде Хекслета за такой проект. Пришлось применить все знания, которые были получены в уроках. Также очень сильно помогли испытания) Конечно же не обошлось без подводных камней. Огромное спасибо Роману Макарову за помощь и советы в конце. Обязательно к ним присмотрюсь) Ну а теперь - рефакторить и улучшать текущий код. Также попробую написать тесты для проекта. :)

Данный курс зашел как по маслу, материал полностью доступен для понимания! Нет ни одного момента, который остался бы полностью не раскрытым. Даже глава "Производительность" дала ключевое понимание правильной оптимизации приложения на Реакте, хотя, казалось бы, что можно рассказать в одной главе на одну страничку про такое огромное как **Optimization**, но и тут Хекслет показал своё мастерство в подаче материала. Просто Восторг! Спасибо за отличнейший курс!

Вот и закончился финальный проект профессии. Лично для меня он стал самым сложным из всех, сказались дедлайны на работе наложившиеся на дедлайн по оплате премиума :). Проект классный, интересный и безумно полезный. Под конец всех проверок решил написать тесты к проекту и после того как я ними разобрался прям почувствовал что в голове случился очередной левел-ап и теперь я понимаю намного больше чем раньше. Хочу выразить огромную благодарность моему наставнику Ирине которая очень сильно...

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

Кирилл, спасибо за проект! Много нового и интересного узнал. Полученные знания подкрепились практикой и начали усваиваться в голове. Также хочу поблагодарить Хекслет за курс в целом. Вы заставили меня пересмотреть взгляды на обучение, программирование и свою профессию в целом. * Как получить сертификат? :)

Упражнение супер! Да и весь этот курс. Для меня, как новичка, стало понятно, что программирование фронтенда - это прям весьма и весьма не просто. С выделением состояния конечно нелегко. Наверное нужно больше практики. Спасибо!

Кирилл, спасибо большое за проект и за курс в целом! 4 проект дался как-то легко в том плане, что не было этих зверских полных переписываний, как на 2 и 3 проектах. Здесь я много думал, 2 дня думал над архитектурой взаимодействия с сервером( отправляем объект, получаем обратно сообщение и данные, эти данные добавляем в редакс, определяя функцию по тексту ответного сообщения). Завершение наступило совершенно неожиданно, я ожидал опять диких простыней. Так же спасибо за весь курс. Он...

Получите доступ

К этому треку и ко всем остальным курсам Хекслета по подписке за 3 900 ₽ в месяц

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Кому подойдет обучение

Тем, кто пробовал учиться на сторонних курсах, но до сих пор испытывает сложности в самостоятельном написании кода
Тем, кто уже программирует и хочет повысить свой профессиональный уровень

Хекслет —
это серьезная подготовка инженеров-программистов

  • Топовые IT-компании обучают своих сотрудников на Хекслете

  • Весь обучающий контент создан практикующими IT-специалистами

  • Программы, направленные на системное развитие инженерного мышления

17 000+

Студентов учатся ежемесячно

4.7+ звезды
4.7+

Рейтинг на отзовиках: Otzyvmarketing

Индекс лояльности

Нашу платформу часто рекомендуют студенты

Нам доверяют обучение своих сотрудников

Контур
Kaiten
СБЕР МАРКЕТ
Bell integrator
QIWI
Agima
Авиасейлc
Альфа Банк
Uchi.ru
Райффайзенбанк
PeterService
Simtech
Itech Group
Хотите учиться от компании?

Расскажите вашему работодателю о Хекслете

Оформите подписку за 3 900 ₽ в месяц
  • Получите доступ к этому треку и ко всем остальных курсам Хекслета

  • Учитесь сколько нужно, отменить подписку можно в любой момент

  • Задавайте вопросы по урокам — вам ответит поддержка Хекслета

  • Сохраните неограниченный доступ к пройденной теории даже после отмены подписки

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Трек — это набор курсов по определенной теме для повышения квалификации и развития инженерного мышления. Треки подходят как для разработчиков с опытом, так и для новичков в качестве задания «со звёздочкой».

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

Мы рекомендуем выделять 5-10 часов в неделю. Так с одной стороны обучение будет достаточно интенсивным, чтобы не растягивать его надолго, а с другой — достаточно комфортным, чтобы совмещать с работой и успевать отдыхать.

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

Вы можете учиться самостоятельно или вместе с наставником, он поможет разобраться в сложных моментах.

Тогда вы можете обучаться вместе с наставником.

Каждый наставник — опытный программист, который добился успехов в профессии, а теперь делится знаниями и опытом со студентами Хекслета. Кандидаты проходят строгий отбор — наставником становится лишь каждый десятый, поэтому случайных людей у нас нет.

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

Мы принимаем карты Visa, MasterCard и МИР любого банка, валюта счёта тоже может быть любой.

Если решите учиться самостоятельно, оформите подписку на план «Базовый». Доступ ко всем трекам откроется сразу после оплаты.

Если нужна помощь наставника, оставьте заявку на обучение. С вами свяжется куратор, подберёт подходящего наставника и пришлёт ссылку на оплату.