在完全不借助脚手架工具的情况下，你会通过哪些步骤从零开始手动创建一个 React 项目？请描述具体的文件结构、依赖安装、配置以及启动流程。
考察说明
考查对 React 项目底层结构和构建工具链的理解与手动搭建能力。
回答思路
- 【回答框架 1】手动搭建的核心是初始化 package.json 并安装 react、react-dom 作为运行时依赖，再安装构建工具相关依赖。典型的构建方案是使用 Webpack 与 Babel，需安装 webpack、webpack-cli、webpack-dev-server、babel-loader、@babel/core、@babel/preset-env 与 @babel/preset-react。
- 【回答框架 2】创建基础文件结构：public/index.html 作为 HTML 入口，src/index.js 作为 JS 入口，src/App.js 作为根组件。在 index.html 中添加 id 为 root 的挂载点并引入打包后的脚本，在 index.js 中使用 ReactDOM.createRoot 或 ReactDOM.render 将 App 挂载到 root 节点。
- 【回答框架 3】配置 Babel：创建 .babelrc 或 babel.config.js，设置 presets 为 @babel/preset-env 和 @babel/preset-react，使浏览器能识别 JSX 语法和 ES6+ 特性。
- 【回答框架 4】配置 Webpack：在 webpack.config.js 中设置 entry 指向 src/index.js，output 指定打包输出目录，配置 module.rules 处理 .js/.jsx 文件，并添加 devServer 配置以支持开发时的热更新。
- 【回答框架 5】在 package.json 中定义 scripts：start 运行 webpack serve，build 运行 webpack --mode production。最后安装依赖并启动开发服务器验证页面渲染，即可完成手动搭建。
- 【关键点 1】必须安装 react 与 react-dom 两个核心运行时包。
- 【关键点 2】Babel 的 @babel/preset-react 用于转换 JSX 语法。
- 【关键点 3】Webpack 的 entry、output 与 loader 配置是构建流程的关键。
- 【关键点 4】devServer 可提供开发环境的热更新与静态资源服务。
- 【关键点 5】项目挂载必须依赖 HTML 中的 root 元素与 ReactDOM 的渲染调用。
- 【易错点 1】若未配置 Babel，浏览器无法直接解析 JSX，会报语法错误。
- 【易错点 2】Webpack 5 中需注意 devServer 版本与 webpack-cli 的兼容性，不同版本启动命令可能不同。
- 【易错点 3】文件路径或入口配置错误可能导致打包失败或页面空白。