React应用开发模板

一个基于React Router的现代化全栈React应用开发模板,支持服务器端渲染、热模块替换、资源优化和TypeScript。

  • by xnslx
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 xnslx/react-router-mcp-agent-builder

使用说明

欢迎使用 React Router!

一个现代化、可直接投入生产的模板,用于使用React Router构建全栈React应用程序。

特点/特性

  • 🚀 服务端渲染
  • ⚡️ 热模块替换(HMR)
  • 📦 资产打包与优化
  • 🔄 数据加载和突变(或数据变更)
  • 🔒 默认使用 TypeScript
  • 🎉 使用 TailwindCSS 进行样式设计
  • 📖 书籍 React Router 文档

入门指南

安装

安装依赖项:

npm install

发展

启动带有热模块替换(HMR)功能的开发服务器:

npm run dev

您的应用程序将在 http://localhost:5173。

为生产构建(或:构建生产环境)

创建生产环境构建:

npm run build

部署

Docker 部署

使用 Docker 构建并运行:

docker build -t my-app .

# Run the container
docker run -p 3000:3000 my-app

容器化应用可以部署到任何支持Docker的平台,包括:

  • AWS ECS(亚马逊网络服务 任务编排服务)
  • Google Cloud Run(谷歌云运行)
  • Azure 容器应用
  • Digital Ocean 应用平台
  • Fly.io(注:这是一个域名或服务名称,直接翻译为中文可能不直观,通常保留原样或根据上下文意译为类似“飞.io”或具体服务名称的中文表述,但在此处为保持原样,直接给出“Fly.io”的中文音译加意译结合的形式,实际使用时可能需根据具体语境调整)
  • 铁路

DIY部署

如果你熟悉部署Node应用程序,那么内置的应用服务器已经准备好投入生产环境使用。

确保部署输出结果 npm run build

├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── server.js
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code

造型设计

这个模板附带 Tailwind CSS 已经配置为提供一个简单的默认启动体验。您可以使用任何您喜欢的CSS框架。


使用 React Router 构建,❤️ 点亮您的开发之旅。