【REACT全家桶-02JSX】

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

一、基本使用

1.1注意：

JSX不是ES的标准语法，它是ES的语法拓展

需要使用bable编译处理后才能在浏览器环境中使用

编译JSX的包：@bable/preset-react

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

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

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

1.2原理：

bable进行编译，转成js对象，用R二act DOM.remder()方法将这个对象转成DOM元素，最后插入页面。

 二、JSX中使用js表达式

语法：{JS表达式}

let ok=123;
const test=(
<p>{ok}</p>
)

三、条件渲染

可以使用if，三元运算符，逻辑运算符

let is=true
const ok=()=>{
if(is)return(<div>开心一点</div>)
return(<div>烦恼少点</div>)
}

四、列表渲染

使用数组map方法

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

五、样式处理

5.1行内样式 style

const title=<h1 style={{width:"200px",height:"100px"}}>你好</h1>

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

5.2类名 className(推荐) 使用import导入css样式表