重学 React 笔记：深入 JSX

本质上来讲，JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。比如下面的代码：

  Click Me

编译为：

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

如果没有子代，你还可以使用自闭合标签，比如：

编译为：

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

如果你想彻底验证 JSX 是如何转换为 JavaScript 的，你可以尝试 在线 Babel 编译器.

指定 React 元素类型

JSX 的标签的第一部分决定了 React 元素的类型。

首字母大写的类型表示 JSX 标签引用到一个 React 组件。这些标签将会被编译为直接引用同名变量，所以如果你使用了 JSX 表达式，则 Foo 必须在作用域中。

React 必须在作用域中

由于 JSX 编译成React.createElement方法的调用，所以在你的 JSX 代码中，React库必须也始终在作用域中。

比如，下面两个导入都是必须的，尽管 React 和 CustomButton 都没有在代码中被直接调用。

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);
  return ;
}

如果你没有使用JavaScript 打捆机，而是从