Курс на Stepik
Обложка курса «Frontend Разработчик: React + Продвинутый JavaScript» на Stepik
Бесплатно

Frontend Разработчик: React + Продвинутый JavaScript ★ 0.000

Открыть на
STEPIK.ORG

Комплексный практический интенсив для перехода на уровень Junior Frontend Developer. Курс решает главную проблему новичков — мостик между чистой теорией и реальной разработкой. Вы закроете пробелы в продвинутом JavaScript (асинхронность, API, сетевые запросы) и с абсолютного нуля освоите библиотеку React. Никакой воды: 17 часов видеоматериалов, интерактивные задания и создание масштабного SPA-приложения для вашего портфолио, которое не стыдно показать на собеседовании. Начните писать чистый код!

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Frontend Разработчик: React + Продвинутый JavaScript»Учеников на курсе 187
Сертификаты, выданные на курсе «Frontend Разработчик: React + Продвинутый JavaScript»Сертификатов выдано 0
Отзывы о курсе «Frontend Разработчик: React + Продвинутый JavaScript»Отзывов получено 0
Рейтинг курса «Frontend Разработчик: React + Продвинутый JavaScript»Рейтинг курса 0.000
Уроки в курсе «Frontend Разработчик: React + Продвинутый JavaScript»Количество уроков 113
Тесты в курсе «Frontend Разработчик: React + Продвинутый JavaScript»Количество квизов 11
Время прохождения курса «Frontend Разработчик: React + Продвинутый JavaScript»Время прохождения курса —
Обновления курса «Frontend Разработчик: React + Продвинутый JavaScript»Обновления курса — —
Дата публикации курса «Frontend Разработчик: React + Продвинутый JavaScript»Дата публикации курса — ———
Последнее обновление курса «Frontend Разработчик: React + Продвинутый JavaScript»Последнее обновление — ———
Сложность easy — ———

Содержание курса

Разделы в курсе «Frontend Разработчик: React + Продвинутый JavaScript» 11 разделов Уроки в курсе «Frontend Разработчик: React + Продвинутый JavaScript» 113 уроков Тесты в курсе «Frontend Разработчик: React + Продвинутый JavaScript» 11 тестов Время прохождения курса «Frontend Разработчик: React + Продвинутый JavaScript» 14 ч. Последнее обновление курса «Frontend Разработчик: React + Продвинутый JavaScript» обн. 5 ноября 2026

Асинхронный JavaScript: Promises, JSON и Async/Await

