8、React 开发：JSX 与 Babel 编译全解析

React 开发：JSX 与 Babel 编译全解析

1. JSX 简介

在传统开发中，开发者不喜欢将用户界面（UI）代码写成一系列函数调用。React 团队也意识到将渲染逻辑和 UI 逻辑分离没有太大意义。通常，我们会把标记放在 HTML 文件中，把 UI 逻辑放在 JavaScript 文件里，但实际上这两者是紧密耦合的，例如事件处理、应用状态响应以及数据显示准备等逻辑都是相互交织的。

React 认为不应该按照技术来划分代码，而是基于关注点进行划分，这就引入了组件的概念。每个组件都是一个封装的整体，包含了自身的渲染逻辑和事件处理逻辑。

JSX 为实现这一目标提供了更优雅的方式，尤其对于有 HTML/JS/CSS 背景的开发者来说，它让开发者无需过多考虑 React.createElement() 方法，而是使用更熟悉的语法。

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

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

显然，这不是有效的 JavaScript 语法。实际上，JSX 需要经过预处理步骤，将其编译成标准的 JavaScript。编译后的代码大致如下：

React.createElement(
  MaterialButton,