Gatsby JS, Contentful & Gatsby Cloud (Gatsby JS V3 2021)

您想提高您的 React JS 技能并增加您作为前端开发人员的价值吗？

– “Gatsby 可让您使用您的数据构建速度极快的网站，无论来源如何。将您的网站从传统的 CMS 中解放出来，飞向未来。”

在本课程中，我们将从 Contentful CMS 数据源构建 Gatsby 站点，使用样式组件设置我们的应用程序的样式，并部署到 Gatsby Cloud！

通过使用 Contentful CMS 后端学习 Gatsby.js 来提升您的 React 技能！Gatsby JS 使用 React JS 和 GraphQL 从给定的数据集生成和构建静态页面。本课程将着眼于将 Contentful 设置为无头 CMS，同时使用 GatsbyJS 从 Contentful 数据（例如页面、菜单、媒体（以及更多！）使用 GraphQL 查询该数据）生成极快的服务器渲染 React 网站。

在本课程中，我们将创建一个带有分页博客部分和联系页面的登陆页面网站，查看本地 Gatsby JS 和 Contentful 的初始设置和开发，基于 Contentful 数据在 Gatsby 中创建 React 组件，并使用 GraphQL 查询 Contentful 数据自动生成我们的静态页面。

没有联系表单的登陆页面是不完整的，因此我们将在 Gatsby 中创建一个联系页面，我们可以在其中更新 Contentful 中的表单字段，并使用 Formspree 来获取用户的电子邮件地址和各种其他详细信息。

我们将看看如何使用 GraphiQL 浏览器工具通过 GraphQL 查询内容数据。一旦我们熟悉并熟悉使用 GatsbyJS 和 Contentful 进行开发，我们将继续使用 Gatsby Cloud 设置和部署实时网站，每次我们更新 Contentful 后端中的内容时都会重新构建我们的静态网页，并允许我们在使用 Gatsby Cloud Preview 发布更改之前预览更改。

建议您具备 React 的基本知识。我们将涵盖 Gatsby.js、Contentful、GraphQL 和 styled-components 的所有其他内容！

加速超越与盖茨比的竞争！

Gatsby.js 构建了最快的网站。Gatsby 不会在请求时等待生成页面，而是预先构建页面并将它们提升到全球服务器云中（我们将为此使用 Gatsby Cloud）——随时准备立即交付给您的用户，无论他们身在何处。

使用 Gatsby 的一些优势包括：

无需等待 API 响应

无需等待根据请求的数据呈现组件

没有加载微调器！

无需等待服务器编译页面以提供给浏览器 – 这些页面已经用 Gatsby 预编译并准备好立即提供给您的用户！

我们当然会在这个 Gatsby 课程中涵盖很多内容！

Genre: eLearning | MP4 | Video: h264, 1280×720 | Audio: AAC, 48.0 KHz
Language: English | Size: 1.55 GB | Duration: 3h 39m

What you’ll learn
Increase your value and improve your knowledge as a front-end / React JS developer
Learn Gatsby
Create a static, server-compiled, content-driven website using Gatsby JS (with React JS & GraphQL)
Learn how to use GraphQL and GraphiQL in Gatsby to query data stored in Contentful CMS
Deploy your Gatsby JS static website and rebuild whenever our Contentful content changes using Gatsby Cloud
Use Formspree from within Gatsby to capture user’s email address and personal details
Style your React and Gatsby apps with styled-components

Description
Do you want to improve your React JS skills and increase your value as a front-end developer?

– “Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future.”

In this course we’ll be building a Gatsby site from a Contentful CMS data source, style our app using styled-components, and deploying to Gatsby Cloud!

Level-up your React skillset by learning Gatsby.js with a Contentful CMS backend! Gatsby JS uses React JS and GraphQL to generate and build static pages from a given dataset. This course will look at setting up Contentful as a headless CMS while using GatsbyJS to generate a blazing-fast server-rendered React website from Contentful data, such as pages, menus, media, (and more!) using GraphQL to query that data.

We’ll be creating a landing page website with a paginated blog section and contact page in this course, looking at initial setup and development of Gatsby JS and Contentful locally, creating React components in Gatsby based on Contentful data, and querying Contentful data with GraphQL to automatically generate our static pages.

No landing page is complete without a contact form so we’ll be creating a contact page in Gatsby where we can update our form fields within Contentful and use Formspree to capture our user’s email address and various other details.

We’ll look at how we can query Contentful data with GraphQL using the GraphiQL browser tool. Once we’re familiar and comfortable developing with GatsbyJS and Contentful, we’ll progress onto setting up and deploying a live website using Gatsby Cloud that re-builds our static web pages every time we update content in our Contentful backend, as well as allowing us to preview changes before publishing them using Gatsby Cloud Preview.

It’s recommended you have rudimentary knowledge of React. We’ll be covering everything else from Gatsby.js, Contentful, GraphQL, and styled-components!

Speed past the competition with Gatsby!

Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, Gatsby pre-builds pages and lifts them into a global cloud of servers (we’ll be using Gatsby Cloud for this) – ready to be delivered instantly to your users wherever they are.

Some advantages of using Gatsby include:

No waiting for API responses

No waiting to render components based on requested data

No loading spinners!

No waiting for a server to compile a page to serve to the browser – these pages are already pre-compiled with Gatsby and ready to serve instantly to your users!

We certainly cover a lot in this Gatsby course!

Who this course is for:
React developers who want to increase their value and skillset
React developers who want to get ahead of the game and learn more than the average developer
Developers who want to generate and create rapid websites and landing pages for their clients