Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

React + TypeScript курс с нуля. Приложение. Веб разработка

Name: React + TypeScript курс с нуля. Приложение. Веб разработка
Rating: 4.8 (73 reviews)

Легко напишите мощное веб-приложение на React + Typescript, получите востребованные навыки и сделаете классное портфолио

Bestseller

Highest Rated

Created byDzmitry Kalatsilshchykau

Last updated 3/2026

Russian

What you'll learn

Создадите полноценное многофункциональное веб-приложение с классным дизайном.
Изучите всю необходимую базу на старте
Изучите хуки React и напишите свои пользовательские хуки
Научить оптимизировать приложение на React и дебажить перерисовки
Плюс ко всему пройдете полноценный курс по TypeScript
Освоите современные методы и подходы к разработки веб-приложений
Узнаете что такое роутинг и поработаете с библиотекой для управления маршрутами — React Router Dom
Создадите полноценный single page application (SPA)
Реализуете два цветовых режима DARK Mode и LIGHT Mode учитывая предпочтения пользователя
Научитесь работать с формами использую современные подходы
Примените на практике CRUD операции
Реализуете фильтрацию, пагинацию и сортировку в приложении на React
Создадите mobile-friendly дизайн приложения
Сделаете ленивую загрузку (lazy loading) некоторые частей приложения и проанализируете бандл
Создадите защищенные маршруты (страницы) для незалогиненных пользователей

Course content

15 sections • 156 lectures • 15h 14m total length

Промо о курсе "React курс с нуля. Полноценное приложение"1:53
О курсе React курс с нуля. Полноценное Приложение. Веб разработка
Что изучите в курсе3:45
В данном уроке делаю структурированный обзор того, что изучим в процессе прохождения курса
Демо Приложения11:30
Обзор полноценного приложения на React, всей функциональности приложения, которое напишем в процессе курса
В чем фишка React?2:27
В уроке рассказываю для чего нужен реакт, зачем его использовать и в чем его преимущества
Подготовка проекта, установка необходимых инструментов8:09
В данном уроке подготавливаем необходимые инструменты для разработки приложения
Структура проекта, package.json, ESLint, JSX7:46
В уроке изучаем структура проекта которую развернулся нам vite, знакомимся с package json, ESLint и jsx
Установка зависимостей, запуск приложения, react dev tools3:20
В уроке устанавливаем необходимые зависимости (node modules) в проект, которые прописаны в package.json. Далее запускаем приложение и устанавливаем полезное расширение для google chrome React Developer Tools
HMR (Hot Module Replacement)0:45
В уроке узнаем что такое Hot Module Replacement и посмотрим на примере
Базовый тест для закрепления понятий

Входная точка в приложение, первый компонент6:16
В уроке узнаем с чего начинается любое React приложение, где его входная дверь (точка), коснемся глобальных стилей и создадим первый (кирпичик) компонент
VSCode сниппеты3:15
В уроке изучим понятие сниппеты, создадим сниппеты под себя и ускорим разработку
Стили - className и inline styles2:48
В уроке применяем стили через специальный атрибут React className (вместо class в обычном HTML) и также применяем инлайновые стили через атрибут style
ESLint - настройка, правила, расширение3:56
В уроке настраиваем ESLint, чтобы VSCode в каждом файле мог сразу подчеркивать код согласно правилам. Настроим правило и установим расширение, также научимся смотреть логи ESLint в среде для разработки
Стили - CSS Модули (CSS Modules)4:37
В данном уроке познакомимся с технологией CSS Modules (CSS Модули). Узнаем про локализацию стилей для каждого компонента, как в React предусматривается избежание конфликтов стилей и также сможем применять стиль в зависимости от условия
CSS Модули, класс модификатор, логирование css модуля2:18
В данном уроке логируем CSS модуль, изучим еще один способ для применения классов в зависимости от условий
React props, интерполяция8:44
В уроке изучаем properties (props) у компонента и также изучим интерполяцию
Деструктуризация props1:26
В уроке научимся красиво декомпозировать (деструктурировать) пропсы
Хуки, useState - изменения состояния в React4:56
В данном уроке узнаем как React работает с состоянием. Узнаем что такое хуки и будем использовать первый хук useState
Перерисовки (ререндеры), Строгий режим (Strict Mode), Синхронный useState6:30
Важный и фундаментальный урок в котором показываю как происходят перерисовки в React, как дебажить перерисовки, также узнаем что такое строгий режим (Strict Mode) и в чем его роль, и научимся обновлять состояние (useState) синхронно.
Virtual DOM, как работают перерисовки (ререндер)1:43
Теоретический урок, где концептуально и верхнеуровнево поймем как работает обновление состояния в React
Списки в React, keys9:36
В уроке узнаем как отрисовывать на странице сразу много элементов (списки) и зачем к спискам нужны ключи
Подготовка к приложению, настройка Prettier8:30
В уроке узнаем что такое Prettier и зачем он нужен, также установим и настроем плагин prettier для ESLint. Создадим ветку dev и будем готовы к написанию полноценного приложения

