如何加载react静态页面
加载React静态页面的方法
使用React脚手架工具创建项目
通过Create React App（CRA）快速生成React项目结构，内置静态资源处理能力。执行以下命令初始化项目：
npx create-react-app my-static-app
cd my-static-app
npm start直接构建静态文件
运行构建命令生成优化后的静态文件，适用于生产环境部署：
npm run build生成的build文件夹包含index.html和静态资源，可直接部署到Web服务器。
使用HTML文件直接引入React
若需极简方案，可通过CDN引入React库，在HTML中直接编写组件：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, Static React!</h1>, document.getElementById('root'));
</script>
</body>
</html>部署到静态服务器
将构建后的build文件夹内容上传至Netlify、Vercel或GitHub Pages等托管服务，或使用本地服务器如serve快速测试：
npm install -g serve
serve -s build注意事项
- CDN方式仅适用于开发测试，生产环境建议使用构建工具优化性能。
- 使用路由（如React Router）时需配置服务器支持HTML5 History API的回退。
- 静态页面如需动态数据，需额外集成API调用或预渲染技术。
