Содержание курса
Асинхронный 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 и динамический интерактив.
↗