Курс →Gatsby Pro
В рамках курса мы создадим web-приложение на React, используя популярный фрэймворк Gatsby JS!
Наше приложение - пример того, как выглядит современный блог, который использует библиотеку React, отлично ранжируется в поисковых системах, и где данные (backend) отделены от клиентской части (frontend).
Приложение будет включать админ панель системы управления контентом Sanity CMS (написана на React) и клиентскую часть для отображения страниц постов, категорий и формы отправки email.
Посмотреть демо версию приложения можно здесь.
Купить КурсСтек Технологий
Frontend
- Gatsby JS - для маршрутизации, кэширования, обработки изображений и др. полезных фич.
- Styled Components - для создания стилей СSS в современном Javascript.
Backend
- Sanity CMS - для создания и управления нашим контентом (статьи блога).
- Serverless Function - напишем и разместим на хостинге бессерверную функцию для отправки email-ов из Node.js, используя популярный пакет Nodemailer.
- GraphQL - будем использовать для получения данных внутри приложения.
- Progressive Web App (PWA) - трансформируем наше приложение в Прогрессивное Web Приложение (PWA), которое будет доступно в офф-лайн режиме!
- Пагинация - создадим собственную пагинацию (перемещение по страницам) с нуля!
- React Hooks - будем использовать стандартные, а также создадим кастомные Хуки для получения данных в нашей форме.
- SEO - создадим собственный SEO компонент для ранжирования в поисковых системах.
- Защита формы от спама - используем технику Honeypot для защиты нашей формы от spam ботов.
Василий Муравьев
Web разработчик, автор учебной платформы stackdev.ru и одноименного youtube канала. Участвовал в создании нескольких стартапов в качестве фронтенд разработчика. Более 2-х лет работал frontend разработчиком в крупнейшем ритейлере России - X5 Retail Group.
В свободное время участвую в сторонних проектах в качестве full stack разработчика, где использую React, Node.js + Express и MongoDB.
Видео Уроки в HD Качестве
Gatsby
Базовая Структура + Маршрутизация
- 1Обзор нашего проекта06:49
- 2Структура и страницы в Gatsby JS10:44
- 3Маршрутизация Gatsby05:00
- 4Общий компонент Layout07:11
- 5Глобальные стили Styled Components11:57
- 6Стили для Header и Footer09:01
- 7Добавляем шрифты в Gatsby04:10
Sanity
Схемы данных + Реляционность
- 8Настраиваем Sanity CMS + первый тип данных14:17
- 9Добавляем категории и кастомизируем панель управления13:28
- 10Связываем посты и категории (настраиваем реляционность)13:18
Gatsby
Работа с данными + Шаблоны
- 11Настраиваем Gatsby JS07:08
- 12Настраиваем плагин для получения данных из Sanity17:13
- 13Запросы GraphQL в Gatsby JS11:13
- 14Создаем компонент для отображения постов05:07
- 15Компонент карточка поста10:56
- 16Изображения в Gatsby JS10:25
- 17Добавляем тестовые данные05:09
- 18Статический запрос и фильтрация по категориям07:39
- 19Завершаем работу с фильтрацией по категориям18:58
- 20Шаблон страниц постов и динамическое создание страниц20:05
- 21Завершаем работу над шаблоном страниц постов18:03
- 22Шаблон главной страницы05:46
- 23Шаблон для отображения страниц категорий10:17
Gatsby
Пагинация
- 24Готовим даные10:46
- 25Формируем запрос PageQuery06:31
- 26Создаем компонент Pagination10:22
Gatsby
SEO
- 27Пакет React Helmet03:28
- 28Создаем SEO компонент15:09
Gatsby + Node
Бессерверные функции + Формы
- 29Создаем Serverless функцию18:01
- 30Форма отправки email и кастомный React Хук12:56
- 31Передача данных из формы в бессерверную функцию12:17
- 32Завершаем создание бессерверной функции11:12
- 33Защита формы от спам ботов (технология honeypot)07:30
Gatsby + Sanity
Размещение на Github & Netlify + Aвтоматизация сборки!
- 34Размещение Sanity CMS на хостинге01:30
- 35Создание сборки Gatsby JS01:39
- 36Размещение Gatsby JS на хостинге Netlify15:00
- 37Создаем WebHook Netlify - для автоматизации сборки при изменении данных07:21
Gatsby
Создаем Progressive Web App
- 38Трансформируем React приложение GatsbyJS в Progressive Web App (PWA)11:05
Курс Gatsby PRO
- 38 Видео с пошаговыми инструкциями в HD качестве
- Пожизненная возможность бесплатно получать обновления и дополнения к курсу
- Весь исходный код для нового и готового приложения (файлы и скрипты)
- Доступ в закрытый Telegram канал, где можно задать вопрос и обсудить решения
FAQ
Что необходимо знать перед началом обучения?
Для успешного прохождения курса вам потребуются базовые знания JavaScript (на уровне моего курса JS) и React (на уровне моего курса ReactJS).
Кому подойдет этот курс?
Курс Gatsby Pro отлично подойдет начинающим JS разработчикам, которые хотят улучшить знания ванильного JS и React, а также изучить новые решения для создания современных web-приложений.
Какие базовые знания я приобрету?
- Пройдя курс вы улучшите знания ванильного JS, так как мы будем много работать с данными: преобразовывать массивы и работать с объектами, используя различные методы и др.
- Вы также улучшите базовые знания React. Мы будем использовать встроенные Хуки, а также напишем свой кастомный Хук для отправки данных.
- Вы также разберетесь, что собой представляют бессерверные функции, которые сегодня широко используются на бэкенде при создании современных приложений.
- Вы расширите свой кругозор, изучив что собой представляет GraphQL (современная альтернатива Rest API).
- Узнаете, что собой представляют прогрессивные web-приложения (Progressive Web Apps - PWA) и как сильно Gatsby JS облегчает работу с Service Workers.
Что если я пойму, что этот курс не подходит для меня?
Если вы решите, что по каким-то причинам вам не подходит этот курс - я возвращу ваши деньги.
Почему мы используем именно Sanity CMS?
Сегодня на рынке существует большое количество систем управления контентом типа Headless CMS. Я выбрал Sanity, потому что эта CMS написана на React, сочетает простоту настройки и возможностей кастомизации.
Как быстро я получу доступ к курсу после оплаты?
Вы получите доступ к курсу сразу после оплаты.
На сколько времени выдается доступ к курсу?
Доступ к курсу вы получаете навсегда.
Можно ли скачать курс на компьютер?
К сожалению, нет. Курс можно смотреть только онлайн в своем личном кабинете.
Что Такое Gatsby JS?
Gatsby JS - React фреймворк, с помощью которого можно быстро собрать и опубликовать современное React-приложение. Главное отличие Gatsby от другого популярного React фреймворка NextJS - то, что по сути, Gatsby является так называемым генератором статических сайтов.
То есть все страницы проектов на Gatsby создаются в момент сборки. Именно благодаря этому, приложения, написанные на Gatsby отличаются высокой скоростью и отлично ранжируются в поисковых системах.
Более подробно о Gatsby JS, его отличиях от NextJS и о том, как я использую Gatsby JS в своих собственных проектах - можно узнать из этого видео.
Отзывы о моих уроках (Youtube)