React Js [Archakov]

Программа занятий 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 и создайте простую форму Бонус: стилизация с помощью styled-components 4. НавигацияО чем блок: Изучим библиотеку React Router для разработки навигации на сайте. Создадим защищённую страницу. Изучим хуки React Router Уроки: Создаем страницы для личного сайта Сделать вывод полной записи по отдельному пути Создаём компонент Route для вывода компонентов по условию Узнаем про React Router и подключаем в проект Выводим страницу "Ничего не найдено" Хуки React Router (useHistory, useParams, useLocation, useRouteMatch) Создаем защищённую страницу 5. Работа с формами О чем блок: Изучим библиотеку 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