JSX

一、基本使用

1、createElement 方法过于繁琐，例如：

React.createElement("div", {id: "d1", className: "item"},React.createElement("ul", null,React.createElement("li", null, "ok"),React.createElement("li", null, "yes"),React.createElement("li", null, "no")))

缺点：繁琐、不直观、不优雅、体验感差

2、 JSX：

ok
yes
no

（1）JSX: javaScript xml

（2）JSX是 React 的核心内容

（3）使用JSX创建 React 元素：

const title = 
123

（4）原理：babel进行编译，转成js对象，用 ReactDOM.render()  方法将这个对象转成DOM元               素，最后插入页面

3、注意

（1）JSX不是ES的标准语法，它是ES的扩展

（2）需要使用babel编译处理后才能在浏览器环境中使用

（3）编译JSX的包：@babel/preset-react

（4）React 元素的属性名使用驼峰命名法

（5）如果元素没有子节点，可直接使用单标签，但是以  /> 结尾

（6）可以使用（）包裹JSX，以避免一些问题

二、JSX 中使用js表达式

语法：{JS表达式}

例如：

let ok = 123;
const text = (
{ok}
)

三、条件渲染

可以使用 if 三元运算符、逻辑运算符，例如：

let is = true;
const ok = () => {if(is) return (
我是叮叮当
)return (
叮叮当在哪里
)
}

四、列表渲染

使用数组的 map 方法， 例如：

 const books = [{ id: 1, name: '西游记', author: '吴承恩' },{ id: 2, name: '水浒传', author: '施耐庵' },{ id: 3, name: '红楼梦', author: '曹雪芹' },{ id: 4, name: '三国演义', author: '罗贯中' },]const list = (
books.map(item => 
书名：{item.name},作者：{item.author}
)
)

五、样式处理

1、行内样式 style

const title = 
{ width: '20px', height: '20px'}}>你好

注意：这不是俩组花括号，外边代表的是js，里边代表的是对象

2、类名 className (推荐)

需得使用import导入样式表

React 完全利用JS语言自身的能力来编写UI，而不是增强HTML功能。