什么是JSX？和HTML有什么区别？

刚开始写React，你肯定会盯着那些.jsx或.js文件里的代码犯嘀咕：这看着像HTML，但又直接写在JavaScript里，还混着些{ }花括号，这到底是个啥？这东西叫JSX，它是React的核心“方言”，理解它和HTML的区别，是写好React的第一步。

JSX是JavaScript的语法扩展

最根本的一点，JSX不是字符串，也不是模板语言。它是JavaScript的语法扩展，最终会被编译成普通的JavaScript函数调用（通常是React.createElement()）。浏览器不认识JSX，所以在打包时，Babel这类工具会把它转译成浏览器能理解的JavaScript。

// 你写的 JSX
const element = <h1 className="title">Hello, world!</h1>;
// 编译后大致变成这样
const element = React.createElement('h1', { className: 'title' }, 'Hello, world!');

这意味着你可以在JSX里嵌入任何有效的JavaScript表达式，只要用花括号{ }包起来就行。这是它和静态HTML最大的不同。

const name = 'React';
const element = <p>你好，{name}</p>;

几个关键的区别点（也是容易踩坑的地方）

1. 属性名要用小驼峰：在HTML里你写class、onclick，在JSX里得写成className、onClick。因为JSX的属性名最终对应的是JavaScript对象的键名，而class是JavaScript的保留字。 <div className="container" onClick={handleClick}>
2. 样式要传对象，不是字符串：HTML里style="color: red;"，在JSX里你得传一个对象。 <div style={{ color: 'red', fontSize: '16px' }}> 注意里外两层花括号：外层表示嵌入JS表达式，内层是JavaScript对象字面量。
3. 标签必须闭合：HTML里<br>、<input>也许能凑合，JSX里不行，必须写成<br />或<input />。
4. 只能返回一个根元素：一个组件返回的JSX必须有一个顶层标签包裹。以前常用<div>，现在可以用<>空标签（React Fragment）来避免添加无意义的DOM节点。
   javascript return ( <> <h1>标题</h1> <p>内容</p> </> );

为什么React要用JSX？

你可能觉得这套规则有点烦。但React团队设计JSX，是为了更直观地描述UI应该长什么样。它把视图和逻辑（JavaScript）紧密地耦合在一起，而不是像传统模板那样分离成两个文件。这让组件的结构一目了然，动态内容嵌入也变得异常自然。

所以，别把JSX当HTML记。把它看作一种用类似HTML的语法来编写JavaScript函数调用的便捷方式。习惯了这套规则，你会发现在JavaScript里直接“画”UI，其实挺爽的。