Курс «React + Next.js с нуля. TypeScript, Hooks, SSR и CSS Grid»

Фреймворк Next.js основанный на React позволяет создавать web-приложения с улучшенной производительностью и интуитивно понятным интерфейсом. Он хорош тем, что требует только базовых знаний CSS, HTML и JavaScript и потому идеально подходит для обучения разработке приложений. Если вам нужно быстро пройти обучение разработке сайтов, приложений, то курсы frontend-разработки школы Purple School — лучший выбор.

На этом курсе вы получите полный пакет знаний по актуальному Frontend на React и Next.js. На занятиях вы будете учиться разрабатывать приложения, изучать работу SSR, писать скрипты, работать с анимацией и многому другому. Программа построена так, чтобы новичкам было понятно, а уроки проводятся от более простых тем к сложным.

Краткое содержание курса «React + Next.js с нуля. TypeScript, Hooks, SSR и CSS Grid»:

1. Преимущества, которые дает знание NextJS.
2. Установка софта на ПК. Настройки VSCode.
3. Работа над проектом.
4. Подготовка проекта к production.
5. Онлайн-сессия с наставником.

Завершив курс, вы получите необходимые знания и навыки для создания веб-приложений на Next.js. Это будет подтверждено сертификатом школы и проектом в портфолио.

1. Введение

• Преимущества NextJS.
• Как устроен курс.
• Обзор проекта.
• Update - Обзор курсов.
• Курс с наставником (с наставником).

2. Настройка окружения

• Установка софта.
• Работа с nvm.
• Настройки VSCode.

3. TypeScript

• Дополнительный курс по TypeScript.
• Вводное видео.
• Компилятор TypeScript.
• Базовые типы.
• Interfaces and Types.
• Упражнение - Interfaces.
• Литеральные типы.
• Enums.
• Tuple.
• Generics.
• JSX.
• Тест - TypeScript.
• Работа с git и GitHub (с наставником).
• Работа с наставником (с наставником).
• Работа с gitflow (с наставником).
• Как передавать на код ревью (с наставником).

4. Старт проекта

• Обзор модуля.
• Развертка проекта.
• Структура проекта.
• Настройка eslint.
• Настройка stylelint.
• Отладка в VSCode.
• React Dev Tools.
• Тест - Старт проекта.
• Домашнее задание - Старт проекта (с наставником).

5. Компоненты Head и Document

• Жизненный цикл React.
• Компонент head.
• React Fragment.
• Компонент Document.
• Тест - Компоненты Head и Document.
• Домашнее задание - Компоненты Head и Document (с наставником).

6. Figma для разработчика

• Обзор модуля.
• Разбор интерфейса.
• Свойства компонент.
• Экспорт графики.
• Тест - Figma для разработчика.

7. Простые компоненты

• Шрифты и цвета.
• Первый компонент.
• Update - Библиотека classnames.
• Classnames.
• HTMLProps.
• Updated - Детали HTMLprops.
• Работа с svg.
• Дополнительно - SVG в NextJS 11.
• Дополнительно - Обновление SVGR.
• Упражнение - Компонент p.
• Компонент тэга.
• Тест - Простые компоненты.
• Домашнее задание - Простые компоненты (с наставником).
• Код ревью домашнего задания (с наставником).

8. Statefull компоненты

• React Hooks.
• useState.
• useEffect.
• Правила использования Hooks.
• Архитектура компонента рейтинга.
• Компонент рейтинга - 1.
• Компонент рейтинга - 2.
• Тест - Statefull компоненты.
• Домашнее задание - Statefull компоненты (с наставником).

9. HOC компоненты

• Что такое HOC?
• Layout.
• Пишем HOC withLayout.
• Тест - HOC компоненты.
• Домашнее задание - HOC компоненты (с наставником).

10. CSS Grid

• Обзор модуля.
• Template и gap.
• Justify и align.
• Распределение ячеек.
• Template-area.
• Лучшие практики.
• Вёрстка layout.
• Упражнение - Вёрстка footer.
• Тест - CSS Grid.
• Домашнее задание - CSS Grid (с наставником).
• Код ревью домашнего задания (с наставником).

11. Server side rendering

