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

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

1 240 ₽
нет рассрочки

Next.js - готовый к production framework для React - самой популярной JavaScript библиотеки на сегодняшний день. Он позволяет разрабатывать производительные, SEO-friendly сайты с использованием Server Side Rendering (SSR) и статической генерацией страниц.

При этом от вас требуется только базовое знание CSS, HTML и JavaScript, так в рамках курса мы не только разберём Next.js, но и React с нуля. При этом мы будем писать не просто какой-то учебный проект, а реальный production сайт, посвящённый рейтингам.

Мы детально разберём:

  • TypeScript
  • Настройку окружения и сборку проекта
  • Работу в Figma
  • React Hooks
  • Создание компонентов
  • Контекст
  • Роутинг NextJS
  • Вёрстку на CSS grid
  • Как работает Server Side Rendering (SSR) и статическая генерация страниц
  • Встроенные компоненты Next.js
  • Работу с формами через react-hook-form
  • Анимацию с помощью Framer Motion
  • Доступность с клавиатуры и работу ScreenReader
  • Подготовку приложения к production и работу Docker

Каждый модуль содержит как теоретическую часть, так и live-code, где мы в месте будем создавать приложение с нуля. В конце каждого модуля вас ожидает тест, который позволит укрепить ваши знания, а небольшие упражнения - попрактиковаться писать код.

В результате курса вы получите знания и навыки, которые необходимы frontend разработчику на реальных проектах.

!!! В рамках данного курса, я сотрудничаю с фондом Движение вверх, оказывающий помощь детям с инвалидностью. Фонд помогает детям пройти реабилитацию в специализированных центрах, и дает шанс вернуться к обычной жизни. 10% от продаж данного курса я буду ежемесячно отправлять в фонд.

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

Приобретаемые навыки
3
TypeScript
5
React Hooks
6
Grid CSS
7
SSR
8
Framer
9
ScreenReader
11
VSCode
12
JSX
13
React Devtools
15
SVG
16
useState
17
useEffect
18
HOC
19
CSS
20
useContext
21
Вёрстка
22
useRouter
23
Regexp
24
useForm
25
useRef
27
Обеспечение высокой доступности
28
Husky
Сертификат, ссылками на который можно делиться с другими людьми

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

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

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

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

Stepik — образовательная платформа и конструктор
онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем
в проведении олимпиад и программ переподготовки.
Наша цель — сделать образование открытым и удобным.

Помогаем учиться, а также создавать свои курсы и обучать


Первые учебные материалы были размещены на платформе в 2013 году. Сегодня среди охваченных курсами тем: программирование, информатика, математика, статистика
и анализ данных, биология и биоинформатика, инженерно-технические и естественные науки. Онлайн-курсы, размещенные на Stepik, неоднократно становились призерами конкурсов онлайн-курсов, а система автоматизированной проверки задач используется в ряде курсов на платформах Coursera и edX. Также Stepik активно развивает направление адаптивного обучения, где каждый сможет изучать материал, подобранный индивидуально под свой уровень знаний.

 

Stepik является также площадкой для проведения конкурсов и олимпиад — среди мероприятий — отборочный этап Олимпиады НТИ, онлайн-этап акции Тотальный диктант, международная олимпиада по биоинформатике.

 

Stepik — многофункциональная и гибкая платформа для создания образовательных материалов. Вы можете создавать онлайн курсы, интерактивные уроки с видео и различными типами заданий для учащихся, приватные курсы для ограниченной аудитории, проводить олимпиады и конкурсы, запускать программы профессиональной переподготовки и повышения квалификации, а также обучать своих сотрудников и клиентов.

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

Введение

  1. Преимущества NextJS
  2. Как устроен курс
  3. Обзор проекта
  4. Update - Обзор курсов

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

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

TypeScript

  1. Вводное видео
  2. Компилятор TypeScript
  3. Базовые типы
  4. Interfaces and Types
  5. Упражнение - Interfaces
  6. Литеральные типы
  7. Enums
  8. Tuple
  9. Generics
  10. JSX
  11. Тест - TypeScript

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

  1. Обзор модуля
  2. Развертка проекта
  3. Структура проекта
  4. Настройка eslint
  5. Настройка stylelint
  6. Отладка в VSCode
  7. React Dev Tools
  8. Тест - Старт проекта

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

  1. Жизненный цикл React
  2. Компонент head
  3. React Fragment
  4. Компонент Document
  5. Тест - Компоненты Head и Document

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

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

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

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

Statefull компоненты

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

HOC компоненты

  1. Что такое HOC?
  2. Layout
  3. Пишем HOC withLayout
  4. Тест - HOC компоненты

CSS Grid

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

Server side rendering

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

Контекст

  1. useContext
  2. Пишем свой контекст
  3. Вёрстка меню
  4. Тест - Контекст

Роутинг

  1. Компонент Link
  2. useRouter
  3. Упражнение - Добавление страниц
  4. Структура роутинга
  5. Вёрстка Sidebar
  6. Тест - Роутинг

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

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

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

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

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

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

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

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

Доступность

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

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

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

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

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

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

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

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

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