Gatsby - Генератор статических сайтов для React - Полное руководство - Видеоуроки

Gatsby - Static Site Generator For React - Complete Guide
Duration 07:13:27
Открыть все курсы от udemy

Gatsby - Static Site Generator For React - Complete Guide - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Course Introduction 00:10:20
  • Урок 2. Setting Up The Development Environment 00:03:46
  • Урок 3. Setting Up Gatsby & Creating Your First Gatsby Project 00:13:40
  • Урок 4. Exploring The Project Structure 00:16:59
  • Урок 5. Working With Pages 00:12:22
  • Урок 6. Woking With Components 00:11:21
  • Урок 7. Linking Between Pages 00:04:53
  • Урок 8. Working With Assets 00:07:33
  • Урок 9. Using Layout Components 00:18:17
  • Урок 10. Global Styles 00:08:44
  • Урок 11. Using Typography.js 00:15:04
  • Урок 12. Using CSS Modules 00:13:54
  • Урок 13. Using Styled Components 00:13:22
  • Урок 14. GraphQL In Gatsby & Using GraphiQL 00:15:32
  • Урок 15. Adding A Page Query 00:07:31
  • Урок 16. Using A StaticQuery 00:08:28
  • Урок 17. Using A Source Plugin 00:11:29
  • Урок 18. Displaying Source Plugin Data On Pages 00:09:49
  • Урок 19. Using A Transformer Plugin 00:13:21
  • Урок 20. Displaying Transformer Plugin Data On Pages 00:15:17
  • Урок 21. Creating Slugs With Node 00:15:41
  • Урок 22. Creating Pages With Node 00:14:51
  • Урок 23. Creating Pages From Markdown Files 00:11:12
  • Урок 24. Linking To Pages 00:05:42
  • Урок 25. Installing Image Plugins 00:08:34
  • Урок 26. Querying Images 00:06:46
  • Урок 27. Displaying Images in Pages 00:09:39
  • Урок 28. Add Offline Support 00:10:23
  • Урок 29. Add A Manifest File To Your Gatsby Site 00:05:45
  • Урок 30. Adding Page Metadata With React Helmet 00:09:06
  • Урок 31. Building A Static Site For Production 00:04:46
  • Урок 32. Deploying To Netlify 00:14:51
  • Урок 33. Starting A New Gatsby Project And Setup Contentful 00:18:05
  • Урок 34. Connecting Gatsby To Contentful 00:20:57
  • Урок 35. Programmatically Create Post Pages From Contentful 00:12:27
  • Урок 36. Implement The Blog Post Template 00:13:22
  • Урок 37. Outputting A List Of Posts 00:09:01
  • Урок 38. Displaying Images From Contentful 00:10:37

Создавайте потрясающие сверхбыстрые веб-сайты с помощью React и GraphQL, начинайте работу со стеком JAM и подходом Headless CMS. В этом курсе вы узнаете, как создавать удивительные и сверхбыстрые статические веб-сайты с помощью Gatsby.js. Gatsby - это невероятно быстрый современный генератор сайтов для React.

Gatsby использует мощную предварительную конфигурацию для создания веб-сайта, который использует

  • статические файлы для невероятно быстрой загрузки страниц,
  • service workers,
  • разделение кода,
  • рендеринг на стороне сервера
  • интеллектуальная загрузка изображений,
  • оптимизация assets,
  • и предварительная выборка данных.

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

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

Нет лучшего времени, чтобы начать с Gatsby !

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

Gatsby отлично подходит для обеспечения выдающегося пользовательского опыта в браузере, а также является строительным блоком при реализации стека JAM (JavaScript, API, Markup).

Используя Gatsby, вы можете применять существующие навыки веб-разработки (современный JavaScript, React, Node.js и GraphQL). Кривая обучения чрезвычайно крутая, и вы быстро сможете получить впечатляющие результаты.

Gatsby объединяет многие из самых популярных тенденций веб-разработки прямо сейчас: React, GraphQL, создание статических сайтов, JAM-стек, подход Headless CMS...  добавьте Gatsby.js в свой набор навыков прямо сейчас и оставайтесь на переднем крае технологий!

Подход Headless CMS

Основной особенностью Gatsby является загрузка данных из множества различных источников данных с использованием одного общего подхода (GraphQL) для переноса данных на страницы и компоненты. Эта функция позволяет вам управлять вашим контентом в любой CMS или серверной части. Часто этот подход называется «Headless CMS», и Gatsby является идеальным инструментом для применения этого подхода на практике и присоединения внешнего уровня к любой CMS.