Global CSS, переменные для темы6:57
В уроке настроим глобальные стили для всего приложения. Также подготовим базу для работы с темой и создадим необходимые переменные
Main Layout, разметка для всего приложения11:54
В уроке настроим общую разметку (Main Layout) для всего приложения (всех страниц)
Роутинг (routing). Настройка маршрутов (страниц)7:31
В уроке установим дополнительную библиотеку react-router-dom для роутинга (маршрутизации) в приложении и настроим провайдер для приложения
Header приложения9:53
В уроке создадим переиспользуемый Header для всего приложения и встроим его в MainLayout
Button (компонент кнопки)9:55
В уроке создаем самый переиспользуемый компонент, а именно компонент кнопки (Button)
HomePage, useNavigate, QuestionCard компонент15:46
В Уроке задекларируем HomePage в роутинге, сделаем первую навигацию по клику с помощью хука useNavigate и нарисуем QuestionCard компонент
React Fragment, Локальная БД, Card props, динамический роут10:00
В уроке создадим локальную базу данных, добавим пропсы для компонента карточки (QuestionCard), узнаем про фрагменты в React и задекларируем динамический роут
Not Found Page3:09
В уроке создадим страницу Not Found и пропишем логику, чтобы данная страница отображалась на любые несуществующие маршруты

JSON Server3:57
В уроке поднимем локальный сервер. Для этих целей будем использовать простую библиотеку JSON Server
Получение данных с сервера5:19
В уроке пишем асинхронную функцию для получения данных с сервера
Бесконечные перерисовки (ре-рендеры)2:52
В уроке показываю, как можно легко заставить React делать бесконечные перерисовки (ре-рендеры) и почему так происходит.
хук useEffect, жизненный цикл компонента6:42
В уроке изучим один из самых важных хуков - useEffect. Узнаем про жизненный цикл компонента
QuestionCardList, компонент для отрисовки всех карточек4:53
В уроке имплементируем компонент QuestionCardList, в котором реализуем отрисовку всех карточек с вопросами
Loader (спиннер) компонент5:04
В уроке создаем периспользуемый компонент Loader или его еще называют спиннер, чтобы он был как индикатор загрузки данных
DelayFn - функция задержки запроса4:23
В уроке создаем delayFn - функцию для искусственной задержки запросов
Кастомный хук useFetch7:17
В уроке создаем пользовательский (кастомный) хук useFetch и получаем данные с сервера
Clean code, подчищаем код0:37
В уроке делаем clean code, подчищаем за собой
Неуправляемый input, useRef4:43
В уроке узнаем про концепцию неуправляемого инпута в React и познакомимся с хуком useRef
Управляемый input, useState3:48
В уроке имплементируем управляемый инпут (input) с помощью хука useState

React Memo (мемоизация)4:56
В уроке узнаем про мемоизацию, как предотвратить лишние перерисовки (ре-рендеры) и про функцию memo в React
Информация о React Compiler1:07
В уроке кратко рассказываю про будущие возможности React Complier
SearchInput, icons (спрайты), useId8:59
В уроке начнем реализовывать компонент SearchInput, возьмем иконку с официального сайта доки по React и сделать файл с иконками (спрайтами) и используем хук useId, чтобы связать label и input элементы
Обновление VSCode, как вернуть отображение кода у SVG2:49
В уроке показываю как вернуть отображение кода у SVG файлов после обновления VSCode в январе 2025
SearchInput стилизация4:06
В уроке реализуем стили для SearchInput компонента
Badge Component8:51
В уроке создадим Badge компонент, который будет использоваться в каждой карточке с вопросами и применять классы в зависимости от состояний
Логика фильтрации, useMemo9:08
В уроке реализуем логику фильтрации карточек с помощью метода filter, подебажим перерисовки и применим хук useMemo
Подчищаем код, добавляем стили для no cards1:21
В уроке удаляем код который нужен был для тестов и добавляем стили для красивого отображения no cards
Sort Select, контрол для сортировки4:18
В уроке создаем селект для сортировки карточек и стилизуем его
Sort Select, Логика сортировки7:38
В уроке разберем API у JSON Server для сортировки карточек и напишем соответствующую логику

