udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Gatsby JS и Prismic: создание быстрых Gatsby сайтов | Gatsby2020
Gatsby JS & Prismic: Build RAPID Gatsby sites | Gatsby 2020
★5 (всего оценок - 6)
Продолжительность
2 ч 55 мин
Категория
GatsbyКоличество уроков
32 Видео
Дата добавления
4 дек. 2020 г., 23:29
Язык
Английский
Дата выхода
14 авг. 2020 г., 03:00
Дата обновления
29 апр. 2026 г., 09:02
Хотите создавать молниеносно быстрые сайты на React?Курс по Gatsby JS и Prismic поможет вам прокачать навыки frontend‑разработки, освоить работу со статической генерацией и headless CMS, а также научиться строить современные, масштабируемые и SEO‑оптимизированные веб‑проекты.
Что вы узнаете в этом курсе
Материал курса сфокусирован на практическом изучении Gatsby.js и headless CMS Prismic. Вы шаг за шагом создадите готовый лендинг, освоив ключевые инструменты и приёмы, необходимые современному frontend‑разработчику.
Gatsby.js: фундамент и преимущества
Вы разберётесь, почему Gatsby считается одним из самых быстрых решений для разработки сайтов и какие задачи он помогает решать:
- использование React и GraphQL для сборки данных;
- предварительная статическая генерация страниц;
- минимальное время загрузки и отказ от «тяжёлых» серверных запросов;
- интеграция с CDN для мгновенной доставки контента пользователю.
Prismic как headless CMS
Курс объясняет, как подключить Prismic и использовать его в качестве гибкого и удобного источника данных:
- создание структур данных (страницы, меню, медиа, блоки контента);
- запрос данных через GraphQL;
- динамическое обновление страниц без редеплоя кода.
Практическая часть курса
Вместе с преподавателем вы соберёте полностью рабочий сайт, последовательно проходя ключевые этапы разработки.
Старт проекта и настройка среды
- инициализация проекта Gatsby;
- локальная настройка Prismic;
- структурирование данных и подключение первого контента.
Создание компонентов и страниц
Вы научитесь строить гибкую компонентную архитектуру на React в рамках Gatsby:
- создание шаблонов страниц;
- динамическая генерация страниц с использованием GraphQL;
- работа со стилями через styled‑components.
Форма обратной связи с Netlify Forms
Отдельный модуль курса посвящён созданию контактной страницы:
- динамическое управление полями формы через Prismic;
- подключение серверной обработки на Netlify Forms;
- сбор и хранение пользовательских данных.
Работа с GraphQL и GraphiQL
Вы научитесь создавать точные запросы к данным Prismic, проверять их в GraphiQL и использовать в Gatsby для генерации разметки и компонентов.
Деплой и автоматизация
В финале курса вы развернёте готовый сайт на Netlify и настроите автоматическую пересборку проекта при обновлении контента в Prismic.
Для кого этот курс
Курс подходит разработчикам, уже знакомым с основами React, которые хотят расширить навыки и освоить современные инструменты для создания быстрых сайтов на основе статической генерации.
Почему Gatsby — отличное решение
Основные преимущества Gatsby:
- Нет задержек API‑запросов
- Нет рендеринга компонентов на стороне клиента
- Молниеносная загрузка страниц
Все страницы заранее генерируются и размещаются в глобальной сети CDN, что обеспечивает максимальную производительность и мгновенную отдачу пользователю.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:05:11Introduction - overview of the Gatsby JS + Prismic course
- Урок 2. 00:03:45Gatsby overview and project setup
- Урок 3. 00:04:45Prismic setup and overview
- Урок 4. 00:05:12Linking Gatsby to Prismic
- Урок 5. 00:00:46Querying Prismic data using the GraphiQL tool
- Урок 6. 00:03:05Overview of GraphQL
- Урок 7. 00:04:25Generating pages from Prismic data in Gatsby
- Урок 8. 00:07:32Page queries in Gatsby
- Урок 9. 00:08:03Rendering Prismic HTML content correctly in Gatsby
- Урок 10. 00:05:41Page layout and adding navigation to Prismic
- Урок 11. 00:04:21Styling in Gatsby with React Styled Components
- Урок 12. 00:09:16Querying the navigation menu data from Gatsby
- Урок 13. 00:04:59Styling the header with styled components
- Урок 14. 00:04:58Adding the branding to the header in Gatsby
- Урок 15. 00:06:34Slice zones in prismic + creating the homepage
- Урок 16. 00:07:47Rendering the hero custom slice in Gatsby / React
- Урок 17. 00:07:31Adding background image to hero + styling in Gatsby with React styled components
- Урок 18. 00:06:43Add call to action grid custom slice in Prismic
- Урок 19. 00:08:18Rendering + styling call to action grid in Gatsby using React styled components
- Урок 20. 00:06:52Finishing the styling of the call to action grid
- Урок 21. 00:06:00Add the price list custom slice in Prismic
- Урок 22. 00:07:19Rendering and styling the price list in Gatsby
- Урок 23. 00:06:05Finishing the styling of the price list in Gatsby
- Урок 24. 00:02:56Adding the contact page data to prismic
- Урок 25. 00:08:56Rendering the contact page in Gatsby
- Урок 26. 00:03:48Refactoring RichText component to render Gatsby Link components
- Урок 27. 00:03:34Rendering new RichText with internal Gatsby links on the contact page
- Урок 28. 00:07:33Saving custom slices to the slice library
- Урок 29. 00:05:55Adding more content to the pages & updating styles
- Урок 30. 00:03:57Deploy Gatsby site using Netlify
- Урок 31. 00:02:28Testing out Netlify forms
- Урок 32. 00:01:39Auto-rebuild our Gatsby site any time Prismic data changes (Netlify hooks)
Автор - udemy
Комментарии
webuxmotionI like this course