react实战课程_React + GraphQL 2020速成课程

react实战课程

Have you heard a lot about using React with GraphQL but don't know how to combine them to build amazing apps? In this crash course, you'll learn how to do just that by building a complete social blogging app.

您是否听说过将React与GraphQL一起使用的很多知识，但不知道如何将它们结合起来以构建出色的应用程序？ 在本速成课程中，您将学习如何通过构建完整的社交博客应用程序来做到这一点。

Within an afternoon, you will gain the core skills to build your own React and GraphQL projects.

下午，您将获得构建自己的React和GraphQL项目的核心技能。

Want to get started now? You can access the entire course right here.

想立即开始吗？ 您可以在此处访问整个课程。

为什么您应该通过GraphQL学习React (Why you should learn React with GraphQL 🎓)

React is the go-to library for building amazing app experiences with JavaScript. GraphQL, on the other hand, is a tool that gives us a better, more straightforward means of getting and changing our data.

React是使用JavaScript构建令人惊叹的应用程序体验的入门库。 另一方面，GraphQL是一种工具，它为我们提供了一种更好，更直接的方式来获取和更改数据。

That data could be from a standard database (as we'll be using in our app) or as React frameworks like Gatsby have made possible, even from static files such as markdown files. Regardless of how it's stored, GraphQL makes working with data in our apps better.

这些数据可能来自标准数据库(我们将在应用程序中使用)，也可能来自Gatsby之类的React框架，甚至来自诸如markdown文件之类的静态文件。 无论如何存储，GraphQL都能更好地处理我们应用程序中的数据。

We'll see how to leverage the powers of React and GraphQL by creating a social blogging app from start to finish, where you can create, read, edit and delete posts.

我们将了解如何通过从头到尾创建一个社交博客应用程序来利用React和GraphQL的功能，您可以在其中创建，阅读，编辑和删除帖子。

Click to access the course

点击进入课程

我们将使用什么工具🛠️ (What tools we'll be using 🛠️)

The crash course is meant for developers who are somewhat familiar with React (including the core React Hooks, such as

useState

and

useEffect

), but aren't familiar with GraphQL yet.

速成课程适用于那些对React有点熟悉(包括核心React Hooks，例如

useState

和

useEffect

)，但还不熟悉GraphQL的开发人员。

Basic React knowledge is assumed, but GraphQL knowledge is not required. We'll cover all the core GraphQL concepts you need along the way.

假定具有基本的React知识，但不需要GraphQL知识。 我们将介绍您一路需要的所有核心GraphQL概念。

Throughout the course, we'll utilize the following technologies to create our app:

在整个课程中，我们将利用以下技术来创建我们的应用程序：

• React (to build our user interface)

  React (构建我​​们的用户界面)

• GraphQL (to get and change data in a declarative way)

  GraphQL (以声明的方式获取和更改数据)

• Apollo Client (to allow us to use React and GraphQL together)

  Apollo客户端 (允许我们一起使用React和GraphQL)

• Hasura (to create and manage our GraphQL API + database)

  Hasura (用于创建和管理我们的GraphQL API +数据库)

To top it off, we'll be using the online IDE CodeSandbox. This will allow us to code our entire application within the browser in realtime, without the need to create any files, folders, or install dependencies on our own.

最重要的是，我们将使用在线IDE CodeSandbox。 这将使我们能够在浏览器中实时对整个应用程序进行编码，而无需自己创建任何文件，文件夹或安装依赖项。

从头开始创建GraphQL API (Creating a GraphQL API from scratch)

To get started working with GraphQL, we'll see how to make an entire GraphQL API from scratch that will communicate with our database.

要开始使用GraphQL，我们将看到如何从头开始制作将与我们的数据库进行通信的整个GraphQL API。

Fortunately, using the (free) service Hasura, this process is very simple and straightforward. Within seconds, we'll see how to create and deploy a complete GraphQL API to the web, which is connected to a Postgres database that will take care of storing our app data.

幸运的是，使用(免费)服务Hasura ，此过程非常简单明了。 在几秒钟内，我们将看到如何创建完整的GraphQL API并将其部署到Web，并将其连接到Postgres数据库，该数据库将负责存储我们的应用程序数据。

Click to watch this lecture

点击观看本讲座

熟悉GraphQL (Getting familiar with GraphQL)

In the second lecture, we'll cover how to write in the GraphQL language using our API's built-in console called GraphiQL.

在第二讲中，我们将介绍如何使用我们的API内置控制台GraphiQL来以GraphQL语言编写 。

First, we will create a table in our database for all of our posts data. After which, Hasura will automatically create the queries and mutations we need, which are the names of GraphQL operations that allow us to get and change data in our database.

首先，我们将在数据库中为所有职位数据创建一个表。 之后，Hasura将自动创建我们需要的查询和变异 ，这是GraphQL操作的名称，可让我们获取和更改数据库中的数据。

Throughout this lesson, we'll get very familiar performing queries and mutations in GraphiQL, which will enable us to get entire sets of posts and individual posts, as well as to create, update, and delete our individual post data.

在本课程中，我们将非常熟悉GraphiQL中的执行查询和变异，这将使我们能够获取整套帖子和单个帖子，以及创建，更新和删除单个帖子数据。

Click to watch this lecture

点击观看本讲座

使用Apollo Client将React与我们的GraphQL API连接 (Connecting React with our GraphQL API using Apollo Client)

Now that we're comfortable with using GraphQL and understand its core features, we'll see how to connect it with our React client.

现在我们已经习惯了使用GraphQL并了解它的核心功能，我们将看到如何将其与React客户端连接。

The way that we connect our React app with the GraphQL API we created is through a library called Apollo. We'll see how to set up the Apollo client, by providing the GraphQL endpoint, which points to our API, like so:

将React应用程序与创建的GraphQL API连接起来的方式是通过一个名为Apollo的库。 我们将通过提供指向我们的API的GraphQL端点，来了解如何设置Apollo客户端，如下所示：

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
uri: "https://react-graphql.herokuapp.com/v1/graphql"
});

