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

2024-03-15 15:32

本文主要是介绍[译] 使用 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 mainimport "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 应用程序了,我们可以在接下来的教程中进行扩展。

总结

太棒了,现在已经成功设置了我们项目的前端和后端部分,接下来我们可以添加一些酷炫的新功能。

这篇关于[译] 使用 Go 和 ReactJS 构建聊天系统 (一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/812432

相关文章

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok?2. @SneakyThrows

使用Python和Pyecharts创建交互式地图

《使用Python和Pyecharts创建交互式地图》在数据可视化领域,创建交互式地图是一种强大的方式,可以使受众能够以引人入胜且信息丰富的方式探索地理数据,下面我们看看如何使用Python和Pyec... 目录简介Pyecharts 简介创建上海地图代码说明运行结果总结简介在数据可视化领域,创建交互式地

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》:本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,:本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

使用Python实现矢量路径的压缩、解压与可视化

《使用Python实现矢量路径的压缩、解压与可视化》在图形设计和Web开发中,矢量路径数据的高效存储与传输至关重要,本文将通过一个Python示例,展示如何将复杂的矢量路径命令序列压缩为JSON格式,... 目录引言核心功能概述1. 路径命令解析2. 路径数据压缩3. 路径数据解压4. 可视化代码实现详解1

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表?使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言

Python 交互式可视化的利器Bokeh的使用

《Python交互式可视化的利器Bokeh的使用》Bokeh是一个专注于Web端交互式数据可视化的Python库,本文主要介绍了Python交互式可视化的利器Bokeh的使用,具有一定的参考价值,感... 目录1. Bokeh 简介1.1 为什么选择 Bokeh1.2 安装与环境配置2. Bokeh 基础2

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE