JSX 基础写法
JSX 是“可以写 HTML 标签的 JavaScript”：编译后等价于调用 React.createElement(type, props, ...children)。它不是模板字符串、也不是 HTML——本质是 JS 表达式，所以可以放进变量、作为参数传递、用在 if 与 map 里。
与 HTML 的主要差异：标签属性用驼峰（className 而非 class、htmlFor 而非 for）；style 接收对象而非字符串；所有标签必须闭合（<img />、<input />）。
- JSX 会编译成 React.createElement，是 JS 表达式不是字符串
- 属性驼峰：className / htmlFor / onClick；style 传对象 {{ }}
- 组件名首字母必须大写，小写会被当作 HTML 标签
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JSX 基础</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> // 组件名大写：Greeting 而不是 greeting function Greeting({ name }) { return ( <div className="card" style={{ border: '1px solid #61dafb', borderRadius: 8, padding: 12 }}> <h2 style={{ color: '#087ea4' }}>你好，{name}！</h2> <label htmlFor="inp">说点什么：</label> <input id="inp" defaultValue="React 真不错" /> <hr /> {/* JSX 里的注释写法：花括号 + 块注释 */} <img src="https://picsum.photos/120/60" alt="示例图" /> {/* 标签必须闭合 */} </div> ); } // JSX 是表达式：可以存进变量、任意嵌套 const card = <Greeting name="小明" />; ReactDOM.createRoot(document.getElementById('root')).render(card); </script> </body> </html>
本节要点JSX = 编译成 createElement 的 JS 表达式；记住驼峰属性、双花括号 style、标签必闭合。
