什么是 React？
React 是一个由 Facebook 开发的 JavaScript 框架，用于构建用户界面，尤其适合构建大型单页应用程序。虽然 React 本身只是一个视图层库，但是它可以与其他库或框架结合使用来构建完整的应用程序。
Node.js 中如何使用 React？
在 Node.js 中使用 React，需要先安装 Node.js 和 npm 包管理器。然后，可以使用以下方法在项目中安装 React：
npm install react
还可以安装一些 React 相关的库和工具：
npm install react-dom npm install create-react-app
安装完成后，就可以使用 React 开发 Web 应用程序了。下面是一个简单的 React 示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- ----- ------- --------------- -
-------- -
------ ---------- -------------
-
-
----------------
------ ---
-------------------------------
--这个示例会在页面上显示一个简单的 "Hello World!" 信息。我们创建了一个名为 Hello 的类组件，它返回一个包含 "Hello World!" 文本的 div 元素。然后，使用 ReactDOM.render() 方法将 Hello 组件渲染到 id 为 "root" 的 DOM 元素上。
如何使用 React 开发 Web 应用程序？
使用 React 开发 Web 应用程序可以采用两种方式：
方式一：手动创建项目
使用 create-react-app 工具可以快速创建一个新的 React 项目。只需要在命令行中执行以下命令：
npx create-react-app my-app cd my-app npm start
这会创建一个名为 my-app 的新项目，并在本地运行开发服务器。打开 http://localhost:3000 即可在浏览器中访问。
方式二：使用已有的 Node.js 项目
在已有的 Node.js 项目中使用 React，需要在项目中添加一些必要的库和配置。
1. 添加必要的库
首先，需要安装 react、react-dom 和 babel 相关的库：
npm install react react-dom npm install @babel/core @babel/preset-env @babel/preset-react babel-loader
其中，@babel/core、@babel/preset-env 和 @babel/preset-react 是 Babel 编译器的必要组件之一；babel-loader 则是 Webpack 打包工具所需的一个必要组件。
2. 配置 Webpack
Web 程序通常需要使用 Webpack 将代码打包成一个文件。
需要创建一个名为 webpack.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
-
--其中，entry 选项指定了应用程序的入口文件；output 选项定义了打包后的文件位置和名称；module.rules 配置项规定了 Webpack 如何处理各种类型的文件。
需要注意的是，Webpack 需要使用 babel-loader 处理 JavaScript 文件。在这里，我们指定了使用 @babel/preset-env 和 @babel/preset-react 两个预设，这样 Babel 就能够编译 ES6 和 JSX 语法了。
3. 编写代码
最后，编写 React 代码。在 src 目录下创建一个名为 index.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- ----- ------- --------------- -
-------- -
------ ---------- -------------
-
-
----------------
------ ---
-------------------------------
--这个代码与前面手动创建项目的代码非常相似，只是在通用 Node.js 项目中需要配置 Webpack，以便能够正确地处理 JSX 语法。
结论
Node.js 中使用 React 进行 Web 开发非常简单，只需要安装必要的库和工具，就可以开始编写代码了。无论是手动创建项目还是使用已有的 Node.js 项目，只要遵循上述步骤，即可轻松地在 Node.js 中使用 React 进行 Web 开发。同时，我们还需要关注一些优化和性能方面的问题，以保证应用程序的运行效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747c39e555db9718d192657