Next.js 15 - с нуля, React TypeScript, Hooks, SSR и CSS Grid

Программа курса

Ознакомьтесь с программой курса «Next.js 15 - с нуля, React TypeScript, Hooks, SSR и CSS Grid» от PurpleSchool - purpleschool.ru

1. Настройка окружения. Установка софта, Работа с nvm, Настройки VSCode, Рекомендуемый курс.
2. TypeScript. Дополнительный курс по TypeScript, Вводное видео, Компилятор TypeScript, Базовые типы, Interfaces and Types, Литеральные типы, Enums, Tuple, Generics, JSX, Тест - TypeScript, Занятие TypeScript, Домашнее задание AI, Работа с gitflow.
3. Старт проекта. Обзор модуля, О новом router, App Router - Развертка проекта, Page Router - Развертка проекта, App Router - Cтруктура проекта, Page Router - Структура проекта, Настройка eslint, Настройка stylelint, Отладка в VSCode, React Dev Tools, Тест - Ста…
4. Компоненты Head и Document. Жизненный цикл React, App Router - Задание Meta, Pages Router - Компонент head, React Fragment, App Router - Корневой документ, Pages Router - Компонент Document, Тест - Компоненты Head и Document, Занятие - Компоненты Head и Docu…
5. Figma для разработчика. Обзор модуля, Разбор интерфейса, Свойства компонент, Экспорт графики, Тест - Figma для разработчика.
6. Простые компоненты. Font, Шрифты и цвета, Первый компонент, Библиотека classnames, Classnames, HTMLProps, Детали HTMLprops, Работа с svg, SVG Next 13, Упражнение - Компонент p, Компонент тэга, Тест - Простые компоненты, Занятие - Простые компоненты, Домашнее…
7. Statefull компоненты. App Router - Клиентские компоненты, React Hooks, useState, useEffect, Правила использования Hooks, Архитектура компонента рейтинга, Компонент рейтинга - 1, Компонент рейтинга - 2, Тест - Statefull компоненты, Занятие - Statefull компонен…
8. HOC компоненты. Что такое HOC?, App Router - Работа с layout, App Router - Группы роутов, App Router - Template, App Router - Структура проекта, Pages Router - Layout, Pages Router - Пишем HOC withLayout, Тест - HOC компоненты, Занятие - HOC компоненты, Домаш…
9. CSS Grid. Обзор модуля, Template и gap, Justify и align, Распределение ячеек, Template-area, Лучшие практики, Вёрстка layout, Упражнение - Вёрстка footer, Тест - CSS Grid, Занятие - CSS Grid, Домашнее задание - CSS Grid.
10. Server side rendering. Переменные окружения, Как работает SSR?, App Router - SSR в NextJS, Pages Router - SSR в NextJS, App Router - Получение данных, App Router - Динамические страницы, App Router - notFound, App Router - generateStaticParams, App Router - Р…
11. Контекст. useContext, App Router - Работа с контекстом, Пишем свой контекст, Вёрстка меню, Тест - Контекст, Занятие - Контекст, Домашнее задание - Контекст.
12. Роутинг. Обновление компонента Link, Компонент Link, App Router - Параллельные роуты, App Router - Loading, App Router - Error page, useRouter, Упражнение - Добавление страниц, Структура роутинга, Вёрстка Sidebar, Тест - Роутинг, Занятие - Роутинг, Домашнее з…
13. Страница продуктов. Компоненты страниц, Вёрстка страницы продуктов - 1, Regex отображения цены, Упражнение - Доработка страницы, Вёрстка страницы продуктов - 2, Вставка HTML, useReducer, Компонент сортировки, Reducer сортировки, Тест - Страница продуктов, Зан…
14. Компонент продукта. Компонент Input, Упражнение - Компонент Textarea, Компонент поиска, Компонент продукта - планирование, Компонент продукта - сетка, Компонент продукта - стили, Склонение слов, Компонент Image, Компонент продукта - адаптив, Тест - Компонент…
15. Работа с формами. Компонент отзыва, Форма отзыва, useForm, Работа с формами, Проброс ref, Обработка ошибок, Упражнение - Обработка ошибок Rating, Отправка запроса со страницы, useRef, Упражнение - Исправление бага useReducer, Занятие - Работа с формами, Домаш…

Чему вы научитесь

• Научитесь настраивать и организовывать: настройка окружения. установка софта, работа с nvm, настройки vscode, рекомендуемый курс.
• Научитесь настраивать и организовывать: структура проекта, настройка eslint, настройка stylelint, отл…
• Научитесь уверенно работать с темой: работа с контекстом, пишем свой контекст, вёрстка меню, тест.
• Освоите и сможете применять: 2, вставка html, usereducer, компонент сортировки, reducer…
• Освоите и сможете применять: компонент textarea, компонент поиска, компонент продукта.