Пагинация - логика8:18
В уроке реализуем логику пагинации (навигации по страницам). Для этого будем использовать состояние в React и JSON Server
Пагинация - динамические кнопки5:24
В уроке реализуем логику динамической отрисовки нужного количество кнопок для пагинации
Фикс отображения кнопок для пагинации при фильтрации0:56
В уроке улучшим UX (user experience) изменив немного логику для отрисовки кнопкок пагинации
Добавляем событие на кнопки для пагинации (Event delegation)2:48
В уроке добавим событие на все кнопки для пагинации применив паттерн делегирования событий
Активный номер страницы для пагинации4:17
В уроке реализуем логику для того, чтобы активный номер страницы был выделен другим цветом.
Авто скролл при переключении страниц2:34
В уроке реализуем логику, чтобы при переключении страниц срабатывал автоматический скролл до верха страницы
Ревьюваем что уже сделали, рефлексируем1:50
В уроке получаем наслаждение от уже проделанной работы, чувствуем этот момент и смотрим что будем реализовывать дальше
Count Select, контрол для изменения количества карточек на странице5:26
В уроке создаем Count Select для того чтобы иметь возможность изменять количество карточек для отрисовки на одной странице
Фикс отображение одной кнопки для пагинации2:27
В уроке делаем маленький фикс, для того чтобы, если у нас только одна страница, то кнопка для пагинации не отображалась

Question Page - интро1:14
В уроке смотрим на страницу которую будем реализовывать (QuestionPage)
Question Page - базовый layout3:17
В уроке подготавливаем всю базу для реализации страницы QuestionPage
Question Page - разметка18:54
В уроке пишем всю разметку для Question Page, прорабатываем много мелочей
Question Page - цвет кнопок, проверка card на null4:23
В уроке меняем цвет всех кнопок для двух цветовых тем, также реализовываем проверка card на null и правильную отрисовку компонента без ошибок
Question Page - получение данных карточки с сервера, useParams хук5:43
В уроке реализуем логику получения данных карточки с сервера и познакомимся с хуком useParams
Question Page - состояние isCompleted6:00
В уроке напишем логику включающую работу с сервером и отрисовку на UI, чтобы изменять состояние completed
Question Page - small loader при изменении isCompleted3:44
В уроке добавим в приложение еще один лоадер и интегрируем его в Question Page
Тосты (toasts) для красивых уведомлений4:50
В уроке установим дополнительную библиотеку с тостами для красивых уведомлений

Add Question Page - подготовка к реализации2:27
В уроке подготавливаем компонент для реализации Add Question Page
Add Question Page - Разметка, форма13:43
В уроке реализуем форму в рамках Add Question Page
Add Question Page - Стилизация6:16
В уроке добавляем стили для страницы Add Question Page
Add Question Page - хук useActionState6:00
В уроке подключаем в форму и разбираем хук useActionState
Add Question Page - createCardAction для useActionState3:30
В уроке пишем логику для функции createCardAction которую передаем в хук useActionState
Add Question Page - createCardAction логика, создание вопроса10:55
В уроке пишем логику для POST запроса, что создать полноценную карточку с вопросом и добавить ее в бд
Add Question Page - Обработка ошибок при создании вопроса3:00
В уроке реализовываем обработку ошибок при создании нового вопроса в Add Question Page
Add Question Page - Loader на странице2:11
В уроке добавить лоадер (loader) на страницу при запросе на бэк
Add Question Page - lazy (ленивая загрузка)12:36
В уроке изучем React lazy и сделаем ленивую загрузку компонента Add Question Page

