Ho Lee Fuk

Сенсей
🛡 МОДЕРАТОР 🛡
Регистрация
22 Февраль 2018
Сообщения
10.717
Автор: Фофанов

Название: React - Полное руководство (2023)

1691788975348-png.109401


Описание:

Данный курс предназначен для тех, кто много слышал о библиотеке 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

Заключение

- Заключение

Подробнее:
Для просмотра содержимого вам необходимо авторизоваться.

Скачать:
Скрытое содержимое могут видеть только члены группы Премиум.


Скрытый контент для пользователей All-dar.
 

Создайте учетную запись или войдите, чтобы комментировать или скачивать материалы!

У вас должна быть учетная запись, чтобы оставлять комментарии

Зарегистрироваться

Создайте учетную запись. Это просто!

Авторизоваться

У вас уже есть аккаунт? Войдите здесь.

Сверху