Курс находится на модерации. Данные могут быть неактуальны.
Сложность
Сложность
Начинающий
Тип обучения
Тип обучения
Курс
Формат обучения
Формат обучения
Записанные лекции
Трудоустройство
Трудоустройство
Отсутствует

Стоимость курса

2 899 ₽
нет рассрочки

Next.js - готовый к production framework для React - самой популярной JavaScript библиотеки на сегодняшний день. Он позволяет разрабатывать производительные, SEO-friendly сайты с использованием Server Side Rendering (SSR) и статической генерацией страниц.
При этом от вас требуется только базовое знание CSS, HTML и JavaScript, так в рамках курса мы не только разберём Next.js, но и React с нуля. При этом мы будем писать не просто какой-то учебный проект, а реальный production сайт, посвящённый рейтингам.
Каждый модуль содержит как теоретическую часть, так и live-code, где мы в месте будем создавать приложение с нуля. В конце каждого модуля вас ожидает тест, который позволит укрепить ваши знания, а небольшие упражнения - попрактиковаться писать код.

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

После прохождения курса вы сможете: Разрабатывать реальные приложения на NextJS и React

  • Работать с React Hooks
  • Понимать работу SSR и создавать SEO-friendly сайтов
  • Верстать макеты на CSS Grid
  • Работать с анимацией и библиотекой Framer
  • Обеспечивать доступности приложения и работать с ARIA атрибутами
  • Подготавливать ваше приложение к production
  • Работать с формами, их отправкой и валидацией
  • Писать на TypeScript
  • Собирать production проект и настраивать eslint, stylelint и отладку

Что вы получите после обучения

Приобретаемые навыки
1
CSS
5
TypeScript
9
SSR
10
HOC
11
HTML
12
CSS Grid

Вас будут обучать

Технический директор и профессиональный разработчик

Основатель школ PurpleSchool. Занимаюсь разработкой уже более 12 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.

Работаю техническим директором в компании по продаже и оценке автомобилей с пробегом. Занимают разработкой уже более 12 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд. Являются большим фанатом NestJS для Backend и активно занимаюсь open source библиотеками для него. На frontend работаю с React, Angular а так же обожаю делать небольшие виджеты на Svelte. Так же имею широкий опыт внедрения DevOps практик для быстрой доставки кода в production и созданию лучшего develop experience. Но что самое главное - испытываю огромное желание делиться знаниями, которые были накоплены в результате многолетнего опыта разработки и управления командами.

Senior Frontend Developer в Lectera

 

Разработкой занимаюсь больше 6 лет. Прошёл тернистый путь от работы экономистом на заводе до ведущего разработчика. Основной стек: TypeScript, React, Next.js. Принимал участие в разработке дизайн-системы, люблю семантическую вёрстку и высокие показатели в Lighthouse.

Старший Frontend разработчик Билайн

Занимаюсь разработкой больше 5 лет. Начинал с продавца в магазине одежды, смотря на перерыве уроки по фронтенду. Основной стек React, Vue, TypeScript. Разрабатываю дизайн-системы и микрофронты. Люблю сложные задачи после которых сложно сдержать крик радости.

Образовательная организация

Более 10 000 студентов

Со всего мира прошли курсы на площадках PurpleSchool, Udemy и Stepik

Гарантия возврата денег

Если курс вам не подойдёт, мы вернём вам деньги в течение 30 дней

Практический опыт

Получите бесценный опыт реальных проектов в каждом курсе

“Я помогаю разработчикам профессионально расти, делясь опытом в своих курсах”

Антон Ларичев
Технический директор и профессиональный разработчик

Каналы и подкасты

Подкаст Не плохой код (Apple podcast, Google podcast, Яндекс Музыка)
Говорим о разработке, и о том как писать не плохой код. А в частности NodeJS, JavaScript и TypeScript.

Youtube канал PurpleSchool
Канал с обучающими видео и дополнительными материалами по тематикам курсов

Telegram канал PurpleSchool
Канал с полезными советами по разработке, разбором примеров кода и обновлениями курсов.