• Переменные окружения.
• Как работает SSR?
• SSR в NextJS.
• Использование getStaticProps.
• Использование getStaticPaths.
• Тест - Server side rendering.
• Домашнее задание - Server side rendering (с наставником).

12. Контекст

• useContext.
• Пишем свой контекст.
• Вёрстка меню.
• Тест - Контекст.
• Домашнее задание - Контекст (с наставником).

13. Роутинг

• Компонент Link.
• useRouter.
• Упражнение - Добавление страниц.
• Структура роутинга.
• Вёрстка Sidebar.
• Тест - Роутинг.
• Домашнее задание - Роутинг (с наставником).
• Код ревью домашнего задания (с наставником).

14. Страница продуктов

• Компоненты страниц.
• Вёрстка страницы продуктов - 1.
• Regex отображения цены.
• Упражнение - Доработка страницы.
• Вёрстка страницы продуктов - 2.
• Вставка HTML.
• useReducer.
• Компонент сортировки.
• Reducer сортировки.
• Тест - Страница продуктов.
• Домашнее задание - Страница поста (с наставником).

15. Компонент продукта

• Компонент Input.
• Упражнение - Компонент Textarea.
• Компонент поиска.
• Компонент продукта - планирование.
• Компонент продукта - сетка.
• Компонент продукта - стили.
• Склонение слов.
• Компонент Image.
• Компонент продукта - адаптив.
• Тест - Компонент продукта.
• Домашнее задание - Список комментариев (с наставником).

16. Работа с формами

• Компонент отзыва.
• Форма отзыва.
• useForm.
• Работа с формами.
• Проброс ref.
• Обработка ошибок.
• Упражнение - Обработка ошибок Rating.
• Отправка запроса со страницы.
• useRef.
• Упражнение - Исправление бага useReducer.
• Домашнее задание - Работа с формами (с наставником).
• Код ревью домашнего задания (с наставником).

17. Анимация на Framer Motion

• Вводное видео.
• Принципы анимации.
• Анимация меню.
• Анимация сортировки.
• Пишем свой hook.
• useAnimation.
• Упражнение - Анимация отзывов.
• Динамическая иконка.
• Мобильное меню.
• Жесты и MotionValues.
• Производительность.
• Домашнее задание - Анимация на Framer Motion (с наставником).

18. Доступность

• Виды доступности.
• Цветовая доступность.
• Доступность меню с клавиатуры.
• Доступность форм с клавиатуры.
• Упражнение - доступность сортировки.
• ARIA атрибуты.
• Использование Screen Reader.
• Aria-label и aria-labelledby.
• Aria-hidden.
• Добавление landmarks.
• Доступность форм.
• Упражнение - Доступность оповещений.
• Доступность меню и списка.
• Уменьшение движения.
• Домашнее задание - Доступность (с наставником).
• Код ревью домашнего задания (с наставником).

19. Подготовка к production

• Добавление meta на страницу.
• Установка метрики.
• Husky.
• Next export.
• Страницы 404, 500.
• Сборка контейнера Docker.
• Запуск через docker-compose.
• Github actions.

20. Заключение

• Сессия 1 на 1 с наставником (с наставником).
• Сертификат.

• Формат
  Самостоятельно С наставником — Самостоятельно с наставником С наставником и проектами — Самостоятельно с наставником
  Видеоуроки С наставником — Видеоуроки / Консультации С наставником и проектами — Видеоуроки / Консультации
  Обучение в ЛК на сайте автора
• Продолжительность
  1 месяц Без наставника — 1 месяц С наставником — 2 месяца С наставником и проектами — 3 месяца
• Уровень сложности
  Для опытных
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  ЕстьС проверкой Без наставника — С наставником — Есть / С проверкой С наставником и проектами — Есть / С проверкой
• Документ об обучении
  Сертификат Освоение программы курса
• Сопровождение
  Куратором Без наставника — С наставником — Куратором С наставником и проектами — Куратором
• Техническая поддержка
  В рабочее времяЧат в ВКЧат в мессенджереЭлектронная почта
• Срок доступа к материалам
  Бессрочный
• Безопасная покупка
  В течение 30 дней с даты покупки