[譯] 使用 Go 和 ReactJS 構建聊天系統 (一)

咔嘰咔嘰發表於2019-08-02

GoReactJS

本節完整程式碼：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 應用程式了，我們可以在接下來的教程中進行擴充套件。