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

時間 2019-11-08

標籤使用 reactjs 構建聊天系統简体版

原文原文鏈接

本節完整代碼：GitHub前端

咱們將經過設置兩個項目來開始這個課程。一旦咱們完成了枯燥的設置，就能夠開始添加新功能並構建咱們的應用程序，將看到一些積極的結果！node

目標

在這部分課程結束後，你將掌握：react

在 backend/ 目錄裏建立基本的 Go 應用
在 frontend/ 目錄裏建立基本的 ReactJS 應用

經過實現這兩個部分，你將可以在接下來的幾節課程中爲聊天系統添加一些功能。git

準備工做

爲了完成本系列教程，咱們先要作如下的準備工做。github

須要安裝 npm
須要安裝 npx。這個能夠輸入 npm install -g npx 安裝。
Go 語言版本須要知足 1.11+。
須要一個代碼編輯器來開發這個項目，例如 VS

設置 Go 後端項目

若是你熟悉 Go 的話，這一步很是簡單，咱們首先要在項目目錄中建立一個名爲 backend 的新目錄。golang

這個 backend 目錄將包含該項目的全部 Go 代碼。而後，咱們將經過如下命令來初始化咱們的項目：shell

$ cd backend
$ export GO111MODULE=on
$ go mod init github.com/TutorialEdge/realtime-chat-go-react
複製代碼

應該在 backend 目錄中使用 go modules 初始化咱們的項目，初始化以後咱們就能夠開始寫項目並使其成爲一個完整的 Go 應用程序。npm

go.mod - 這個文件有點像 NodeJS 項目中的 package.json。它詳細描述了咱們項目所需的包和版本，以便項目的構建和運行。
go.sum - 這個文件用於校驗，它記錄了每一個依賴庫的版本和哈希值。

注意 - 有關 Go modules 新特性的更多信息，請查看官方 Wiki 文檔: Go Modulesjson

檢查 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 應用程序了，咱們能夠在接下來的教程中進行擴展。