1.JSX是什么

• JSX是一种JavaScript的语法扩展
• 用于描述页面,并且可以和JavaScript融合在一起
• 不同于Vue的模板语法,没有Vue中的一些指令(v-if,v-show,v-for)
• 在react 中直接将 JSX 语法和 HTML 语法书写在了一起,这种写法就是JSX

2.JSX书写规范

• JSX只能有一个根元素
• 为了方便阅读,通常在JSX的外层包裹一个小括号()
• 在JSX中的标签可以是单标签也可以是双标签

3.JSX中显示数据

JSX中使用大括号,把变量嵌入到代码中展示给用户

let title = "标题"
return (<div title={title}>{user.name}</div>)

4.添加样式

<div className={divStyle}>div</div>

.divStyle{color:red;
}

隔离作用域

import less from "./index.less"function App =()=>{return (<div className={less.divStyle}>div</div>)
}	

// index.less
.divStyle{color:red;
}

5.条件渲染

function App(){const divTitle = "标签标题",const flag = true,let divContent = "",if(flag) {divContent = <div>flag == true</div>}else{divContent = <div>flag == false</div>}return (<div title={divTitle}>{divContent}{flag ? "男":"女"}</div>)  
}

6.列表渲染

react 中渲染列表使用 JS的map函数,不同于Vue的v-for,
需要注意的是,通过map函数返回的标签元素,都应该有一个key属性.对于列表中的每一个元素,都应该传入一个字符串或者数字给key,用于在其兄弟节点中唯一标识该元素

function App(){const list = [{name:"张三",id:1},{name:"李四",id:2},{name:"王五",id:3},{name:"赵六",id:4}],const listContent = list.map((item)=> <li key={item.id}>{item.name}</>)return (<ul>{listContent}</div>)  
}

7.响应事件

在 jsx 中属性通常是以小驼峰形式命名
注意,onClick={handleClick} 的结尾没有小括号,不要调用 事件处理函数,只需要把函数传递给事件即可 .但用户点击按钮时React 会调用传递的事件处理函数

function App(){function handleClick(){console.log("点击了按钮")}return (<button onClick={handleClick}>按钮</button>)
}

8.更新页面

在页面将一些信息展示出来,例如一个按钮被点击的次数,这时候就需要添加state

1. 从react 中引入useState
2. useState:当前的state(count),以及用于更新它的函数(setCount)
3. 当需要更改的时候,调用更新函数,将新的值传递给它

import {useState} from "react";function App(){const [count,setCount] = useState(0)function handleClick(){setCount(count+1)}return (<><div>{count}</div><button onClick={handleClick}>按钮</button><>)
}