在现代的 Web 开发中，选择适合的后端框架和前端库是非常重要的。Gin 是一个基于 Go 语言的轻量级 Web 框架，而 React 是一个流行的 JavaScript 库，用于构建用户界面。本文将介绍如何结合使用 Gin 和 React 来开发高效、灵活和现代化的 Web 项目。
一、依赖react脚手架，并打包静态资源的形式
项目结构：
在你的项目目录中创建一个名为 templates 的文件夹，用于存放服务器端渲染的 HTML 模板文件。
在 templates 文件夹中创建一个 HTML 模板文件，比如 index.html。
在你的项目目录中创建一个名为 static 的文件夹，用于存放前端静态文件，如 CSS、JavaScript 和图像等。
- main.go
- templates/
- index.html
- static/
- bundle.js
- style.css
后端开发：
使用 Gin 框架来处理服务器端的路由和请求处理逻辑。
在服务器端路由的处理函数中，使用 gin.Context 对象的 HTML 方法来渲染 HTML 模板，将模板文件和数据传递给前端。
在服务器端提供静态文件的路由，将 static 文件夹设置为静态文件目录，以便可以通过 URL 访问到其中的文件。
前端开发：
在 React 中编写你的前端组件和页面。
使用 webpack 或其他构建工具将 React 组件打包成一个或多个 JavaScript 文件，将其输出到 static 文件夹中。
在 HTML 模板文件中使用 <script> 标签引入打包后的 JavaScript 文件，并将其放置在适当的位置。
完成后端和前端的集成：
main.go：
package main
import (
"net/http"
"github.com/gin-gonic/gin"
)
func main() {
r := gin.Default()
// 加载模板文件
r.LoadHTMLGlob("templates/*")
// 静态文件路由
r.Static("/static", "./static")
r.GET("/", func(c *gin.Context) {
c.HTML(http.StatusOK, "index.html", gin.H{
"title": "My Web App",
})
})
// 启动服务器
r.Run(":8000")
}
index.html：
<!DOCTYPE html>
<html>
<head>
<title>{{ .title }}</title>
<link rel="stylesheet" type="text/css" href="/static/style.css">
</head>
<body>
<div id="root"></div>
<script src="/static/bundle.js"></script>
</body>
</html>
二、不依赖react脚手架，使用jsx文件开发
我们如果只是做一些简单的页面，可以不使用react脚手架搭建一整套前端项目结构，而是直接引用react需要的js，然后通过babel引入jsx文件，在jsx文件进行react简单的开发就可以了，main.go不需要动，示例代码如下：
index.html:
app.jsx:
// 在 app.jsx 中编写 React 组件
function App() {
return (
<div>Hello World</div>
);
}
// 将组件渲染到根元素中
ReactDOM.render(<App />, document.getElementById("app"));
参考：
Gin官方文档
作者：舞鹤Roc
链接：https://www.jianshu.com/p/43e26befd2dd?v=1687621514138
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
