Курс Gatsby Pro

Научись создавать современные React приложения на Gatsby JS, используя:
React JSGraphQLJavascriptHeadless CMSStyled ComponentsServerless Functions

В рамках курса мы создадим web-приложение на React, используя популярный фрэймворк Gatsby JS!

Наше приложение - пример того, как выглядит современный блог, который использует библиотеку React, отлично ранжируется в поисковых системах, и где данные (backend) отделены от клиентской части (frontend).

Приложение будет включать админ панель системы управления контентом Sanity CMS (написана на React) и клиентскую часть для отображения страниц постов, категорий и формы отправки email.

Посмотреть демо версию приложения можно здесь.

Купить Курс

Стек Технологий

Frontend

курс Gatsby
React.js
React - Javascript библиотека для создания современных пользовательских интерфейсов (UI), которая изменила наш подход к разработке фронтенда.
  • Gatsby JS - для маршрутизации, кэширования, обработки изображений и др. полезных фич.
  • Styled Components - для создания стилей СSS в современном Javascript.

Backend

курс Gatsby
Sanity.io
Sanity — Headless CMS (система управления контентом нового поколения). Отвечает только за управление «чистым» контентом. Бэкенд («тело») при таком подходе не связан с фронтендом («головой»).
  • Sanity CMS - для создания и управления нашим контентом (статьи блога).
  • Serverless Function - напишем и разместим на хостинге бессерверную функцию для отправки email-ов из Node.js, используя популярный пакет Nodemailer.
  • GraphQL - будем использовать для получения данных внутри приложения.
  • Progressive Web App (PWA) - трансформируем наше приложение в Прогрессивное Web Приложение (PWA), которое будет доступно в офф-лайн режиме!
  • Пагинация - создадим собственную пагинацию (перемещение по страницам) с нуля!
  • React Hooks - будем использовать стандартные, а также создадим кастомные Хуки для получения данных в нашей форме.
  • SEO - создадим собственный SEO компонент для ранжирования в поисковых системах.
  • Защита формы от спама - используем технику Honeypot для защиты нашей формы от spam ботов.
курс gatsbyjs

Василий Муравьев

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

Курс по разработке React приложения
на Gatsby JS

курс react
  • 38 Видео с пошаговыми инструкциями в HD качестве
  • Пожизненная возможность бесплатно получать обновления и дополнения к курсу
  • Весь исходный код для нового и готового приложения (файлы и скрипты)
  • Доступ в закрытый Telegram канал, где можно задать вопрос и обсудить решения

FAQ

Что необходимо знать перед началом обучения?

Для успешного прохождения курса вам потребуются базовые знания Javascript и React (на уровне моего курса React001).

Кому подойдет этот курс?

Курс 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, сочетает простоту настройки и возможностей кастомизации.

Как быстро я получу доступ к курсу после оплаты?

Вы получите доступ к курсу сразу после оплаты.

На сколько времени выдается доступ к курсу?

Доступ к курсу вы получаете навсегда.

Можно ли скачать курс на компьютер?

К сожалению, нет. Курс можно смотреть только онлайн в своем личном кабинете.

Отзывы о моих уроках (Youtube)

  • отзыв о курсах - 0
  • отзыв о курсах - 1
  • отзыв о курсах - 2
  • отзыв о курсах - 3
  • отзыв о курсах - 4
  • отзыв о курсах - 5
  • отзыв о курсах - 6
  • отзыв о курсах - 7
  • отзыв о курсах - 8

Что Такое Gatsby JS?

Gatsby JS - React фреймворк, с помощью которого можно быстро собрать и опубликовать современное React-приложение. Главное отличие Gatsby от другого популярного React фреймворка NextJS - то, что по сути, Gatsby является так называемым генератором статических сайтов.

То есть все страницы проектов на Gatsby создаются в момент сборки. Именно благодаря этому, приложения, написанные на Gatsby отличаются высокой скоростью и отлично ранжируются в поисковых системах.

Более подробно о Gatsby JS, его отличиях от NextJS и о том, как я использую Gatsby JS в своих собственных проектах - можно узнать из этого видео.