02-react中jsx的基本使用

// 使用 createElement太繁琐 不直观 不优雅开发体验不好  代码维护不行

// jsx 不是  js 而是 js的扩展语法
// jsx 是react的核心内容
// react项目中已经有了 bable 所以在react项目中直接使用 jsx 语法 【自动编译】

// jsx 的写法就是声明式的写法 直接简单移动 就像在 vue 的template 直接写 dom 一样也是声明式的写法
// 不需要引入 react 包 会自动转换【bable】
// const ul = <ul className="list">
// <li>橘子</li>
// <li>香蕉</li>
// <li>苹果</li>
// </ul>
import reactDom from "react-dom"

// 使用函数返回dom结构
// jsx 建议使用 （） 包裹起来
function fn(){
    return (<>
     <h1 className="demo">hellow jsx</h1>
     <span>第二个标签</span>
     <br/>
     <label htmlFor="name">点击我直接获取焦点</label>
     <input type="text" id="name" />
</>)
}

// jsx 中使用类的不是class而是 className

/// jsx 必须有一个跟节点 和 vue2的要求一样 否则报错
// (<></>) 这是空节点包裹
// 属性使用驼峰命名
// label 标签的 for 属性
const h1 = fn()
reactDom.render(h1,document.querySelector("#root"))