React Js [Archakov]

Складчина: React Js [Archakov]

Программа занятий
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 для стилизации

1. Подключаем SCSS препроцессор

1. Используем подход CSS Modules
2. Какие есть UI-библиотеки для ReactJS?
3. Изучите библиотеку компонентов Material UI и создайте простую форму

1. Бонус: стилизация с помощью 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. Разбиваем форму регистрации на несколько шагов

1. Используем контекст формы с помощью хука useFormContext

1. 
   

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. Кастомный хук

Канал автора на ютубе.

Тариф "Самостоятельный" 4950