Программа занятий
8 модулей и на каждый выделяется
по 10-15 уроков, которые ты будешь проходить поэтапно, выполняя тесты и домашние задания
1. Базовая информация
О чем блок:
В этом блоке я тебе расскажу только самое главное, чтобы ты быстрей понял ReactJS без кучи сложных тем
Уроки:
- Что такое ReactJS и для чего его используют?
- Что такое компоненты и зачем они нужны?
- Что такое JSX и чем отличается от HTML?
- Как передавать данные в компонент?
- Стилизация элементов
- Разница между функциональным и классовым компонентом
- Что такое children?
- Создаем первое приложение на ReactJS
- Создать классовый и функциональный компонент
- Как определить клик по кнопке или изменение инпута
- Создать форму авторизации
- Превращаем массив объектов в React-компоненты
- Что такое state? Чем state отличается от props? let
- Что за VirtualDOM?
2. Хранение данных, списки, хуки
О чем блок:
Разберёмся с тем, что такое хуки, как рендерить список React-элементов, контекст и что такое "жизнненный цикл" в ReactJS
Уроки:
- Что такое хуки и зачем они нужны?
- Условный рендеринг
- Контролируемый и неконтролируемый компонент / useState
- Создать счетчик
- Подъем состояния
- Зачем нужен key при рендере списка и почему он важен?
- Создать приложение генерации случайных чисел
- Жизненный цикл компонента (lifecycle) / useEffect
- Что такое контекст и какую задачу он решает?
- Избавляемся от "props drilling" использую контекст
3. Стилизация
О чем блок:
В этом блоке расскажу, как стилизировать компоненты с помощью CSS, Inliny styles, SCSS. Расскажу про подход CSS Modules и как стилизировать приложение с помощью Material UI
Уроки:
- Используем обычный CSS для стилизации
- Подключаем SCSS препроцессор
- Используем подход CSS Modules
- Какие есть UI-библиотеки для ReactJS?
- Изучите библиотеку компонентов Material UI и создайте простую форму
4. НавигацияО чем блок:
- Бонус: стилизация с помощью styled-components
Изучим библиотеку React Router для разработки навигации на сайте. Создадим защищённую страницу. Изучим хуки React Router
Уроки:
5. Работа с формами
- Создаем страницы для личного сайта
- Сделать вывод полной записи по отдельному пути
- Создаём компонент Route для вывода компонентов по условию
- Узнаем про React Router и подключаем в проект
- Выводим страницу "Ничего не найдено"
- Хуки React Router (useHistory, useParams, useLocation, useRouteMatch)
- Создаем защищённую страницу
О чем блок:
Изучим библиотеку React Hook Form и Yup для разработки форм с валидацией
Уроки:
- Создаем форму регистрации с помощью Material UI
- Валидируем данные формы вручную
- Вывести ошибки в самой форме под полями
- Узнаем про React Hook Form и подключаем в проект
- Реализовать очистку формы
- Делаем более гибкую валидацию с помощью библиотеки yup
- Разбиваем форму регистрации на несколько шагов
- Используем контекст формы с помощью хука useFormContext
6. Взаимодействие с сервером
О чем блок:
Научимся отправлять и получать данные с сервера. Изучим библиотеку Axios. Поймём как обрабатывать серверные ошибки.
Уроки:
- Вытаскиваем данные с сервера и отображаем в приложении
- Переписать getUsers на async/await
- Отправляем данные из приложения на сервер
- Что такое Axios и чем он лучше fetch?
- Отправляем файл на сервер с помощью Axios
- Обработка ошибок
7. Redux
О чем блок:
Создадим блог используя Redux и хуки React Router. Подключим библиотеку redux-thunk для асинхронных действий в Redux.
Уроки:
- Что предстоит изучить?
- Что такое Redux? Когда он нужен и не нужен?
- Изучим хук useReducer
- Подготавливаем страницы (список статей, просмотр статьи, создание статьи, профиль)
- Подключаем Redux к проекту
- Разрабатываем структуру
- Что такое action, dispatch, reducer, middleware?
- Используем хуки useSelector и useDispatch
- Запрашиваем список статей с сервера
- Делаем регистрацию и авторизацию
- Подключаем библиотеку redux-thunk
- Делаем страницу создания статьи
- Вывод комментариев
- Добавление комментариев
- Удаление и редактирование комментариев
- Итоговая часть + тест
- Деплой проекта
8. Паттерны, лучшие практики
О чем блок:
Создадим блог используя Redux и хуки React Router. Подключим библиотеку redux-thunk для асинхронных действий в Redux.
Уроки:
- Зачем нужны паттерны проектирования и можно ли без них разрабатывать проект?
- Какие бывают паттерны в ReactJS?
- Stateless Component
- Proxy Component
- Style Component
- HOC (High Order Component)
- Container Component
- Layout Component
- Как грамотно разрабатывать архитектуру приложения?
- Кастомный хук
Канал автора на ютубе.
Тариф "Самостоятельный" 4950
Последнее редактирование модератором:
- Статус
- В этой теме нельзя размещать новые ответы.