​

ReactJS (Деннис Арчаков)​

8 модулей и на каждый выделяется по 10-15 уроков, которые ты будешь проходить поэтапно, выполняя тесты и домашние задания.

Спойлер: Программа

1 Базовая информация
В этом блоке я тебе расскажу только самое главное, чтобы ты быстрей понял ReactJS без кучи сложных тем.

01 Что такое ReactJS и для чего его используют?
02 Что такое компоненты и зачем они нужны?
03 Что такое JSX и чем отличается от HTML?
04 Как передавать данные в компонент?
05 Стилизация элементов
06 Разница между функциональным и классовым компонентом
07 Что такое children?
08 Создаем первое приложение на ReactJS
09 Создать классовый и функциональный компонент
10 Как определить клик по кнопке или изменение инпута
11 Создать форму авторизации
12 Превращаем массив объектов в React-компоненты
13 Что такое state? Чем state отличается от props? let
14 Что за VirtualDOM?

2 Хранение данных, списки, хуки
Разберёмся с тем, что такое хуки, как рендерить список React-элементов, контекст и что такое "жизнненный цикл" в ReactJS.

01 Что такое хуки и зачем они нужны?
02 Условный рендеринг
03 Контролируемый и неконтролируемый компонент / useState
04 Создать счетчик
05 Подъем состояния
06 Зачем нужен key при рендере списка и почему он важен?
07 Создать приложение генерации случайных чисел
08 Жизненный цикл компонента (lifecycle) / useEffect
09 Что такое контекст и какую задачу он решает?
10 Избавляемся от "props drilling" использую контекст

3 Стилизация
В этом блоке расскажу, как стилизировать компоненты с помощью CSS, Inliny styles, SCSS. Расскажу про подход CSS Modules и как стилизировать приложение с помощью Material UI.

01 Используем обычный CSS для стилизации
02 Подключаем SCSS препроцессор
03 Используем подход CSS Modules
04 Какие есть UI-библиотеки для ReactJS?
05 Изучите библиотеку компонентов Material UI и создайте простую форму
06 Бонус: стилизация с помощью styled-components

4 Навигация
Изучим библиотеку React Router для разработки навигации на сайте. Создадим защищённую страницу. Изучим хуки React Router.

01 Создаем страницы для личного сайта
02 Сделать вывод полной записи по отдельному пути
03 Создаём компонент Route для вывода компонентов по условию
04 Узнаем про React Router и подключаем в проект
05 Выводим страницу "Ничего не найдено"
06 Хуки React Router (useHistory, useParams, useLocation, useRouteMatch)
07 Создаем защищённую страницу

5 Работа с формами
Изучим библиотеку React Hook Form и Yup для разработки форм с валидацией.

01 Создаем форму регистрации с помощью Material UI
02 Валидируем данные формы вручную
03 Вывести ошибки в самой форме под полями
04 Узнаем про React Hook Form и подключаем в проект
05 Реализовать очистку формы
06 Делаем более гибкую валидацию с помощью библиотеки yup
07 Разбиваем форму регистрации на несколько шагов
08 Используем контекст формы с помощью хука useFormContext

6 Взаимодействие с сервером
Научимся отправлять и получать данные с сервера. Изучим библиотеку Axios. Поймём как обрабатывать серверные ошибки.

01 Вытаскиваем данные с сервера и отображаем в приложении
02 Переписать getUsers на async/await
03 Отправляем данные из приложения на сервер
04 Что такое Axios и чем он лучше fetch?
05 Отправляем файл на сервер с помощью Axios
06 Обработка ошибок

7 Redux
Создадим блог используя Redux и хуки React Router. Подключим библиотеку redux-thunk для асинхронных действий в Redux.

01 Что предстоит изучить?
02 Что такое Redux? Когда он нужен и не нужен?
03 Изучим хук useReducer
04 Подготавливаем страницы (список статей, просмотр статьи, создание статьи, профиль)
05 Подключаем Redux к проекту
06 Разрабатываем структуру
07 Что такое action, dispatch, reducer, middleware?
08 Используем хуки useSelector и useDispatch
09 Запрашиваем список статей с сервера
10 Делаем регистрацию и авторизацию
11 Подключаем библиотеку redux-thunk
12 Делаем страницу создания статьи
13 Вывод комментариев
14 Добавление комментариев
15 Удаление и редактирование комментариев
16 Итоговая часть + тест
17 Деплой проекта

8 Паттерны, лучшие практики
Создадим блог используя Redux и хуки React Router. Подключим библиотеку redux-thunk для асинхронных действий в Redux.

01 Зачем нужны паттерны проектирования и можно ли без них разрабатывать проект?
02 Какие бывают паттерны в ReactJS?
03 Stateless Component
04 Proxy Component
05 Style Component
06 HOC (High Order Component)
07 Container Component
08 Layout Component
09 Как грамотно разрабатывать архитектуру приложения?
10 Кастомный хук