React с нуля: компоненты, состояния, props
Освойте React, создайте свое приложение с нуля — и станьте востребованным специалистом.
Попробовать
На React строят красивые сайты
Сайты сами себя не сделают, зато сделаете вы — на React. Он как «Лего» в мире сайтов и приложений.
и карьеру — с большой
и карьеру —
с большой
Если знаете React — всегда найдете работу и по душе, и по кошельку.
зарплатой
зарплатой
чтобы вы нашли любимую работу
HeadHunter знает, где искать классные вакансии, а Skypro — как их получить.
Вместе мы дадим вам самые актуальные знания и навыки, которые ищут все работодатели.
подружились
Кому подойдет?
Разработчикам
Чтобы делать красивые и удобные сайты и веб-приложения.
Новичкам в разработке
Чтобы освоить React с нуля.
Всем, кто ищет себя
Чтобы начать новую карьеру или получить дополнительный заработок.
Как проходит обучение
Работаем в инструменте с первого урока
Оттачивайте все навыки сразу на практике.
Закрепляйте навыки на упражнениях
Выполняйте тесты и практические задания.
Итоговый проект: приложение для управления задачами
С нуля создадите приложение в формате Kanban-доски.
Все уроки открываются сразу
Учитесь в комфортном для себя темпе.
Список тем курса
Знакомство с React 💻
Что такое React и зачем он используется
Создание и настройка проекта с нуля через Vite
JSX: синтаксис, выражения, условия
Функциональные компоненты
Установка и настройка проекта React
Создание компонентов и добавление дочерних в JSX-стиле
Props и хуки 🔗
Что такое хуки и зачем они нужны
Использование useState и useEffect: состояние и побочные эффекты
Подъем состояния для общего использования
Работа с кастомными хуками: назначение и принципы
Side effects и их контроль через useEffect
Props: передача данных и методов между компонентами
Применение хуков в реальных задачах
Стилизация 🏙
CSS-in-JS: преимущества и подход
Библиотека Styled Components: установка и синтаксис
Глобальные стили и их применение
Создание и стилизация компонентов
Тематическое оформление и базовая работа с темами
Роутинг ⛓️
React Router: назначение и принципы работы
Основные компоненты для настройки маршрутизации
Создание навигационной структуры
Переходы между страницами и передача параметров
Работа с API 📕
Использование Fetch API в React
Обработка ошибок и отображение состояния загрузки
Controlled- и uncontrolled-компоненты: различия
Принципы валидации и обработки ввода пользователя
Работа со Swagger
Множественные поля ввода, валидация форм и обработка ошибок
Context 📃
Что такое Context в React
Когда и зачем использовать Context
React Context API: управление состоянием
Сквозная передача данных между компонентами
Применение Context совместно с API
Чему вы научитесь
Писать компоненты
Разберетесь, как работает React, и создадите свой первый проект.
Передавать данные и управлять состоянием
Научитесь использовать props, работать с хуки, локальным состоянием и побочными эффектами.
Собирать приложение
из маршрутов и данных
Практически отработаете настройку роутинга и интеграцию API, создадите живое приложение.
Управлять данными
в приложении
Научитесь использовать Context API, передавать данные между компонентами и работать с глобальным состоянием.
Подключать приложение
к серверу
Освоите Fetch API, научитесь обрабатывать ошибки, работать с формами и данными пользователей.
Создавать удобные формы
Научитесь проверять ввод данных, обрабатывать ошибки и показывать подсказки пользователю.
Выносить логику в отдельные функции
Научитесь писать свои хуки и переиспользовать код между компонентами.
Создавать единый стиль проекта
Настроите глобальные темы и будете управлять цветами и шрифтами через CSS-in-JS.
Добавлять контент в HTML
с помощью CSS
Научитесь добавлять надписи, иконки и декоративные детали через стили.
Фрагментировать
и импортировать
Поймете, как разбивать данные на части и переносить их в нужный проект.
Настраивать навигацию
в приложении
Изучите React Router, создадите маршруты и переходы между страницами, научитесь передавать параметры.
Оформлять компоненты
Освоите Styled Components, научитесь задавать глобальные стили и создавать красивый дизайн элементов.
Код для сбора аккардеона ⬇️
10 уроков: от основ до разработки веб-приложений
Понятный материал даже для новичков
Тесты, практические задания и итоговый проект
Вечный доступ к материалам курса
Все нужные навыки по React — в одном месте
Учеба в любое время на удобной платформе
от 19 960 ₽
-75%
от 19 960 ₽
-75%
4990 ₽
Учитесь уже сейчас — по выгодной цене
Оплатить
Стоимость курса
[{"lid":"1734967846264","ls":"10","loff":"","li_parent_id":"","li_type":"hd","li_name":"productPriceUuid","li_value":"15c8fad5-0aef-4ee2-a35a-bc3795ecd325","li_nm":"productPriceUuid"},{"lid":"1741012759069","ls":"20","loff":"","li_parent_id":"","li_type":"hd","li_name":"addSelfPayButton","li_value":"true","li_nm":"addSelfPayButton"},{"lid":"1741012783841","ls":"30","loff":"","li_parent_id":"","li_type":"hd","li_name":"selfPayButton","li_value":"\u041e\u043f\u043b\u0430\u0442\u0438\u0442\u044c","li_nm":"selfPayButton"},{"lid":"1741102948413","ls":"40","loff":"","li_parent_id":"","li_type":"hd","li_name":"streamId","li_value":"2871","li_nm":"streamId"},{"lid":"1741012709227","ls":"50","loff":"","li_parent_id":"","li_type":"nm","li_ph":"\u0418\u043c\u044f","li_name":"name","li_req":"y","li_nm":"name"},{"lid":"1734967846265","ls":"60","loff":"","li_parent_id":"","li_type":"ph","li_ph":"\u0422\u0435\u043b\u0435\u0444\u043e\u043d","li_name":"phone","li_masktype":"a","li_maskcountry":"RU","li_req":"y","li_nm":"phone"},{"lid":"1734967846266","ls":"70","loff":"","li_parent_id":"","li_type":"em","li_ph":"\u042d\u043b. \u043f\u043e\u0447\u0442\u0430","li_name":"email","li_req":"y","li_nm":"email"},{"lid":"1734967846267","ls":"80","loff":"","li_parent_id":"","li_type":"hd","li_name":"productId","li_value":"531","li_nm":"productId"},{"lid":"1734967846268","ls":"90","loff":"","li_parent_id":"","li_type":"hd","li_name":"sourceKey","li_value":"react_hh_co-brand","li_nm":"sourceKey"},{"lid":"1734967846269","ls":"100","loff":"","li_parent_id":"","li_type":"hd","li_name":"courseId","li_value":"30","li_nm":"courseId"},{"lid":"1734967846270","ls":"110","loff":"","li_parent_id":"","li_type":"hd","li_name":"intent","li_value":"consult","li_nm":"intent"},{"lid":"1734967846271","ls":"120","loff":"","li_parent_id":"","li_type":"hd","li_name":"funnel","li_value":"minicourses","li_nm":"funnel"},{"lid":"1734967846272","ls":"130","loff":"","li_parent_id":"","li_type":"hd","li_name":"consult","li_value":"type_consult","li_nm":"consult"},{"lid":"1734967846273","ls":"140","loff":"y","li_parent_id":"","li_type":"hd","li_name":"productPriceUuid","li_value":"61392d43-bfb9-4fd5-a8ed-2553df604b63","li_nm":"productPriceUuid_2"},{"lid":"1734967985458","ls":"150","loff":"","li_parent_id":"","li_type":"cb","li_label":"
\u0414\u0430\u044e \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0435 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435<\/span>
\u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432<\/a>","li_nm":"Checkbox"},{"lid":"1756373847238","ls":"160","loff":"","li_parent_id":"","li_type":"cb","li_label":"
\u0414\u0430\u044e \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 <\/span>
\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445<\/a>","li_req":"y","li_nm":"Checkbox_2"},{"lid":"1735128162758","ls":"170","loff":"","li_parent_id":"","li_type":"hd","li_name":"addLeadToThank","li_value":"true","li_nm":"addLeadToThank"},{"lid":"1735128162676","ls":"180","loff":"y","li_parent_id":"","li_type":"hd","li_name":"thank-you-page","li_value":"https:\/\/sm.sky.pro\/payment\/offer\/61392d43-bfb9-4fd5-a8ed-2553df604b63?streamId=2387","li_nm":"thank-you-page"}]
Заполнить данные и перейти к оформлению
Истории наших студентов
Ответы на вопросы
Я смогу изучать материалы после окончания курса?
Конечно, все материалы курса останутся в вашем личном кабинете навсегда. Вы сможете обращаться к ним, когда захотите освежить знания.
В какое время проходят занятия?
Лекции можно смотреть в любое удобное время.
Получится совмещать с работой?
Да, сможете. Вам понадобится всего 4 часа в неделю для теории и практики. Это комфортный темп для тех, кто работает.