8、深入理解 JSX 与 Babel：从语法到实践

深入理解 JSX 与 Babel：从语法到实践

1. JSX 简介

JSX（JavaScript XML）的出现，一方面是因为开发者不喜欢将用户界面（UI）代码写成一系列函数调用，另一方面是 React 团队意识到将渲染逻辑和 UI 逻辑分离意义不大。过去，我们常把标记放在 HTML 文件中，而将 UI 逻辑放在 JavaScript 文件里，但实际上它们是紧密耦合的，像事件处理、应用状态响应以及数据展示准备等逻辑都是相互交织的。

在 React 中，划分的依据是关注点。组件的作用就在于分离 UI 的各种关注点，每个组件都是一个封装的整体，包含了自身的渲染逻辑和事件处理逻辑。

虽然不使用 JSX 也能通过遵循架构原则和规范代码来实现这些功能，但 JSX 提供了一种更优雅的方式。对于有 HTML/JS/CSS 背景的开发者来说，JSX 让他们无需使用 React.createElement() 来思考，而是使用更熟悉的语法，从而更自然地进入 React 世界。

以下是一个简单的 JSX 示例：

const button = <MaterialButton color="red"
  onClick="alert('clicked');">
  Click Me
</MaterialButton>;

很明显，这不是有效的 JavaScript 语法。JSX 需要进行预处理，将其编译成标准的 JavaScript。编译后的代码大致如下：