如何在 Babel 中使用 React

React 是目前前端开发中最流行的 JavaScript 库之一，在构建大型应用程序和高度可重用的用户界面方面具有非常好的表现。而 Babel 则是一个广泛使用的 JavaScript 编译器，它允许我们使用最新的 ECMAScript 版本编写代码，并将其转换为浏览器可以理解的 JavaScript。在本文中，我们将学习如何在 Babel 中使用 React，从而可以编写更加现代化的前端应用程序。

安装 Babel 和 React

在开始之前，我们需要先安装 Babel 和 React。我们可以使用 npm 进行安装：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react react react-dom

这命令将安装 Babel 和 React，以及所需的附加 preset。

配置 Babel

安装完成后，我们需要创建 Babel 的配置文件。在项目根目录创建一个名为 .babelrc 的文件，并输入以下配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

这将启用我们使用最新的 ECMAScript 版本，同时也开启了对 React 代码的编译支持。

编写代码

现在我们已经完成了 Babel 和 React 的安装和配置，我们可以编写 React 代码并用 Babel 将其编译为浏览器可以理解的 JavaScript。以下是一个简单的例子：

// javascriptcn.com code example
import React from 'react';
import { render } from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

render(<App />, document.getElementById('root'));

这个简单的 React 应用程序将渲染一个标题。

使用 Babel 编译代码

为了使用 Babel 编译我们的应用程序代码，我们可以使用 Babel 命令行工具（babel-cli）。我们可以在 package.json 文件中添加一个名为“build”的脚本，以便可以轻松地运行 Babel 。我们只需要在 package.json 文件中添加以下配置：

{
  "scripts": {
    "build": "babel src/ -d dist/"
  }
}

接下来我们可以在终端使用以下命令来编译代码：

npm run build

这将使用 Babel 将位于 src 目录下的所有文件编译为浏览器可以理解的 JavaScript，并将其输出到 dist 目录。

结论

在本文中，我们学习了如何在 Babel 中使用 React，从而可以编写现代化的前端应用程序。我们首先安装了 Babel 和 React，并创建了Babel配置文件。然后我们编写了一个简单的 React 应用程序并使用 Babel 编译它。这为我们提供了一种更好的方式来管理我们的 JavaScript 代码，并使我们能够使用最新的 ECMAScript 特性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67385e9a317fbffedf0ff6ad