Практическое обучение
Помимо аудиторных занятий, вы будете отрабатывать пройденные темы вместе с преподавателем и наставником.
Создать аккаунт и подать заявку
РАЗРАБОТКА ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ · СРЕДНИЙ УРОВЕНЬ
Front-end (React) разработка
Программа Front-End разработки — это комплексный курс, который научит создавать современные, адаптивные и интерактивные веб-приложения на HTML, CSS, JavaScript и React, включая работу с API и AI-инструментами.
Средний20 недели80 часовОчно
Выбранный курс будет перенесён в Ingress Portal.
ПРЕИМУЩЕСТВА КУРСА
Наставники
Знания и навыки, полученные в академии, будут дополнительно закреплены с помощью системы наставничества.
Академическая справка
Задания и проекты проверяются преподавателем, а ваши знания и навыки оцениваются и фиксируются.
ВАШ УРОВЕНЬ
НачальныйСреднийПродвинутыйЭксперт
ЧТО ВЫ СМОЖЕТЕ ДЕЛАТЬ
Навыки, которыми вы овладеете к концу этого курса.
- По успешному завершению программы участники смогут:
- Создавать адаптивные и доступные веб-страницы с использованием HTML и CSS.
- Создавать современные макеты с помощью Flexbox, Grid и техник адаптивного дизайна.
- Использовать Git и GitHub для контроля версий и совместной работы.
- Разрабатывать интерактивные веб-приложения на JavaScript.
- Работать с API и обрабатывать асинхронные данные с помощью Fetch и Promises.
- Создавать переиспользуемые и масштабируемые пользовательские интерфейсы на React.
- Управлять состоянием приложения с помощью Context API, Redux Toolkit и React Query.
- Оптимизировать производительность приложений и применять лучшие практики front-end разработки.
- Использовать AI-инструменты, такие как ChatGPT и GitHub Copilot, для улучшения рабочих процессов разработки.
- Спроектировать, разработать, развернуть и презентовать полноценный front-end проект.
КРАТКАЯ ПРОГРАММА
Ознакомьтесь со структурой, не читая учебник.
Модули свёрнуты для быстрого просмотра. Откройте любой модуль, чтобы увидеть его темы.
01МОДУЛЬ 1 — HTML, CSS, Git3 урока+
Обзор веба (клиент против сервера)
Что такое DOM? Понимание его роли в отображении веб-страниц
Краткое введение в HTML, CSS, JavaScript и их взаимодействие
02Основы HTML11 уроков+
Семантический HTML (<header>, <footer>, <section>, <article>, <nav>)
Отправка форм и обработка данных
Структура HTML-документа (<!DOCTYPE>, <html>, <head>, <body>)
Понимание элементов форм (<form>, <input>, <textarea>, <select>, <button>)
Таблицы, div и span
Атрибуты валидации форм (например, required, pattern, minlength)
HTML-формы и элементы ввода
Ссылки, изображения и медиа-элементы
Понимание назначения тегов, атрибутов и содержимого
Формы: input, button, select, textarea
Заголовки, абзацы и списки
03Основы CSS21 урок+
Псевдоклассы (:hover, :focus, :nth-child)
Базовые селекторы (элемент, класс, ID)
Медиа-запросы для мобильного дизайна
Использование rem, em и px для размеров шрифта
Техники CSS-верстки
Селекторы CSS
Гибкие макеты и единицы измерения viewport
Адаптивный веб-дизайн
Позиционирование: static, relative, absolute, fixed
Работа со свойствами width и height
Встроенные, внутренние и внешние таблицы стилей
Что такое CSS и как он стилизует HTML
Синтаксис CSS: селекторы, свойства и значения
CSS Grid: контейнеры сетки, элементы сетки, области шаблона сетки
CSS-фреймворки, такие как Bootstrap или Tailwind CSS
Понимание содержимого, отступов, границ и полей
Flexbox: flex-контейнер и элементы, выравнивание и justification
Комбинаторы (потомок, дочерний, соседний)
Псевдоэлементы (::before, ::after)
Блочная модель CSS
Box-sizing (border-box против content-box)
04Основы JavaScript30 уроков+
Изменение содержимого и стилей элементов
Что такое TypeScript?
Стрелочные функции и колбэки
Манипуляция DOM с помощью JavaScript
Циклические конструкции: for, while, forEach
Встраивание JavaScript в HTML: теги <script>, внешние скрипты
Массивы и кортежи
Введение в асинхронное программирование
Функции в JavaScript
Как TypeScript помогает выявлять ошибки на раннем этапе
Определение функций с помощью объявлений и выражений функций
JSON: понимание формата данных JSON и его парсинг
Массивы и объекты
Параметры функций и возвращаемые значения
Управление потоком выполнения и циклы
Promises и async/await
Настройка
Массивы: создание, доступ, изменение и перебор
Синтаксис JavaScript: переменные, типы данных, операторы
Добавление обработчиков событий (click, change, submit)
Условные операторы: if, else, switch
Что такое JavaScript и его роль в веб-разработке
Выбор и изменение элементов DOM (getElementById, querySelector)
Аннотации типов (number, string, boolean, any)
Union и intersection типы
Использование setTimeout, setInterval
Асинхронный JavaScript
Вывод типов
Преимущества использования TypeScript перед JavaScript
Объекты: создание и использование объектов, пары ключ-значение
05Введение в React15 уроков+
Условный рендеринг в JSX
Синтаксис JSX
Встраивание выражений внутри JSX
Обзор структуры проекта (public против src)
Настройка среды разработки React
Почему React? Преимущества и польза для современной веб-разработки
Синтаксис JSX
Синтаксис JSX
Что такое JSX и как он работает
Синтаксис JSX
Понимание React и его компонентной архитектуры
Синтаксис JSX
Синтаксис JSX
Что такое React?
Возврат нескольких элементов из компонента
06Основы React12 уроков+
Использование хука useState для управления состоянием в функциональных компонентах
Функциональные компоненты против классовых компонентов
Привязка событий в React
Использование this в классовых компонентах и функциональных компонентах с хуками
Props и State в React
Передача данных компонентам с помощью props
Понимание функции render и операторов return
Обработка событий в React
Компоненты React
Обработка пользовательских событий: onClick, onChange, onSubmit
Изменение состояния в зависимости от действий пользователя (нажатия кнопок, ввод в форму)
Понимание props: передача данных от родительского компонента к дочернему
07Продвинутые концепции React17 уроков+
Динамическая и вложенная маршрутизация
Введение в React Router
useRef для доступа к элементам DOM
useReducer для более сложной логики состояния
Жизненный цикл компонента (классовые компоненты)
Создание и использование контекста в React
Настройка маршрутов с помощью BrowserRouter, Route и Switch
Хуки React
Использование useContext для доступа к данным контекста
Маршрутизация в React
Хук useEffect для побочных эффектов (например, получение данных, подписки)
useMemo и useCallback для оптимизации производительности
Context API
Понимание методов жизненного цикла компонента: componentDidMount, componentDidUpdate, componentWillUnmount
Навигация с помощью Link, NavLink и useNavigate
Продвинутые концепции React
Введение в Context API для глобального управления состоянием
08Работа с API и получение данных8 уроков+
Отображение данных из API с помощью useState и useEffect
Использование async/await для асинхронных вызовов
Использование fetch и axios для выполнения запросов к API
Обработка состояний загрузки, успеха и ошибки
Получение данных в React
Асинхронный JavaScript в React
Управление состоянием с асинхронными действиями
Обработка ответов API и ошибок в компонентах React
09Стилизация в React10 уроков+
Создание стилизованных компонентов в React
Введение в styled-components и их преимущества
CSS-in-JS со Styled Components
Использование CSS-модулей для локальных стилей компонентов
Адаптивный дизайн в React
Мобильный дизайн с использованием React и CSS-фреймворков (например, Bootstrap, Tailwind)
Медиа-запросы внутри компонентов React
Тематическая стилизация с помощью styled-components
CSS-модули и изолированный CSS
Управление конфликтами CSS с помощью изолированных стилей
10Управление состоянием с Redux12 уроков+
Настройка store с помощью Redux Toolkit
Создание слайсов и редьюсеров
Введение в Redux Toolkit для упрощенной логики Redux
Почему Redux? Глобальное управление состоянием
Redux Toolkit
Redux Thunk для асинхронных действий
Продвинутые паттерны Redux
Настройка Redux с React
Введение в Redux
Redux DevTools для отладки изменений состояния
Интеграция Redux с компонентами React с помощью useDispatch и useSelector
Основные концепции: Store, Actions, Reducers
11React Query15 уроков+
Настройка QueryClient и QueryClientProvider
Автоматическое повторное получение данных с фоновыми обновлениями
Установка и настройка
Получение данных с помощью useQuery
Мутации React Query, инвалидация запросов
Обработка состояний загрузки и ошибок
Обработка колбэков успеха и ошибки
Ручная инвалидация запросов
Введение в useMutation
Преимущества использования React Query (кэширование, автоматические обновления и т.д.)
Обзор React Query
Добавление, обновление и удаление данных
Что такое React Query?
Сравнение с традиционными подходами к управлению состоянием
Инвалидация и повторное получение запросов
12Оптимизация производительности в React7 уроков+
Использование React.memo для предотвращения ненужных повторных рендеров
Оптимизация вызовов API
Мемоизация функций с помощью useCallback и useMemo
Ленивая загрузка данных и реализация пагинации
Разделение кода и ленивая загрузка с React.lazy и Suspense
Debouncing пользовательского ввода
Оптимизация компонентов React
13Git, развертывание приложений React11 уроков+
Понимание production-сборки и оптимизация ресурсов
Развертывание на Vercel, Netlify или GitHub Pages
Введение в Git
Что такое Git и почему он важен?
Разница между Git и другими системами контроля версий
Непрерывная интеграция и непрерывное развертывание (CI/CD) с GitHub Actions
Основы рабочего процесса Git (рабочая директория, область подготовки, репозиторий)
Запуск npm run build для production-готовых React-приложений
Установка Git на разных операционных системах
Понимание файлов .gitignore
Развертывание на хостинговых платформах
14Полный проект — Создание приложения на React11 уроков+
Планирование и проектирование
Написание тестов для вашего приложения
Реализация управления состоянием (локальное состояние, Context или Redux)
Создание приложения
Финальное тестирование и развертывание
Интеграция сторонних API
Выбор проекта (например, интернет-магазин, панель управления соцсетью)
Развертывание вашего приложения в production
Стилизация приложения с помощью CSS, CSS-модулей или styled-components
Оптимизация производительности и обеспечение адаптивности
Проектирование компонентов и структуры приложения
БЛИЖАЙШИЕ ГРУППЫ
Выберите группу, которую вы действительно сможете посещать.
Показаны только текущие открытые группы.
Часы занятий
80 часов
Очно- Расписание
- Будет объявлено
- Формат
- Очно
- Длительность
- 20 недели · 80 часов
- Язык
- Уточните у консультанта
“Программа помогла мне связать отдельные навыки с тем, как реальные команды проектируют, создают и поставляют ПО.”
Смотрите реальные истории выпускников из сообщества Ingress.
Изучить результаты выпускниковЗАЯВКА ЧЕРЕЗ INGRESS PORTAL
Выбранный курс сохраняется, пока вы создаёте аккаунт.
Мы используем один аккаунт Portal для заявок, оценок и будущего прогресса обучения. Вам не нужно отправлять данные по почте или снова выбирать курс.
Сначала вопросы? Поговорите с консультантом- 01
Создайте аккаунт Portal или войдитеВаши контактные данные привязаны к одному профилю студента.
- 02
Подтвердите данные заявкиFront-end (React) разработка уже выбран.
- 03
Отправьте заявкуПриёмная команда получает её сразу и может связаться с вами через Portal.
ВЫБРАННЫЙ КУРСFront-end (React) разработкаОчно
Продолжить в Ingress Portal Уже зарегистрированы? Portal позволит вам войти.