[Archakov.im] React Js (Денис Арчаков)

Программа занятий

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

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

Уроки:

1. Что такое ReactJS и для чего его используют?
2. Что такое компоненты и зачем они нужны?
3. Что такое JSX и чем отличается от HTML?
4. Как передавать данные в компонент?
5. Стилизация элементов
6. Разница между функциональным и классовым компонентом
7. Что такое children?
8. Создаем первое приложение на ReactJS
9. Создать классовый и функциональный компонент
10. Как определить клик по кнопке или изменение инпута
11. Создать форму авторизации
12. Превращаем массив объектов в React-компоненты
13. Что такое state? Чем state отличается от props? let
14. Что за VirtualDOM?

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

Уроки:

1. Что такое хуки и зачем они нужны?
2. Условный рендеринг
3. Контролируемый и неконтролируемый компонент / useState
4. Создать счетчик
5. Подъем состояния
6. Зачем нужен key при рендере списка и почему он важен?
7. Создать приложение генерации случайных чисел
8. Жизненный цикл компонента (lifecycle) / useEffect
9. Что такое контекст и какую задачу он решает?
10. Избавляемся от "props drilling" использую контекст

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

Уроки:

1. Используем обычный CSS для стилизации
2. Подключаем SCSS препроцессор
3. Используем подход CSS Modules
4. Какие есть UI-библиотеки для ReactJS?
5. Изучите библиотеку компонентов Material UI и создайте простую форму
6. Бонус: стилизация с помощью styled-components

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

Уроки:

1. Создаем страницы для личного сайта
2. Сделать вывод полной записи по отдельному пути
3. Создаём компонент Route для вывода компонентов по условию
4. Узнаем про React Router и подключаем в проект
5. Выводим страницу "Ничего не найдено"
6. Хуки React Router (useHistory, useParams, useLocation, useRouteMatch)
7. Создаем защищённую страницу

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

Уроки:

1. Создаем форму регистрации с помощью Material UI
2. Валидируем данные формы вручную
3. Вывести ошибки в самой форме под полями
4. Узнаем про React Hook Form и подключаем в проект
5. Реализовать очистку формы
6. Делаем более гибкую валидацию с помощью библиотеки yup
7. Разбиваем форму регистрации на несколько шагов
8. Используем контекст формы с помощью хука useFormContext

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

Уроки:

1. Вытаскиваем данные с сервера и отображаем в приложении
2. Переписать getUsers на async/await
3. Отправляем данные из приложения на сервер
4. Что такое Axios и чем он лучше fetch?
5. Отправляем файл на сервер с помощью Axios
6. Обработка ошибок

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

Уроки:

1. Что предстоит изучить?
2. Что такое Redux? Когда он нужен и не нужен?
3. Изучим хук useReducer
4. Подготавливаем страницы (список статей, просмотр статьи, создание статьи, профиль)
5. Подключаем Redux к проекту
6. Разрабатываем структуру
7. Что такое action, dispatch, reducer, middleware?
8. Используем хуки useSelector и useDispatch
9. Запрашиваем список статей с сервера
10. Делаем регистрацию и авторизацию
11. Подключаем библиотеку redux-thunk
12. Делаем страницу создания статьи
13. Вывод комментариев
14. Добавление комментариев
15. Удаление и редактирование комментариев
16. Итоговая часть + тест
17. Деплой проекта

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

Уроки:

1. Зачем нужны паттерны проектирования и можно ли без них разрабатывать проект?
2. Какие бывают паттерны в ReactJS?
3. Stateless Component
4. Proxy Component
5. Style Component
6. HOC (High Order Component)
7. Container Component
8. Layout Component
9. Как грамотно разрабатывать архитектуру приложения?
10. Кастомный хук