React Fiber

一个示例应用，展示如何使用几乎裸机的 Fiber 服务于带有 Router 的 React 应用。希望这个应用能对那些希望使用 Fiber 服务其客户端 SPA 的人有所帮助（作为参考或其他用途）。

技术栈

• Go 与 Fiber
• 使用 TypeScript 和 React Router 的 React
• Docker

应用说明

• 此应用有三个路由：/、/react 和一个全匹配的 404 路由。/ 将显示 Fiber logo，/react 将显示 React logo，而 404 路由将显示两个 logo。
• 由于此应用由服务器支持并服务于前端，客户端路由将运行良好且不会引起任何问题（不像在没有文件服务器的情况下运行）。你可以在浏览器中手动输入 URL 路由，它仍然有效并能渲染出准确的页面，所以不用担心。
• 这是使用 TypeScript 的 Create React App 的简化形式。正因如此，它没有 manifest.json、logo512.png 以及其他类似额外内容。
• 我重构了项目结构，使其更模块化，将文件按 assets、components 和 styles 分类。我还将所有 CSS 加载到 index.tsx 中，以便更容易查看。
• 我还将一些依赖项移至其适当的位置，例如将 @types 和 test 放在开发依赖项中，而不是常规依赖项。

安装

建议使用 Docker 快速运行此应用。运行 Docker 应用后，请在浏览器中打开 localhost:8080。在运行这些命令之前，请确保你位于 react-router 文件夹中。

docker build . -t react-router:latest
docker run -d -p 8080:8080 react-router:latest

如果你更喜欢手动操作，安装步骤如下：

• 使用 git clone git@github.com:gofiber/recipes.git 克隆仓库。
• 使用 cd recipes/react-router 切换到应用目录。
• 使用 cd web && yarn install 安装 npm 依赖项。
• 使用 yarn build 构建前端。
• 使用 go run cmd/react-router/main.go 运行 Fiber 应用。别忘了使用 cd .. 返回主仓库目录（假设你在 web 文件夹中）。
• 在浏览器中打开 localhost:8080。