如何制作react静态站点

使用Create React App初始化项目

安装Node.js后，通过以下命令创建React项目：

npx create-react-app my-static-site
cd my-static-site

项目默认包含开发服务器和基础模板，适合快速启动。

配置单页应用(SPA)路由

安装React Router实现页面导航：

npm install react-router-dom

在src/App.js中配置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

生成静态HTML文件

安装react-snapshot或react-snap预渲染页面：

npm install react-snap

修改package.json的build脚本：

"build": "react-scripts build && react-snap"

运行构建命令后，会在build文件夹生成静态HTML文件。

部署到GitHub Pages

安装gh-pages并配置部署脚本：

npm install gh-pages --save-dev

在package.json中添加：

"homepage": "https://username.github.io/repo-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

运行npm run deploy即可部署到GitHub Pages。

优化静态资源

使用gzip或brotli压缩文件，通过CDN加速加载。在build阶段添加压缩插件如compression-webpack-plugin。

替代方案：使用Gatsby

Gatsby是专为静态站点设计的React框架，内置优化功能。安装命令：

npm install -g gatsby-cli
gatsby new my-gatsby-site
cd my-gatsby-site
gatsby develop

Gatsby自动处理路由、预渲染和性能优化，适合复杂静态站点。