如何制作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 developGatsby自动处理路由、预渲染和性能优化，适合复杂静态站点。
