学习 Babel：使用 JSX 和 Preset-react 构建 React 组件

在前端开发中，React 已经成为了最受欢迎和应用广泛的 JavaScript 框架之一。尽管 React 可以变成可读代码，但是在复杂的情况下，仍然需要编写面向对象编程和编写重复代码。在这种情况下，使用 JSX 和 preset-react 在 React 中构建组件，可以让你更加有效的开发，同时可以避免 React 组件的常见错误。

本文将介绍如何使用 Babel、JSX 和 preset-react 构建 React 组件，包括具体的步骤和实例代码。阅读本文可以让你更好的了解如何在 React 项目中，使用最佳的 Babel 工具。充分理解本文后，你将能够进一步加强你的 React 开发技能。

什么是 Babel？

Babel 是一个 JavaScript 编译器，主要用于将当前的 JavaScript 代码转换为不同的 JavaScript 代码，以确保代码能够在不同的浏览器和环境中运行。Babel 的任务是将代码语法转换成与目标ES版本相同的合法 ES5 语法。如果你想要在现代浏览器中使用 JavaScript 新语言特性，你需要使用 Babel 来将你的代码转换成浏览器可识别的语法。Babel 工具常常用于前端项目中，是前端开发者必备之一。

什么是 JSX？

JSX 是一个扩展语法，允许以 HTML 样式的语法来编写 JavaScript 代码。使用 JSX，开发者可以同时编写 HTML 结构和 JavaScript 代码逻辑，使得开发更加直观、易于理解、快速响应。

什么是 preset-react？

Preset-react 插件是 Babel 的一个预设（preset），主要用于将 JSX 转换成普通的 JavaScript 代码。Preset-react 自动将 React 组件编译成浏览器识别的 JavaScript 代码，并将其转换成普通的 JavaScript 代码，可以在浏览器中直接运行。

如何使用 Babel、JSX 和 preset-react 构建 React 组件？

下面是使用 Babel、JSX 和 preset-react 构建 React 组件的详细步骤：

步骤一：安装 Babel 和 preset-react

首先，在命令行终端中，安装 Babel 和 preset-react：

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

请注意，你应该为你的项目选择合适的 Babel 版本。

步骤二：创建一个新的 React 项目

在命令行终端中，使用 create-react-app 命令创建一个新的 React 项目：

npx create-react-app my-app
cd my-app
npm start

这时，可以通过 http://localhost:3000 在浏览器中查看你的新应用。

步骤三：替换 App.js 文件中的代码

在 src 文件夹下创建一个新的文件，命名为 MyComponent.js，并将下面的代码复制到文件中：

import React from "react";
const MyComponent = () => {
  return <div>Hello, World!</div>;
};
export default MyComponent;

然后替换 src/App.js 文件中的代码：

// www.javascriptcn.com code example
import React from 'react';
import MyComponent from './MyComponent';
import './App.css';

function App() {
  return (
    <div className="App">
      <MyComponent />
    </div>
  );
}

export default App;

步骤四：配置 Babel

在项目的根文件夹下创建一个名为 .babelrc 的文件，并将下面的代码复制到其中：

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

这个文件说明了在项目文件夹中使用 preset-react。preset-react 将会自动将 JSX 转换成普通的 JavaScript 代码，并为我们避免了在项目中不必要的错误。此外，如果你需要使用其他 preset 也可以直接添加到此文件中。

步骤五：使用 Babel 编译

在命令行终端中使用 Babel 编译器编译项目：

npx babel src --out-dir build

当编译完成后，将生成新的文件夹 build，包含所有编译好的文件。

步骤六：查看编译好的代码

通过查看编译好的代码，我们可以很快地发现应用程序组件在编译时自动变成了普通的 JavaScript 代码，并成功地在浏览器上运行。这是因为 Babel、JSX 和 preset-react 成功地在项目中发挥作用。

下面是编译后的 App.js：

// www.javascriptcn.com code example
import React from 'react';
import MyComponent from './MyComponent';
import './App.css';
function App() {
  return /*#__PURE__*/React.createElement("div", {
    className: "App"
  }, /*#__PURE__*/React.createElement(MyComponent, null));
}
export default App;

下面是编译后的 MyComponent.js：

import React from "react";
const MyComponent = () => {
  return /*#__PURE__*/React.createElement("div", null, "Hello, World!");
};
export default MyComponent;

源代码中，我们的 MyComponent 是一个具有 JSX 语法的 React 组件，但是编译后我们可以看到它被转换为来自 React.createElement API 的普通 JavaScript 代码。这意味着，我们的组件代码现在可以很好的被浏览器所解析。

结语

在本篇文章中，我们了解了如何使用 Babel、JSX 和 preset-react 构建 React 组件，步骤详细，代码示例完整。通过结合工具，可以有效提高 React 项目的开发效率，并减少组件开发过程中的错误和快速问题解决。有了本篇文章的指导和实践，相信你会更加得心应手地开发 React 组件。

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