JSX的简介

createElement()的问题

1.繁琐不简洁 2.不直观,无法一眼看出描述的结构 3.用户体验不爽

JSX简介

JSX是javaScript XML的简写 ，表示在javaScript代码中写XML(HTML)格式的代码

优势:声明式语法更直观,与HTML结构相同,降低了学习成本,提高了开发效率

JSX的基本使用

使用 JSX 语法创建 react元素

const title = <h1>Hello</h1>

使用 ReactDOM.render()方法渲染react元素到页面中

渲染创建好的react元素

ReactDOM.render(title,div)

JSX的注意点

1.React元素属性名使用驼峰命名法

2.特殊属性名:class->className for->htmlFor tabindex -> tabIndex

3.没有子节点的React元素可以使用/>结束

4.推荐:使用小括号包裹JSX 从而避免js中自动插入分号的陷阱

5.单大括号可以使用任意类型的javaScript表达式

6.JSX自身也是JS表达式

注意:JS中的对象是一个例外 一般只会出现到style属性中

注意不能在{}中出现语句（例如：if/for等）

嵌入表达式

代码存储在js中

语法:{javaScript表达式}

<script>
    const age = 18
    const div = （
         <div>你好我今年{age}岁<div>
    ）
</script>

JSX条件渲染

1.可以通过if判断渲染

2.也可以通过三元运算符进行渲染

3.或逻辑与运算符

JSX的列表渲染

1.如果渲染一组数据 应该使用map()方法

2.注意渲染列表要添加key key值要是唯一的

3.原则map()遍历谁就给谁添加key属性

const songs = [
     {id:1,name："张三"},
     {id:2,name："李四"},
     {id:3,name："王二"}
]
 
const list =(
    <ul>
         {songs.map(item=><li>{item.name}</li>)}   
    </ul>
)

JSX的样式处理

行内样式

style={{color:red}}

类名---className(推荐)

创建应该css文件夹 写完样式后

导入这个文件夹

import ’index.css‘