[Stepik] React - Полное руководство 2023 (Илья Фофанов)

[Я СЕРГО]

Ссылка на картинку

[Stepik] React - Полное руководство 2023 (Илья Фофанов)
Данный курс предназначен для тех, кто много слышал о библиотеке React, но при этом ни разу полноценно не пробовал поработать с ней. Обучение построено вокруг небольшого учебного проекта, который вы начнете разрабатывать практически с первых лекций. Таким образом, по мере разработки вы будете гармонично подходить к каждой следующей теме, изучая ее применительно к тому, над чем работаете. Это позволит избежать набора не сильно связанных между собой тем, которые разобраны на изолированных друг от друга примерах.
Вы изучите все основные современные технологии библиотеки React, а также две крупные библиотеки, без которых современная react-разработка почти не встречается: React Router и Redux Toolkit. Курс даётся сразу с точки зрения функциональных компонентов, но при этом есть лекции с разбором компонентов на основе классов. Для комфортного прохождения курса вам необходимы базовые знания HTML + CSS + JS. Последнему в курсе посвящены несколько лекций - тем темам JS, без понимания которых вам будет сложнее разобраться в React.
По окончании данного курса вы сможете:

• реализовывать пользовательские интерфейсы на React
• правильно логически разделять приложение на компоненты
• научитесь связывать компоненты между собой, как используя технологию props, так и с помощью глобального стейта, применяя встроенные возможности React, такие, как useContext, или стейтменеджер Redux Toolkit
• освоите создание маршрутизации в приложении
• научитесь работать с параметрами запроса и даже делать динамический контент в рамках участка страницы в зависимости от текущего URL адреса.

Помимо фундаментальных тем, на курсе разбираются

более широкие аспекты разработки: виды стилизации компонентов, более продвинутые хуки и работа React “под капотом”. Для удобства прохождения курс разбит на 50 основных лекций, которые посвящены самой библиотеке React + дополнительные лекции по нативному языку JavaScript, которые помогут вам лучше понять основной материал.
Для кого этот курс

• Для новичков, желающих в краткие сроки "въехать" в разработку с помощью React JS

Начальные требования

• Желательно иметь хорошие представления об HTML+CSS+JS

Чему вы научитесь

• реализовывать пользовательские интерфейсы на React
• правильно логически разделять приложение на компоненты
• научитесь связывать компоненты между собой, как используя технологию props, так и с помощью глобального стейта, применяя встроенные возможности React, такие, как useContext, или стейтменеджер Redux Toolkit
• освоите создание маршрутизации в приложении
• научитесь работать с параметрами запроса и даже делать динамический контент в рамках участка страницы в зависимости от текущего URL адреса.

Программа курса
JS необходимый для курса

• Репозиторий кода для курса
• Переменные
• Шаблонный литерал. Динамика в строках
• Условный оператор if
• Тернарный оператор
• Оператор нулевого слияния и &&
• Метод foreach
• Массивы - метод Find
• Массивы - метод Filter
• Массивы - метод Map
• Массивы - метод Reduce

Знакомство с React

• Что такое React
• Знакомство с синтаксисом

Первые компоненты на React

• Создаём первый компонент
• JSX разметка. Синтаксис и размещение элементов
• Композиция компонентов, родители и потомки
• Динамические значения и выражения в JSX
• ДЗ для самостоятельной работы

Разбор JSX

• Под капотом JSX
• ДЗ для самостоятельной работы

Быстрый старт приложения. Создание бойлерплейта

• Установка шаблона приложения CreateReactApp
• Подготовка структуры проекта
• Подготовка файлов
  
  для будущих компонентов
• Styled Components. Стилизация
• ДЗ для самостоятельной работы

Передача данных между компонентами. Props

• React Props - передача данных между компонентами
• Как работают пропсы с точки зрения JS
• Пропсы в Styled Components
• ДЗ для самостоятельной работы

Состояние приложения

• Состояние, реактивность, useState
• state vs props. Практика работы с состоянием
• Поднятие состояние. Более совершенная передача данных
• ДЗ для самостоятельной работы

Рендеринг списков в приложении

• Рендеринг списков в React
• Практика работы со списками
• ДЗ для самостоятельной работы

Условный рендеринг компонентов

• Возможности условного рендеринга
• Улучшаем компонент статистики
• Добавляем новые компоненты из MUI
• Используем Nivo
• ДЗ для самостоятельной работы

React фрагменты

• Фрагменты - удобная группировка элементов

Хуки useState и useEffect

• useState и использование предыдущего значения состояния
• useState и сложные типы данных
• useEffect - использование зависимостей
• ДЗ для самостоятельной работы

Библиотека react-router

• Разбор типов роутинга
• Построение базовых маршрутов приложения
• useNavigate и useParams
• useSearchParams
• Советы по маршрутизации, маршрут индексной страницы, маршрут заг
• Применяем новые знания в приложении
• ДЗ для самостоятельной работы

Процесс рендеринга в React

• Концепции рендеринга, иммутабельность элементов, принцип объектн
• Классовые компоненты, работа с состоянием и пропсами
• Жизненный цикл компонента и его методы
• setState, привязка контекста внутри классовых компонентов
• ДЗ для самостоятельной работы

Управление состоянием. Redux Toolkit

• Работа с состоянием - продвинутый уровень
• Знакомство с Redux Toolkit
• Редюсер и слайс
• Глобальное состояние. useSelector и useeDispatch
• Продолжаем применять Redux в приложении
• Вынос всего ключевого состояния
• ДЗ для самостоятельной работы

Компоненты высшего порядка - НОС

• Особенности компонентов высшего порядка
• Расширение функционала с помощью HOC
• Виды стилизации и ещё немного о HOC
• ДЗ для самостоятельной работы

Дополнительные хуки

• useRef и useContext
• useMemo
• useCallback
• Создание пользовательских хуков
• ДЗ для самостоятельной работы

Что вы получаете

• реализовывать пользовательские интерфейсы на React
• правильно логически разделять приложение на компоненты
• научитесь связывать компоненты между собой, как используя технологию props, так и с помощью глобального стейта, применяя встроенные возможности React, такие, как useContext, или стейтменеджер Redux Toolkit

Заключение

• Заключение