Question Form - компонент с формой8:41
В уроке выносим форму из Add Question Page в отдельный самостоятельный компонент, чтобы дальше переиспользовать еще и в Edit Question Page
Edit Question Page - получения данных вопроса6:24
В уроке создадим Edit Question Page, добавить ее в роутинг и пропишем логику получения вопроса
Edit Question Page - логика заполнения формы5:15
В уроке реализуем логику заполнения формы данными в Edit Question Page
Edit Question Page - editCardAction, dateFormat helper7:56
В уроке реализовываем логику editCardAction который прокидывается в useActionState и напишем функцию-хелпер dateFormat для красивого форматирования дат
Edit Question Page - Delete button2:37
В уроке напишем разметку для кнопки удаления вопроса
Edit Question Page - Delete button логика5:04
В уроке пишем логику удаления вопроса

Login - intro0:48
React Context1:47
В уроке изучим концептуально что такое React Context
Auth Provider, isAuth. Логика состояния логина пользователя8:07
isAuth для кнопок, сохранение состояния в localStorage5:36
В уроке добавим состояние isAuth к некоторым кнопкам и также будем хранить его в localStorage
Защищенные страницы (Protected Routes)4:53
В уроке реализовываем логику защищенных станиц (protected routes), чтобы только пользователи, которые залогинелись могли ходить на определенные страницы
Редиректы на страницы с которых перешли на Forbidden Page8:10
В уроке пишем логику редиректов на страницы с которых попали на Forbidden page
EditQuestionPage - Lazy (ленивая загрузка)4:39
В уроке реализуем логику ленивой загрузки Edit Question Page

Requirements

Для курса желательны базовые знания: HTML , CSS, JavaScript

Description

Добро пожаловать!

Это курс по React и TypeScript, популярной библиотеке для написания пользовательских интерфейсов. С помощью данной библиотеки писать приложение превращается в приятное и увлекательное путешествие.

В курсе вас ждет:

• Весь нативный React — от самой базы до продвинутых концепций, с нуля и шаг за шагом вместе с преподавателем.

• Написание полноценного крутого рабочего приложения с классным дизайном, которое смело можно положить в портфолио. Также в процессе написания данного приложения вы в легкой форме сможете закрепить инструменты React.

• Изучение ключевых библиотек экосистемы React, включая актуальный синтаксис и современные стандарты разработки.

• Более 150 видеоуроков, раскрывающих все нюансы создания веб-приложений на React.

• БАЗА (Vite, ESLint, JSX, props, keys, CSS modules, Virtual DOM, strict mode, компоненты, условный рендеринг)

• Хуки - useState, useRef, useEffect, useLayoutEffect …
• React Context (useContext)

• Роутинг (React Router Dom), useParams, useLocation

• Мемоизация (useMemo, memo)

• Отправка форм (useActionState)

• Кастомные хуки (useFetch, useAuth, useTheme)

• Dark mode & Light Mode (цветовые темы) | Pro

• Базовый логин/логаут (аутентификации)

• Приватные (защищенные) маршруты (private routes)

• CRUD операции (GET, POST, PATCH, DELETE)

• Ленивая загрузка (lazy loading)
• Фильтрация, Пагинация, Сортировка

• Мобильная адаптация (mobile friendly)

• Полный курс по TypeScript

• Интеграция TypeScript в написанное приложение. Типизация всего приложения

Современный формат обучения. Также всю необходимую базу по HTML, CSS, препроцессорам SCSS, CSS Flexbox, CSS Grid, Accessibility, БЭМ, GIT, Parcel, SEO, верстке макетов, JavaScript, ООП, написанию приложений на чистом JS можно получить у меня в прекрасных и структурированных уроках на популярном всем хостинге.

Who this course is for:

веб разработчики
Frontend разработчики
Backend разработчики

React + TypeScript курс с нуля. Приложение. Веб разработка

What you'll learn

Explore related topics

Course content

Старт8 lectures • 40min

Базовый React13 lectures • 1hr 5min

MainLayout, Роутинг, Header, Button, QuestionCard, Fragment, NotFound8 lectures • 1hr 15min

JSON Server, useEffect, Loader, кастомный хук useFetch, Инпуты11 lectures • 50min

Memo, useMemo, иконки, SearchInput, SortSelect, логика сортировки10 lectures • 53min

Пагинация, автоматический скролл, Count Select9 lectures • 34min

Question page, useParams, small loader, toasts8 lectures • 48min

Add Question Page, useActionState, Lazy component9 lectures • 1hr 1min

Edit Question Page & Remove Question logic6 lectures • 36min

Login, React Context, Protected Routes7 lectures • 34min

Requirements

Description

Who this course is for: