react基础(一)

jsx的基础概念与使用

• jsx是javascript的简写，表示Javascirpt 代码中写xml格式的代码
• 优势 声明式语法 更加直观 与HTML结构相同 降低了学习成本 提升开发效率

使用JSX语法创建react元素

//使用jsx语法创建react元素
const title = <h1>hello JSX</h1>
//渲染创建好的元素
ReactDOM.render(title,root)

注意：

1. react元素的属性名使用驼峰命名法
2. 特殊属性名 class - className
3. 没有子节点的react元素可以用/>结束
4. 推荐：使用小括号包裹jsx，从而避免js中自动插入分号陷阱

jsx嵌入js表达式

1. .数据存储在js中
2. 语法{javascript表达式}

const name = 'Jack'
const dv = (
    <div>我叫{
    
    name}</div>
)

注意

• 单大括号中可以使用任意的JavaScript表达式
• jsx自身也是js表达式
• jsx对象是个例外 一般只会出现在style属性中
• 不能再{}中出现语句 比如if/for等

jsx的条件渲染

条件渲染：根据条件渲染特定的jsx结构

可以使用if/else或三元运算符或逻辑运算符来使用

const isLoading = false
//if/else
const loadData = () =>{
    
    
    if(isLoading){
    
    
        return <div>loading......</div>
    }
    return <div>数据加载完成</div>
}
//三元运算符
const loadData = () =>{
    
    
    return isLoading ? (<div>loading......</div>) : (<div>数据加载完成</div>) 
}

// 逻辑与运算符  与上面效果不一致 可以完成条件渲染

const loadData = () =>{
    
    
    return isLoading && (<div>loading......</div>) 
}

const title = (
    <h1>
        条件渲染
        {
    
    loadData()}
    </h1>
)

jsx的列表渲染

如果渲染一组数据应该使用数组的map()方法
注意：渲染列表时应该添加key属性 key属性的值要保证唯一
原则：map()遍历谁，就给谁添加key属性

const song = [
    {
    
    id:1,name:'常安'},
    {
    
    id:2,name:'常安1'},
    {
    
    id:3,name:'常安2'}

]

const list = (
    <ul>
        {
    
    song.map(item => <li key={
    
    item.id}>{
    
    item.name}</li>)}

    </ul>
)

jsx样式处理

1. 行内样式—style

const list = (
    <h1 style={
    
    {
    
    color:'red', backgroundColor:'skyblue'}}>
        jsx的样式处理
    </h1>
)

 **2.类名 ---- className(推荐)**

```js
const list = (
    <h1 className='title'>
        jsx的样式处理
    </h1>
)