VK сообщество PurpleSchool
Сообщество VK с полезными советами по разработке, разбором примеров кода и обновлениями курсов.

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

1. Введение

  1. Преимущества NextJS
  2. Как устроен курс
  3. Обзор проекта
  4. Обзор курсов
  5. Курс с наставником
  6. Курс с наставником и проектами
  7. Как проходить обновлённый курс

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

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

3. TypeScript

  1. Дополнительный курс по TypeScript
  2. Вводное видео
  3. Компилятор TypeScript
  4. Базовые типы
  5. Interfaces and Types
  6. Литеральные типы
  7. Enums
  8. Tuple
  9. Generics
  10. JSX
  11. Тест - TypeScript
  12. Домашние задания
  13. Работа с наставником
  14. Работа с gitflow

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

  1. Обзор модуля
  2. О новом router
  3. App Router - Развертка проекта
  4. Page Router - Развертка проекта
  5. App Router - Cтруктура проекта
  6. Page Router - Структура проекта
  7. Настройка eslint
  8. Настройка stylelint
  9. Отладка в VSCode
  10. React Dev Tools
  11. Тест - Старт проекта
  12. Домашнее задание - Старт проекта

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

  1. Жизненный цикл React
  2. Pages Router - Компонент head
  3. React Fragment
  4. Pages Router - Компонент Document
  5. Тест - Компоненты Head и Document
  6. Домашнее задание - Компоненты Head и Document
  7. App Router - Задание Meta
  8. App Router - Корневой документ

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

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

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

  1. Шрифты и цвета
  2. Font
  3. Первый компонент
  4. Библиотека classnames
  5. Classnames
  6. HTMLProps
  7. Детали HTMLprops
  8. Работа с svg
  9. SVG в NextJS 11
  10. Упражнение - Компонент p
  11. Компонент тэга
  12. Тест - Простые компоненты
  13. Домашнее задание - Простые компоненты
  14. Код ревью домашнего задания

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

  1. App Router - Клиентские компоненты
  2. React Hooks
  3. С наставником8.3 useState
  4. useEffect
  5. Правила использования Hooks
  6. Архитектура компонента рейтинга
  7. Компонент рейтинга - 1
  8. Компонент рейтинга - 2
  9. Тест - Statefull компоненты
  10. Домашнее задание - Statefull компоненты

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

  1. Что такое HOC?
  2. App Router - Работа с layout
  3. App Router - Группы роутов
  4. App Router - Template
  5. Аpp Router - Структура проекта
  6. Pages Router - Layout
  7. Pages Router - Пишем HOC withLayout
  8. Тест - HOC компоненты
  9. Домашнее задание - HOC компоненты

10. CSS Grid

  1. Обзор модуля
  2. Template и gap
  3. Justify и align
  4. Распределение ячеек
  5. Template-area
  6. Лучшие практики
  7. Вёрстка layout
  8. Упражнение - Вёрстка footer
  9. Тест - CSS Grid
  10. Домашнее задание - CSS Grid
  11. Код ревью домашнего задания

11. Server side rendering

  1. Переменные окружения
  2. Как работает SSR?
  3. Pages Router - SSR в NextJS
  4. Pages Router - Использование getStaticProps
  5. Pages Router - Использование getStaticPaths
  6. Тест - Server side rendering
  7. Домашнее задание - Server side rendering
  8. App Router - SSR в NextJS
  9. App Router - Получение данных
  10. App Router - Динамические страницы
  11. App Router - notFound
  12. App Router - generateStaticParams
  13. App Router - Ревалидация страниц


12. Контекст

  1. useContext
  2. Пишем свой контекст
  3. Вёрстка меню
  4. Тест - Контекст
  5. Домашнее задание - Контекст
  6. App Router - Работа с контекстом


