[译] 使用 Go 和 ReactJS 构建聊天系统 (一)

本节完整代码：GitHub

咱们将经过设置两个项目来开始这个课程。一旦咱们完成了枯燥的设置，就能够开始添加新功能并构建咱们的应用程序，将看到一些积极的结果！

目标

在这部分课程结束后，你将掌握：

• 在 backend/ 目录里建立基本的 Go 应用
• 在 frontend/ 目录里建立基本的 ReactJS 应用

经过实现这两个部分，你将可以在接下来的几节课程中为聊天系统添加一些功能。

准备工做

为了完成本系列教程，咱们先要作如下的准备工做。

• 须要安装 npm
• 须要安装 npx。这个能够输入 npm install -g npx 安装。
• Go 语言版本须要知足 1.11+。
• 须要一个代码编辑器来开发这个项目，例如 VS

设置 Go 后端项目

若是你熟悉 Go 的话，这一步很是简单，咱们首先要在项目目录中建立一个名为 backend 的新目录。

这个 backend 目录将包含该项目的全部 Go 代码。而后，咱们将经过如下命令来初始化咱们的项目：

$ cd backend
$ export GO111MODULE=on
$ go mod init github.com/TutorialEdge/realtime-chat-go-react
复制代码

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

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

注意 - 有关 Go modules 新特性的更多信息，请查看官方 Wiki 文档: Go Modules

检查 Go 项目

一旦咱们在 backend/ 目录中调用了 go mod init，咱们将检查一下一切是否按预期工做。

在 backend/ 目录中添加一个名为 main.go 的新文件，并在其中添加如下 Go 代码：

package main

import "fmt"

func main() {
  fmt.Println("Chat App v0.01")
}
复制代码

将该内容保存到 main.go 后，运行后会获得以下内容：

$ 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 应用程序了，咱们能够在接下来的教程中进行扩展。

总结

太棒了，如今已经成功设置了咱们项目的前端和后端部分，接下来咱们能够添加一些酷炫的新功能。

下一节：Part 2 - 后端实现

---

原文：tutorialedge.net/projects/ch…

做者：Elliot Forbes 译者：咔叽咔叽 校对：polaris1119

本文由 GCTT 原创编译，Go 中文网 荣誉推出