如何加载react静态页面
加载 React 静态页面的方法
使用 create-react-app 构建静态页面
通过 create-react-app 脚手架工具可以快速生成一个 React 项目，并构建为静态页面。
安装 create-react-app：
npx create-react-app my-static-app
cd my-static-app构建静态文件：
npm run build构建完成后，静态文件会生成在 build 文件夹中，可直接部署到服务器或静态托管服务（如 Netlify、Vercel、GitHub Pages）。
直接引入 React CDN
如果不需要复杂的构建流程，可以直接在 HTML 文件中引入 React 和 ReactDOM 的 CDN 链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Static Page</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App = () => {
return <h1>Hello, React Static Page!</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>使用 Vite 构建静态页面
Vite 是一个轻量级的前端构建工具，适合快速生成静态页面。
初始化 Vite + React 项目：
npm create vite@latest my-react-static --template react
cd my-react-static
npm install构建静态文件：
npm run build生成的静态文件位于 dist 文件夹，可直接部署。
部署到 GitHub Pages
将构建后的静态文件推送到 GitHub 仓库，并启用 GitHub Pages。
在 package.json 中添加 homepage 字段：
"homepage": "https://username.github.io/repo-name"安装 gh-pages：
npm install gh-pages --save-dev添加部署脚本：
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}运行部署命令：
npm run deploy使用 Netlify 或 Vercel 托管
将代码推送到 GitHub 或其他 Git 平台后，可在 Netlify 或 Vercel 上导入项目并自动部署静态页面。
Netlify 和 Vercel 会自动检测 React 项目并完成构建和发布流程，无需额外配置。
