JSX的基本使用

1.1createElement（）的问题

• 繁琐不简洁
• 不直观，无法一眼看出所描述的结构
• 不优雅，用户体验不好

1.2JSX简介
JSX是JavaScript XML地简写，表示在JavaScript代码中写XML（HTML）格式的代码。
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率

1.3为什么脚手架中可以使用JSX语法

• JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展
• 需要使用babel编译处理，才能在浏览器中使用
• create-react-app脚手架已经默认有该配置、无需动手配置
• 编译JSX语法的包为：@babel/preset-react

1.4注意点

• React元素的属性名使用驼峰命名法
• 特殊属性名：class–》className、for----》htmlFor、tabindex–》tabIndex
• 推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

1.5JSX使用步骤

//1.使用JSX语法，创建React元素
 const dv = (
          <h1>Hello JSX</h1>
        )
//2.渲染创建好的React元素
        ReactDOM.render(dv,document.getElementById('root'))

2.JSX中使用JavaScript表达式
嵌入JS表达式

• 数据存储在JS中
• 语法{JavaScript表达式}

const name = "lili"
const dv = (
	<div>my name is:{name}</div>
)

使用JavaScript注意点

//函数表达式
 const saiHi=()=> 'Hi'

        const dv = (
          <h1>Hello JSX
            <p>{1}</p>
            <p>{'a'}</p>
            <p>{1+7}</p>
            <p>{3>5? 'big':'small or equal'}</p>
            <p>{saiHi()}</p>
          </h1>
        )
        ReactDOM.render(dv,document.getElementById('root'))

注意点

• 单大括号中可以使用任意的JavaScript表达式
• JSX本身也是JS表达式
• 注意：JS中的对象是一个例外，一般只会出现在style属性中
• 注意：不能在{}中出现语句（比如：it/for等）

 const h = <h1>come on</h1>
  ReactDOM.render(dv,document.getElementById('root'))

3.JSX的条件渲染

• 场景：loading效果
• 条件渲染：根据条件渲染特定的JSX结构
• 可以使用if / else 、三元运算符 、逻辑运算符来实现

 var isloading = false
        var loadDate=()=>{
          if(isloading) return 'loading'
          else return 'finish loading'
        }

        var dv = (
          <div>{loadDate(isloading)}</div>
        )

        ReactDOM.render(dv,document.getElementById('root'))

4.列表渲染

• 如果要渲染一组数据，应该使用map（）方法
• 注意渲染列表时应该添加key属性，key属性的值要保证唯一

var songs = [
        
        {id:1,name:'believer'},
        {id:2,name:'what if'},
        {id:3,name:'laugh'}
       ]

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

       ReactDOM.render(list,document.getElementById('root'))

5.使用className的方式给JSX添加样式
推荐使用className

import React from 'react'
import ReactDOM from 'react-dom'
import '../src/index.css'
       var list = (
        <h1 className='title'>jsx的样式处理</h1>
       )

       ReactDOM.render(list,document.getElementById('root'))