13. Роутинг

  1. Компонент Link
  2. useRouter
  3. Упражнение - Добавление страниц
  4. Структура роутинга
  5. Вёрстка Sidebar
  6. Тест - Роутинг
  7. Домашнее задание - Роутинг
  8. Код ревью домашнего задания
  9. Обновление компонента Link
  10. App Router - Параллельные роуты
  11. App Router - Loading
  12. App Router - Error page

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

  1. Компоненты страниц
  2. Вёрстка страницы продуктов - 1
  3. Regex отображения цены
  4. Упражнение - Доработка страницы
  5. Вёрстка страницы продуктов - 2
  6. Вставка HTML
  7. useReducer
  8. Компонент сортировки
  9. Reducer сортировки
  10. Тест - Страница продуктов
  11. Домашнее задание - Страница поста

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

  1. Компонент Input
  2. Упражнение - Компонент Textarea
  3. Компонент поиска
  4. Компонент продукта - планирование
  5. Компонент продукта - сетка
  6. Компонент продукта - стили
  7. Склонение слов
  8. Компонент Image
  9. Компонент продукта - адаптив
  10. Тест - Компонент продукта
  11. Домашнее задание - Список комментариев

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

  1. Компонент отзыва
  2. Форма отзыва
  3. useForm
  4. Работа с формами
  5. Проброс ref
  6. Обработка ошибок
  7. Упражнение - Обработка ошибок Rating
  8. Отправка запроса со страницы
  9. useRef
  10. Упражнение - Исправление бага useReducer
  11. Домашнее задание - Работа с формами
  12. Код ревью домашнего задания

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

  1. Вводное видео
  2. Принципы анимации
  3. Анимация меню
  4. Анимация сортировки
  5. Пишем свой hook
  6. useAnimation
  7. Упражнение - Анимация отзывов
  8. Динамическая иконка
  9. Мобильное меню
  10. Жесты и MotionValues
  11. Производительность
  12. Домашнее задание - Анимация на Framer Motion

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

  1. Виды доступности
  2. Цветовая доступность
  3. Доступность меню с клавиатуры
  4. Доступность форм с клавиатуры
  5. Упражнение - доступность сортировки
  6. ARIA атрибуты
  7. Использование Screen Reader
  8. Aria-label и aria-labelledby
  9. Aria-hidden
  10. Добавление landmarks
  11. Доступность форм
  12. Упражнение - Доступность оповещений
  13. Доступность меню и списка
  14. Уменьшение движения
  15. Домашнее задание - Доступность
  16. Код ревью домашнего задания

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

  1. Script
  2. App Router - Расчёт meta
  3. Page Router - Добавление meta на страницу
  4. Установка метрики
  5. Husky
  6. Next export
  7. Страницы 404, 500
  8. Сборка контейнера Docker
  9. Запуск через docker-compose
  10. Github actions

20. Проект - Layout

  1. Структура проекта
  2. Меню и адаптив
  3. Мобильное меню
  4. Футер
  5. Уведомление о подписке
  6. Код ревью - Проект - 1

21. Проект - Каталог

  1. Основные компоненты
  2. Работа с Insomnia
  3. Карточка товара
  4. Запросы на backend
  5. Галерея на главной странице
  6. Код ревью - Проект - 2

22. Проект - Карточка товара

  1. Сборка карточки
  2. Пререндер страниц
  3. Галерея
  4. Отзывы
  5. Ошибка 404
  6. Код ревью - Проект - 3

23. Проект - Корзина товаров

  1. Хранение товаров
  2. Реализация корзины
  3. Избранное
  4. Страница о нас
  5. Код ревью - Проект 4

24. Проект - Авторизации

  1. Отправка корзины
  2. Страница результата заказа
  3. Вход и регистрация
  4. Восстановления пароля
  5. Кабинет заказов
  6. Код ревью - Проект - 5

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

Сессия 1 на 1 с наставником

Рейтинг курса

2.9
рейтинг
0
0
0
0
0

Может быть интересно

обновлено 20.04.2024 09:55
Next.js 14 - с нуля, React TypeScript, Hooks, SSR и CSS Grid

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

Оставить отзыв
Поделиться курсом с друзьями