React 是一个非常流行的开源 JavaScript 库，用于构建用户界面。它具有出色的性能和可重用的代码，因此可以被广泛用于许多不同类型的应用程序。
在本文中，我们将介绍如何使用 Babel 和 Webpack 4 来创建一个基本的 React 应用程序。我们将讨论如何配置这些工具，以便我们可以编写以最新版本 ECMAScript 标准编写的 JavaScript 代码，以及如何将我们的代码编译为浏览器可以理解的格式。
环境设置
在开始之前，确保已经安装了 Node.js。使用以下命令检查：
node -v
在运行本示例之前，你可能需要在你的计算机上安装 npm。使用以下命令检查：
npm -v
创建新项目
首先，打开命令窗口并创建一个新目录以容纳我们的项目。使用以下命令：
mkdir react-app cd react-app
创建一个新的 npm 项目，使用以下命令：
npm init -y
上面的 -y 选项会自动接受 npm 默认值。请注意，这将创建一个 package.json 文件，其中包含我们项目的元数据。
安装所需的依赖项
我们需要安装 React、ReactDOM 和 Babel，Babel 可以使我们使用更现代的 JavaScript 功能：
npm install --save react react-dom @babel/core @babel/preset-env @babel/preset-react
我们同时还需要一些开发依赖项，用于构建过程：
npm install --save-dev webpack webpack-cli babel-loader css-loader style-loader html-webpack-plugin webpack-dev-server
这些依赖项将解决我们构建这个应用程序所需的所有问题，包括从 JavaScript 到 CSS 到 HTML 的整个过程。
配置 Babel 和 Webpack
接下来，我们需要配置 Babel 和 Webpack。首先，创建一个名为 webpack.config.js 的新文件：
touch webpack.config.js
将以下代码粘贴到新文件中：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
-- ----
------ -----------------
-- ----
------- -
----- -------------------- ---------
--------- ----------------
--
-- ------
------- -
------ -
-- -- ----- -- --- --
-
----- --------
-------- ---------------
---- -
------- ---------------
-
--
-- -- --- --
-
----- ---------
---- ---------------- --------------
--
--
--
-- --
-------- -
-- -- ---- --
--- -------------------
--------- -------------------
---
--
--以上代码我们已经进行了相关的注释，其中 webpack.config.js 配置描述了：项目的入口文件、输出文件、代码转换与解析的加载器，以及生成 HTML 的插件。
下面，我们需要在项目根目录下创建 src 和 dist 目录，并在 src 目录中创建 index.html 和 index.js 文件。
创建 src/index.html 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ -----------
-------
------
---- ----------------
-------
-------在 src 目录下创建 index.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --------------
----- --- - -- -- -
------ -
-----
---------- -----------
------
--
--
-------------------- --- ---------------------------------我们这里创建的应用程序非常简单，它只打印一个“Hello, World!”消息。但是，这已经足够展示如何使用 Babel 和 Webpack 来构建 React 应用了。
最后，在 package.json 中添加以下脚本：
"scripts": {
"start": "webpack-dev-server --open"
}这将告诉 npm，当我们运行 npm start 命令时，将使用 webpack 启动运行一个本地开发服务器，自动打开浏览器，并在 http://localhost:8080 端口上访问我们的应用程序。
运行应用程序
现在我们已经配置完毕，是时候运行我们的 React 应用程序了。使用以下命令启动本地服务器：
npm start
现在，在浏览器中输入 http://localhost:8080，你应该可以看到我们的应用程序在运行了。
结论
React 应用程序的构建非常有趣，而 Babel 和 Webpack 是使它变得有趣的基础工具。这个简单的例子展示了如何开始创建一个基本的 React 应用程序，并且提供了足够的指导，使得你可以将其作为一个新的开始来使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d4416a336082f254aef45