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

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