Windows/Apache环境下如何查看React.js书本配套页面？

方法一：基于CDN快速预览（无需构建工具） #

适合快速查看单章节内容，不用折腾构建流程：

• 打开Apache的htdocs目录，新建一个文件夹（比如react-book-demos）
• 在该文件夹里创建index.html，内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>React书籍章节预览</title>
  <!-- 引入React、ReactDOM和Babel的CDN -->
  <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/babel.min.js"></script>
</head>
<body>
  <!-- React挂载节点 -->
  <div id="root"></div>
  <!-- 引入书籍的章节JS文件，注意type设为text/babel以支持JSX -->
  <script type="text/babel" src="./chapter1.js"></script>
</body>
</html>

• 把书籍里的章节JS文件（比如chapter1.js）复制到这个文件夹里，确保JS文件里的渲染逻辑指向root节点，示例：

// chapter1.js示例内容
function App() {
  return <h1>第一章：React基础</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• 启动Apache，在浏览器访问http://localhost/react-book-demos/index.html就能看到内容了。

方法二：整合到create-react-app项目（适合多章节管理） #

如果想系统管理所有章节，可复用之前的create-react-app环境：

• 打开你之前用npx create-react-app创建的项目，把书籍的章节JS文件复制到src目录下（比如新建src/book-chapters文件夹存放）
• 在src/App.js里导入并渲染章节内容，示例：

import './App.css';
import Chapter1 from './book-chapters/chapter1';

function App() {
  return (
    <div className="App">
      <Chapter1 />
    </div>
  );
}

export default App;

• 若需要切换不同章节，可以添加简单的路由（比如用React Router），或者直接修改导入的章节文件
• 运行npm run build生成生产包，把build文件夹里的所有文件复制到htdocs目录下，浏览器访问http://localhost/build即可查看。

方法三：直接托管编译后的静态文件 #

如果书籍里的JS文件已经是编译好的（没有JSX，纯ES5/ES6），可以省略Babel：

• 在htdocs里建HTML文件，只引入React和ReactDOM的CDN，然后直接引入章节JS文件（type设为text/javascript）
• 确保JS文件里的代码能正确调用React API并挂载到页面节点。

注意事项 #

• 确保Apache服务正常运行，htdocs目录的权限设置正确（Windows下一般无需额外权限）
• 如果章节JS里用了ES6+语法但没编译，还是需要引入Babel CDN来转译
• 若出现404错误，检查文件路径是否正确，Apache的虚拟主机配置是否指向htdocs。

内容的提问来源于stack exchange，提问作者Mark