В разделах курса вы узнаете:

  • Используйте Gatsby для создания сверхбыстрых статических сайтов с помощью React и GraphQL
  • Работа со страницами, компонентами и активами
  • Применение стилей в Gatsby с использованием глобальных стилей, модулей CSS или styled components 
  • Встроенный слой данных Gatsby и  GraphQL
  • Получение данных с использованием статических запросов и запросов страниц
  • Используйте систему плагинов Gatsby 
  • Используйте исходные плагины для подключения к источникам данных
  • Используйте плагины для преобразования данных в правильный формат
  • Программно создавать страницы
  • Работа с изображениями в Gatsby 
  • Создание сайта Gatsby для производства и развертывания
  • и многое другое...

Твоя оценка

6 0
Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

07-08-2018 en 25 уроков
leveluptutorials Pro Gatsby
В этой серии мы погружаемся в Gatsby.js, создавая блог с markdown, Netlify CMS и Contentful и охватываем все: от анимации страниц до нескольких вариантов хостинга, которые автоматически восстанавливаются. Наслаждайтесь мощью новейших веб-технологий - React.js, Webpack, современного JavaScript и CSS... все настроено и ожидает вас.Богатая система плагинов Gatsby позволяет создавать сайты с нужными вам данными - из одного или нескольких источников:...
Duration 04:43:27
16 2
04-09-2018 en 26 уроков
leveluptutorials Pro Gatsby 2
В этой серии уроков мы погрузимся глубже в Gatsby версии 2. Эта версия курса полностью переработана и пересоздана с моего курса Pro Gatsby, и содержит тонну нового контента, который покрывает не только основы Gatsby.
Duration 04:01:52
29 0
08-08-2018 en 22 урока
leveluptutorials Headless WordPress
Узнайте, как можно легко создать сайт WordPress с помощью как Next.js, так и Gatsby. В этой серии мы рассматриваем подводные камни и методы, используемые для создания невероятно быстрых сайтов WordPress с помощью React.
Duration 04:14:01
10 1
10-01-2019 en 44 урока
udemy The Gatsby Masterclass
Создавайте невероятно быстрые, многофункциональные и в целом потрясающие приложения React с платформой Gatsby. Хотите сделать самые быстрые, самые производительные и в целом лучшие приложения React? Смотрите не дальше, чем Gatsby. Этот курс - лучшее руководство, которое вы найдете для изучения фреймворка Gatsby. В нем мы создадим полный блог и онлайн-магазин, от начала проекта до развертывания в Интернете.
Duration 03:58:33
4 0
30-04-2019 en 1 урок
frontendmasters Introduction to Gatsby
На этом семинаре вы узнаете, как создавать быстрые приложения и веб-сайты с помощью React, используя Gatsby, генератор статических PWA (Progressive Web App). Более 50% людей покинут мобильный сайт, если его загрузка займет более 3 секунд. Если вы не готовы отказаться от половины своих потенциальных клиентов, производительность в современной сети больше не является просто галочкой. К счастью, существует множество инструментов, которые помогут вам...
Duration 05:40:19
5 1

Последнее добавленное

100 дней веб-разработки с Python

100 дней веб-разработки с Python

en
# 100DaysOfWeb в Python - это курс, который обеспечит вам успех, обучая вас веб-разработке на Python. Каждые 4 дня, посвященные другой концепции, вы будете поражены тем, сколько веб-технологий и библиотек Python вы изучите в этом путешествии. Присоединяйтесь к курсу и начните свое 100-дневное...
Практический JavaScript

Практический JavaScript

ru
Для изучения курса желательно знание HTML + CSS. Знание основы JS будет плюсом, но не обязательно. Делаем форму для регистрации и входа пользователей. На нативном JavaScript (ES6). Все эффекты прописываем с помощью JS самостоятельно. Пишем проверку (валидацию) формы с выводом ошибок.
Android юнит-тестирование и TDD

Android юнит-тестирование и TDD

en
Этот курс научит вас всему, что вам нужно знать о юнит тестировании и разработке через тестирование в приложениях для Android. Он разработан, чтобы быстро приступить к работе с юнит тестированием с использованием Android Studio и JUnit, выполнив серию тщательно разработанных практических упражнений.
Animating React

Animating React

en
В этой серии уроков мы с головой погрузимся в анимацию в React. Мы будем использовать библиотеку React Spring и physics based анимацию. Мы будем использовать очень много клевых техник которые можно и нужно использовать в реальных приложениях. Мы будем строить меню, модальные окна и все с чем вы...
chat
logo