在 React 中，我们要熟悉一个新语法：JSX
它不是模板语法，而是 JavaScript 扩展语法，可以参与到 JavaScript 表达式的运算中
const element = <h1>Hello, world!</h1>;
从长相上来说，它跟 html 标签几乎没有差别，但它不是 html。我们可以在 JavaScript 代码中任意拆分组合这些元素。
例如，一段完整的 html 元素如下：
<div> <header>header</header> <span>hello world.</span> <footer>footer</footer> </div>
而 JSX 可以这样写
const header = <header>header</header> const div = ( <div> {header} <span>hello world.</span> <footer>footer</footer> </div> )
还可以这样
const header = <header>header</header> function footer() { return <footer>footer</footer> } const div = ( <div> {header} <span>hello world.</span> {footer()} </div> )
这样的灵活性，为开发者在拆分逻辑时提供了巨大的想象空间。我们可以抽离任意部分单独处理，也可以将任意部分通过合适的方式组合在一起。
注意：JSX 代码需要在 React 环境之下才有效。并且我们需要将具备 JSX 代码的模块文件以 .jsx 或者 .tsx 为后缀名。
// React 环境 import React from 'react';
在 JSX 中，开发者可以在大括号中放置任何有效的 JavaScript 表达式。例如
const element = <div>计算结果：{2 + 2}</div>
或者
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );
JSX 本身也是一个表达式，例如可以作为一个函数的返回结果。从视觉上看它是一个标签，但是当我们对其取值时，它本质是一个 JavaScript 对象。
在开发环境中，Babel 会把 JSX 编译成为一个名为 React.createElement() 的函数调用，如下两种写法完全等效
const element = ( <h1 className="greeting"> Hello, world! </h1> );
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
他们创建了一个这样的对象
// 注意：这是简化过的结构 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } };
标签元素是 React 组件的重要组成部分。
在开发中，我们通常会使用 JSX 的可任意拆分组合的特性，将整个项目拆分成许多模块，并最后组合成一个完整的 JSX，并使用 createRoot 渲染到已经存在的根 DOM 节点中。
import React from 'react'; // @ts-ignore import { createRoot } from 'react-dom/client' import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = createRoot(document.getElementById('root')) root.render(<App />)
这些与 html 元素类似的标签元素，被称之为 React 元素。他们是不可变对象。一个元素就像电影中的一帧，它代表了某个特定时刻的 UI。
我们可以利用 React 元素创建自定义组件。
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
每个自定义组件，也可以看成是一个 React 元素。
const element = <Welcome name="Tony" />;
在自定义时，标签元素上所有的属性以及该元素的子组件「children」，都会聚合到 props 中，也就是函数的第一个参数。
自定义组件必须以大写字母开头
注意：自定义组件也可以参与到 JSX 的任意拆分与组合中去。
本文主要内容在于阐述 JSX 语法并明确标签语言的本质，使用时重点要关注其可任意拆分组合的特性。
接下来的一章，我们要封装一个自定义的基础组件 Icon，进一步感受 props 的使用。
