React 工具和库面试题, 如果不使用脚手架,你如何手动搭建 React 项目?
React 工具和库面试题, 如果不使用脚手架,你如何手动搭建 React 项目?
QA
Step 1
Q:: 如何手动搭建一个 React 项目，而不使用脚手架工具？
A:: 手动搭建一个 React 项目涉及以下步骤：
1. 创建一个新的项目文件夹，并在终端中进入该文件夹。
2. 使用 npm init 初始化项目，生成 package.json 文件。
3. 安装 React 和 ReactDOM 库，使用命令：npm install react react-dom。
4. 安装 Webpack 和 Babel 以进行打包和转译：npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev。
5. 配置 Webpack：在项目根目录创建 webpack.config.js 文件，配置入口文件、输出路径、加载器等。
6. 配置 Babel：在项目根目录创建 .babelrc 文件，配置 Babel 使用的预设（如 @babel/preset-env 和 @babel/preset-react）。
7. 创建 src 文件夹，并在其中创建入口文件 index.js，然后在该文件中编写 React 代码。
8. 配置 HTML 文件：在 public 文件夹中创建 index.html 文件，添加一个 div 作为 React 挂载点。
9. 修改 package.json 文件中的 scripts 字段，添加构建和启动命令。
10. 最后，使用 npm run build 构建项目，并使用 npm start 启动开发服务器。
Step 2
Q:: 在手动搭建 React 项目时，为什么要使用 Webpack 和 Babel？
A:: Webpack 是一个模块打包工具，可以将多个模块打包成一个或多个输出文件，并支持各种加载器和插件，用于处理各种类型的文件。React 项目通常包含现代 JavaScript（ES6+）和 JSX 语法，这些都需要通过 Babel 转译为浏览器能够理解的 JavaScript 代码。Babel 是一个 JavaScript 编译器，负责将高级语法转译为向后兼容的 JavaScript 版本。Webpack 和 Babel 的组合可以帮助开发者简化项目打包、模块化和代码转译的过程。
Step 3
Q:: 手动搭建 React 项目时，如何配置 Webpack 和 Babel？
A:: Webpack 的配置包括以下几部分：
1. entry：指定入口文件，如 ./src/index.js。
2. output：指定输出文件路径和名称，如 ./dist/bundle.js。
3. module：配置加载器，使用 rules 数组定义不同文件类型的处理方式，例如 babel-loader 处理 .js 或 .jsx 文件。
4. plugins：可以添加插件，如 HtmlWebpackPlugin，用于生成 HTML 文件并自动引入打包后的文件。
Babel 的配置主要通过 .babelrc 文件完成，其中包含 presets（如 @babel/preset-env 和 @babel/preset-react）和 plugins 的定义，用于处理 ES6+ 和 JSX 语法。
Step 4
Q:: 如果不使用 React 脚手架，如何配置开发环境中的热更新（Hot Module Replacement, HMR）？
A:: 要在手动搭建的 React 项目中配置 HMR，可以遵循以下步骤：
1. 安装 Webpack 的 webpack-dev-server 插件：npm install webpack-dev-server --save-dev。
2. 在 webpack.config.js 文件中配置 devServer 选项，包括指定端口、启用 HMR（通过设置 hot: true）等。
3. 在 entry 配置中添加 webpack-dev-server 的入口点，如 webpack-dev-server/client?http://localhost:8080。
4. 修改 package.json 中的 scripts，添加一个 start 脚本来启动开发服务器：webpack serve --config webpack.config.js --mode development。
5. 在 React 组件中添加 HMR 代码：if (module.hot) { module.hot.accept(); }，以便在模块更新时自动刷新页面。