With our newly created client, we have the ability to execute any GraphQL operation through React. To do this, however, we need to pass our client to our entire to all of our React components. We do that with the help of the Apollo provider, as you see below:

使用我们新创建的客户端，我们可以通过React执行任何GraphQL操作。 为此，我们需要将客户传递给我们所有的React组件。 我们将在Apollo提供程序的帮助下完成此操作，如下所示：

Click to watch this lecture

点击观看本讲座

使用useQuery获取帖子 (Getting posts with useQuery)

After setting up our client, we'll see how to execute different GraphQL operations with them, using some special React hooks that come with the package

@apollo/react-hooks

.

设置好客户端之后，我们将使用包

@apollo/react-hooks

随附的一些特殊的React钩子，来了解如何对它们执行不同的GraphQL操作。

The hook that allows us to query for data with GraphQL is called

useQuery

. With it, we'll first see how to get and display all of our post data in our homepage.

允许我们使用GraphQL查询数据的挂钩称为

useQuery

。 有了它，我们首先将了解如何在我们的主页中获取和显示所有帖子数据。

Additionally, we'll learn how to write our GraphQL queries directly in our JavaScript files with the help of a special function called

gql

.

此外，我们将学习如何借助特殊功能

gql

在JavaScript文件中直接编写GraphQL查询。

import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";

export const GET_POSTS = gql`
query getPosts {
posts {
id
title
body
createdAt
}
}
`;

function App() {
const { data, loading } = useQuery(GET_POSTS);

if (loading) return <div>Loading...</div>;
if (data.posts.length === 0) return <Empty />;

return (
<>
<header className={classes.header}>
<h2 className={classes.h2}>All Posts</h2>
<Link to="/new" className={classes.newPost}>
New Post
</Link>
</header>
{data.posts.map(post => (
<Post key={post.id} post={post} />
))}
</>
);
}

使用useMutation创建和编辑新帖子 (Creating and editing new posts with useMutation)

After that, we'll see how to create new posts with the

useMutation

hook. In order to do this, we'll take a look at how to work with GraphQL variables to pass our mutation dynamic values that will change with each execution.

之后，我们将看到如何使用

useMutation

钩子创建新帖子。 为了做到这一点，我们将看一下如何使用GraphQL变量传递我们的突变动态值，该值将随着每次执行而变化。

Following that we'll take a look at how to edit our posts. To do so, we'll need to fetch an individual post and display it within our form, so that our user can make changes to the data. Then we'll need to execute a mutation that will perform the update, based on the posts id.

接下来，我们将研究如何编辑帖子。 为此，我们需要获取单个帖子并将其显示在表单中，以便我们的用户可以更改数据。 然后，我们需要根据帖子ID执行一个变异来执行更新。

Click to watch this lecture

点击观看本讲座

处理加载和错误 (Handle loading and errors)

In the following lecture, we'll cover some essential patterns for handling the process of loading our data.

在下面的讲座中，我们将介绍一些用于处理数据加载过程的基本模式。

It's important to do so when we execute a mutation, to make sure we don't submit our forms multiple times as our mutation is being executed. We'll also take a look at how to handle errors in the event that our mutation is not executed correctly.

在执行变异时，这样做很重要，以确保在执行变异时不会多次提交表单。 我们还将研究在突变未正确执行的情况下如何处理错误。

Click to watch this lecture

点击观看本讲座

删除帖子 (Deleting posts)

Finally, we'll cover how to delete posts from our app. First, we'll confirm that the user wants to actually delete the post that they've made, then perform the mutation.

最后，我们将介绍如何从应用程序中删除帖子。 首先，我们将确认用户是否要删除他们发表的帖子，然后执行变异。

Additionally, we'll take a look at how to update our UI in response to mutations with  the helpful

refetch

function that Apollo gives us. It will enable us to re-execute a query on demand. In this case, we'll do it after the delete mutation has been successfully performed.

此外，我们将研究如何使用Apollo给我们提供的有用的

refetch

函数更新用户界面，以响应突变。 这将使我们能够按需重新执行查询。 在这种情况下，我们将在成功执行删除突变后执行此操作。

Click to watch this lecture

点击观看本讲座

立即观看课程📺 (Watch the course now 📺)

React and GraphQL are at the core of tons of powerful web and mobile apps and there's never been a better time to learn the two.

React和GraphQL是大量强大的Web和移动应用程序的核心，现在再没有比这更好的时间了。

Take the course and, within an hour, you'll learn core concepts that will meaningfully grow your developer skillset and give you the key insights to create your own React and GraphQL projects!

通过该课程，在一小时内，您将学习核心概念，这些概念将有意义地发展您的开发人员技能，并为您提供创建自己的React和GraphQL项目的关键见解！

Click to watch the course

点击观看课程

翻译自: https://www.freecodecamp.org/news/the-react-graphql-2020-crash-course/

react实战课程