使用 Go 和 ReactJS 構(gòu)建聊天系統(tǒng)（一）：初始化項(xiàng)目

本節(jié)完整代碼：GitHub^[1]

我們將通過(guò)設(shè)置兩個(gè)項(xiàng)目來(lái)開始這個(gè)課程。一旦我們完成了枯燥的設(shè)置，就可以開始添加新功能并構(gòu)建我們的應(yīng)用程序，將看到一些積極的結(jié)果！

目標(biāo)

在這部分課程結(jié)束后，你將掌握：

• 在 backend/ 目錄創(chuàng)建基本的 Go 應(yīng)用
• 在 frontend/ 目錄創(chuàng)建基本的 ReactJS 應(yīng)用

通過(guò)實(shí)現(xiàn)這兩個(gè)部分，你將能夠在接下來(lái)的幾節(jié)課程中為聊天系統(tǒng)添加一些功能。

準(zhǔn)備工作

為了完成本系列教程，我們先要做以下的準(zhǔn)備工作。

• 需要安裝 npm
• 需要安裝 npx。這個(gè)可以輸入 npm install -g npx 安裝。
• Go 語(yǔ)言版本需要滿足 1.11+。
• 需要一個(gè)代碼編輯器來(lái)開發(fā)這個(gè)項(xiàng)目，例如 VS

設(shè)置 Go 后端項(xiàng)目

如果你熟悉 Go 的話，這一步非常簡(jiǎn)單，我們首先要在項(xiàng)目目錄中創(chuàng)建一個(gè)名為 backend 的新目錄。

這個(gè) backend 目錄將包含該項(xiàng)目的所有 Go 代碼。然后，我們將通過(guò)以下命令來(lái)初始化我們的項(xiàng)目：

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

應(yīng)該在 backend 目錄中使用 go modules 初始化我們的項(xiàng)目，初始化之后我們就可以開始寫項(xiàng)目并使其成為一個(gè)完整的 Go 應(yīng)用程序。

• go.mod - 這個(gè)文件有點(diǎn)像 NodeJS 項(xiàng)目中的 package.json。它詳細(xì)描述了我們項(xiàng)目所需的包和版本，以便項(xiàng)目的構(gòu)建和運(yùn)行。
• go.sum - 這個(gè)文件用于校驗(yàn)，它記錄了每個(gè)依賴庫(kù)的版本和哈希值。

注意 - 有關(guān) Go modules 新特性的更多信息，請(qǐng)查看官方 Wiki 文檔: Go Modules^[2]

檢查 Go 項(xiàng)目

一旦我們?cè)?backend/ 目錄中調(diào)用了 go mod init，我們將檢查一下一切是否按預(yù)期工作。

在 backend/ 目錄中添加一個(gè)名為 main.go 的新文件，并在其中添加以下 Go 代碼：

package?main

import?"fmt"

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

將該內(nèi)容保存到 main.go 后，運(yùn)行后會(huì)得到如下內(nèi)容：

$?go?run?main.go
Chat?App?v0.01

如果成功執(zhí)行，我們可以繼續(xù)設(shè)置我們的前端應(yīng)用程序。

設(shè)置 React 前端項(xiàng)目

設(shè)置前端會(huì)稍微復(fù)雜一點(diǎn)，首先我們要在項(xiàng)目的根目錄中創(chuàng)建一個(gè) frontend 目錄，它將容納我們所有的 ReactJS 代碼。

注意 - 我們將使用 facebook/create-react-app^[3] 來(lái)生成我們的 React 前端。

$?cd?frontend

然后，你需要使用 create-react-app 包創(chuàng)建一個(gè)新的 ReactJS 應(yīng)用程序。這可以用 npm 安裝：

$?npm?install?-g?create-react-app

安裝完成后，你應(yīng)該能夠使用以下命令創(chuàng)建新的 ReactJS 應(yīng)用程序：

$?npx?create-react-app?.

運(yùn)行這些命令之后，你應(yīng)該可以看到我們的 frontend/ 目錄生成了基本的 ReactJS 應(yīng)用程序。

我們的目錄結(jié)構(gòu)應(yīng)如下所示：

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

本地運(yùn)行 ReactJS 程序

現(xiàn)在已經(jīng)成功創(chuàng)建了基本的 ReactJS 應(yīng)用程序，我們可以測(cè)試一下是否正常。輸入以下命令來(lái)運(yùn)行應(yīng)用程序：

$?npm?start

如果一切正常的話，將會(huì)看到 ReactJS 應(yīng)用程序編譯并在本地開發(fā)服務(wù)器上運(yùn)行：http://localhost:3000^[4]

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.

現(xiàn)在已經(jīng)擁有有一個(gè)基本的 ReactJS 應(yīng)用程序了，我們可以在接下來(lái)的教程中進(jìn)行擴(kuò)展。

總結(jié)

太棒了，現(xiàn)在已經(jīng)成功設(shè)置了我們項(xiàng)目的前端和后端部分，接下來(lái)我們可以添加一些酷炫的新功能。

下一節(jié)：Part 2 - 后端實(shí)現(xiàn)^[5]

via: https://tutorialedge.net/projects/chat-system-in-go-and-react/part-1-initial-setup/

作者：Elliot Forbes^[6]譯者：咔嘰咔嘰^[7]校對(duì)：polaris1119^[8]

本文由 GCTT^[9] 原創(chuàng)編譯，Go 中文網(wǎng)^[10] 榮譽(yù)推出

參考資料