10 уроков
1. Цикл Запрос-Ответ и проблема Race Condition (Гонка условий) ↗
2. Что такое Promise на самом деле? Три состояния и синтаксис New P ↗
3. Создание собственных Promises: Resolve, Reject. ↗
4. Старый подход на колбэках и проблема Callback Hell (Пирамида ужа ↗
5. Первое знакомство с методом .then() и обработка результатов пром ↗
6. Цепочки Промисов (Chaining) и рефакторинг асинхронного кода. ↗
7. Обработка ошибок в промисах: методы .catch() и .finally() ↗
8. Что такое формат JSON и главные методы: stringify и parse. ↗
9. Подводные камни JSON: Ошибки парсинга и форматирование данных. ↗
10. Оптимизация загрузки скриптов: Блокировка DOM, атрибуты Defer и ↗

Продвинутый асинхронный JS: Async/Await и Живая практика

10 уроков
1. Область видимости в JavaScript: Глобальный и Локальный Scope. ↗
2. Проблема областей видимости в цепочках .then() и ловушка вложенн ↗
3. Синтаксический сахар: Пишем асинхронный код как синхронный с Asy ↗
4. Практика Async/Await: Получаем данные и ломаем приложение. ↗
5. Обработка ошибок в Async/Await: Конструкция Try/Catch и Stack Tr ↗
6. Ловушки Scope в Try/Catch и проблема нескольких асинхронных запр ↗
7. Async/Await и Try/Catch на практике: Как не сломать код в реальн ↗
8. Как устроен Web? Вся правда про Fetch API, Сетевые запросы и Ста ↗
9. В чем разница между GET и POST запросами? Разбор Payload и скрыт ↗
10. Первая практика с API: Подключаем JSON Placeholder и разбираем T ↗

Продвинутый JavaScript | DOM-манипуляции, CORS и Web Storage API

11 уроков
1. Динамический вывод данных: Связываем Fetch API с DOM через forEa ↗
2. Отправка данных на сервер: addEventListener, Input.value и подго ↗
3. Пишем первый POST-запрос: Конфигурация Fetch, JSON.stringify() и ↗
4. Динамический рендеринг POST-запроса: В чем разница между append ↗
5. Что такое CORS? Главный вопрос на собеседовании. ↗
6. Где хранить данные в браузере? Web Storage API, LocalStorage.... ↗
7. Практика sessionStorage: Синтаксис setItem, лимиты памяти и ... ↗
8. Практика LocalStorage: Главные отличия, реальные юзкейсы и ... ↗
9. Псевдокод? Практика автоматического сохранения инпутов... ↗
10. Автосохранение форм на чистом JS: Рефакторинг кода ... ↗
11. Зачем нам React? Разбор концепции SPA. ↗

Фундамент React— среда, инструменты, первый рендер.

10 уроков
1. Что произойдёт, если создать React без понимания процесса? ↗
2. Управление зависимостями: NPM, Node_Modules и работа с .gitignor ↗
3. Точка входа в приложение: Механика работы Webpack и метод Render ↗
4. Синтаксис JSX и философия стандартов. ↗
5. Корневой компонент App и механизм динамической сборки проекта. ↗
6. Правильный синтаксис компонентов и путь Junior-разработчика чере ↗
7. Особенности JSX: Правило родительского элемента и вставка... ↗
8. Рендеринг списков: использование метода Map и ... ↗
9. Работа с ресурсами: Подключение стилей, хранение изображений... ↗
10. Подготовка к поиску работы: GitHub, LinkedIn... ↗

Props и композиция.

8 уроков
1. Философия компонентов: когда и зачем разделять интерфейс. ↗
2. Повторение — мать учения! Создаем структуру папок Components. ↗
3. React Props: Как передавать данные между компонентами? ↗
4. Продвинутые Props: Динамические классы и условное отображение ↗
5. Оптимизация кода: Деструктуризация пропсов и психология работы с ↗
6. Функции и флаги в Props: Как заставить компоненты «действовать»? ↗
7. React Children: Как превратить компонент в универсальный контейн ↗
8. Всё, что нужно знать о Props и компонентах за 10 минут. ↗

State и обработка событий.

8 уроков
1. Практическая сборка: Настройка App.jsx и работа над ошибками... ↗
2. Сложная композиция: Работа с вложенными компонентами и Expander. ↗
3. Введение в Состояние (State) и синтаксис хука useState. ↗
4. Практическое применение useState и инициализация состояния. ↗
5. Обработка событий onClick и создание логики переключения (Toggle ↗
6. Инструментарий: React DevTools и полезные расширения для работы. ↗
7. Закрепление State: Создание счетчика и работа с объектом Event. ↗
8. Подготовка к работе со списками: Массивы и концепция мессенджера ↗

useEffect — жизненный цикл компонента.

15 уроков
1. Жизненный цикл функциональных компонентов и введение в useEffect ↗
2. Эффективная работа: Клонирование проектов через терминал (команд ↗
3. Подготовка проекта: Структура, CounterButton и рефакторинг обраб ↗
4. Область видимости компонента и типичные ошибки при логировании. ↗
5. Практика useEffect: Первое монтирование и условный рендеринг. ↗
6. Глубокое понимание логического оператора && (Short-circuit evalu ↗
7. Расширение логики обработчиков: Фигурные скобки и сброс состояни ↗
8. Глубокое погружение в массив зависимостей (Dependencies Array). ↗
9. Стадия Unmount: Использование функции очистки (Cleanup) в useEff ↗
10. Практика размонтирования: Обнуление состояния и множественные Cl ↗
11. Баланс синтаксиса: Читаемость кода против краткости в useEffect. ↗
12. Практика Cleanup: Таймеры, интервалы и утечек памяти. ↗
13. Почему важна очистка? Разбор «невидимых» ошибок и ... ↗
14. Практика: Загрузка списка пользователей через Fetch API и вывод ↗
15. Опасности бесконечных ререндеров и сетевая гигиена в React. ↗

Хуки, репозитории и продвинутая практика.

18 уроков
1. Теория хуков и структура приложения: Понимание иерархии ... ↗
2. Инструментарий: Эффективная работа с файловой системой. ↗
3. Пагинация в React: Планирование и логика переключения страниц. ↗
4. Клонируем проект с GitHub и фиксим ошибки. ↗
5. Продвинутый поиск багов и секреты кода (Пасхальные яйца). ↗
6. Технический долг и миграция на React 18. ↗
7. Интеграция GitHub API: Fetch-запрос и сохранение в State. ↗
8. Хук useEffect: Жизненный цикл компонента и ... ↗
9. Жизненный цикл компонента: useEffect и логика рендеринга данных. ↗
10. Отрисовка списков: метод map и создание дочерних компонентов. ↗
11. Передача и извлечение Props. Защита компонента от ошибок рендери ↗
12. Асинхронная природа обновления состояния в React и особенности. ↗
13. Знакомство с оператором Optional Chaining (?.) ↗
14. Уникальные ключи (key) при рендеринге списков. ↗
15. Динамическая пагинация: привязка состояния к массиву зависимосте ↗
16. Реализация кнопки Prev: столкновение запросов и разбор ошб. 403 ↗
17. Обработка состояния загрузки и защита от повторных запросов. ↗
18. Условный рендеринг состояния загрузки внутри JSX. ↗

Экосистема React под капотом: Сборка проектов.

6 уроков
1. Анатомия package.json: ручная инициализация проекта. ↗
2. Имитация работы с формами: управление несколькими стейтами. ↗
3. Оптимизация форм: создание универсального обработчика и ... ↗
4. Теоретический разбор: вычисляемые свойства объектов и метафора S ↗
5. useRef: неконтролируемые поля ввода (Uncontrolled Inputs). ↗
6. useRef: сохранение данных и счётчики без перезапуска рендеринга. ↗

Архитектура и разработка реального проекта To-Do List PRO с нуля

12 уроков
1. To-Do List PRO с нуля, подготовка к собеседованиям... ↗
2. Подключение: ошибки и настройка React Developer Tools ↗
3. Передача данных из дочернего компонента в родительский. ↗
4. To-Do List: безопасное обновление массивов в стейте и рендеринг ↗
5. Модификация ToDo: удаление элементов по клику и глубокий разбор ↗
6. Безопасное удаление элементов по их уникальному индексу. ↗
7. Получение данных через fetch() и управление жизненным циклом. ↗
8. Подъем состояния (Lifting State) и проблема Props Drilling. ↗
9. Что такое Destructuring в JavaScript, как читать пропсы и ... ↗
10. Очистка поля ввода (Input UX) и управление состоянием языка ↗
11. Реализация мультиязычности (Локализации) через объект. ↗
12. Сохранение языка в LocalStorage, хук useEffect и защита от ошб. ↗

Styling

4 урока
1. Переход на Vite, основы CDN и классическое подключение Bootstrap ↗
2. Подключение Bootstrap через React - зависимости, компоненты, NPM ↗
3. Bootstrap компоненты в React — кнопки, карточки... ↗
4. Инлайн-стили (Inline Styles) в React и динамический интерактив. ↗