我们将通过设置我们的两个项目来开始这门课程。一旦我们完成了这些枯燥的设置，我们就可以开始添加新的功能，构建我们的应用程序，并看到一些成果。

目标

在本节课程结束后，你将得到:

• 在  backend/ 目录创建的基本的 Go 应用。
• 在 frontend/ 目录创建的基本的 ReactJS 应用。

实现了这两个目标之后，您将能够在本课程的以下部分开始向聊天系统中添加功能。

准备工作

为了完成本系列教程，您需要做以下准备工作。

• 你需要安装 npm。
• 你需要安装 npx。它可以通过 npm install -g npx 来安装。
• 你的 Go 版本需要高于 1.11。
• 您将需要一个代码编辑器，如 Visual Studio。

设置 Go 项目

如果您熟悉 Go，这一步相当简单，我们将在项目目录中创建一个名为 backend 的目录。

这个 backend 目录将存放这个项目的所有 Go 代码。然后，我们将通过以下命令来初始化我们的项目：:

$ cd backend
$ GO111MODULE=on
$ go mod init github.com/TutorialEdge/realtime-chat-go-react

应该在 backend 目录中使用 go mod 初始化我们的项目，初始化之后我们就可以开始写项目并使其成为一个完整的 Go 应用程序。

一旦你执行了这些命令，你就应该在 backend/ 目录下看到两个新生成的文件。它们分别是 go.mod 和 go.sum 文件。

• go.mod - 这个文件有点像 NodeJS 项目中的 package.json。它详细描述了我们项目所需的包和版本，以便项目的构建和运行。
• go.sum - 这个文件用于校验，它记录了每个依赖库的版本和校验码。

注意 - 如果想要了解更多关于 Go modules 的新特性，请访问官方 Wiki: Go Modules

检查

一旦我们在 backend/ 目录中调用了 go mod init，我们将检查程序是否正常工作。

在 backend/ 目录中添加新文件 main.go，并添加以下代码:

package main

import "fmt"

func main() {
  fmt.Println("Chat App v0.01")
}

保存文件, 尝试运行它：

$ go run main.go
Chat App v0.01

很好，如果运行成功，我们就可以继续设置前端应用了。

设置我们的 React 前端

设置我们的前端稍微复杂一些，首先，我们将在项目的根目录中创建另一个目录，名为 frontend，我们在这个目录中存放所有 ReactJS 代码。

注意 - 我们将会使用 facebook/create-react-app 来生成 React 前端。

$ cd frontend

然后使用 create-react-app 包来创建一个新的 ReactJS 应用。 可以使用 npm 来安装:

$ npm install -g create-react-app

安装之后，可以使用以下命令创建新的 ReactJS 应用程序：

$ npx create-react-app .

运行这些命令之后，你应该可以看到我们的 frontend/ 目录生成了基本的 ReactJS 应用程序。

我们的目录结构如下:

node_modules/
public/
src/
.gitignore
package.json
README.md
yarn.lock

在本地运行 ReactJS 应用程序

现在你应该成功创建了基础的 ReactJS 应用，是时候测试一下了。使用下面的命令尝试运行：

$ npm start

如果一切按计划进行，你将看到 ReactJS 应用程序已经编译完毕，并且已经运行在本地服务器上，可以通过访问 http://localhost:3000 来查看:

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.234:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

很好，您现在有了一个基本的 ReactJS，可以在本教程系列的下一部分中进行扩展。

总结

太棒了，你现在已经成功地设置了我们项目的前端和后端，我们可以开始添加新的功能了。

本文译自tutorialedge

本作品采用《CC 协议》，转载必须注明作者和本文链接