笔记--JSX

1. JSX 的基本使用

1.1 createElement() 的问题

1.2 JSX 简介

1.3 JSX 基本使用

// index.js 文件
// 1. 导入react，react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 调用React.createElement() 方法创建react元素
const title = <h1> Hello JSX!!!!!! </h1>

// 3. 调用ReactDOM.render()方法将创建的react元素渲染到页面中
ReactDOM.render(title, document.getElementById('root'))

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

1.4 注意点

2. JSX 中使用JavaScript表达式

嵌入 JS 表达式

// 1. 导入react，react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 调用React.createElement() 方法创建react元素
const data = 'js的数据'
const age = 19
const title = (
    <h1> Hello JSX!!!!!! <p>我是：{ data }，年龄：{ age }</p></h1>
    
)

// 3. 调用ReactDOM.render()方法将创建的react元素渲染到页面中
ReactDOM.render(title, document.getElementById('root'))

3. JSX 条件渲染

// index.js 文件
// 1. 导入react，react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 调用React.createElement() 方法创建react元素
// 条件渲染
const isLoading = true
const loadData = ()=>{
    if(isLoading){
        return <div>数据加载中...</div>
    }

    return <div>数据加载完成，请指示！！！！</div>
}
// 三元运算符
const loadData1 = () => {
    return isLoading ? <div>三元运算符数据加载中。。。。</div> : <div>三元运算符数据加载完成！！</div>
}
// 逻辑&&运算符
const loadData2 = () => {
    return isLoading && <div>逻辑与运算符数据加载中。。。。</div>
}
const title = (
    <h1>
        条件渲染：
        { loadData() }
        三元运算符：
        { loadData1() }
        逻辑与运算符：
        { loadData2() }
    </h1>
)
// 3. 调用ReactDOM.render()方法将创建的react元素渲染到页面中
ReactDOM.render(title, document.getElementById('root'))

4. JSX 列表渲染

// index.js 文件
// 1. 导入react，react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'

// 列表渲染
const songs = [
    {id:1, named: '雇佣者'},
    {id:2, named: '自由飞翔'},
    {id:3, named: 'live'}
]

const list = (
    <ul>
        {/* 记得要添加key属性，避免用索引号来设置key属性，最好是唯一的id */}
        { songs.map(item => <li key={item.id}>{item.named}</li>) }
    </ul>
)

// 将数据渲染到页面中
ReactDOM.render(list, document.querySelector('#root'))

5. JSX 样式处理

类名添加样式注意：要先导入css文件，import 'path'

// 1. 导入react，react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'
// 引入CSS
import './index.css'

// 样式处理
const songs = [
    {id:1, named: '雇佣者'},
    {id:2, named: '自由飞翔'},
    {id:3, named: 'live'}
]

const list = (
    // 行内样式
    <ul style={
        {color: 'red',backgroundColor:'blue'}
    }>
        {/* 记得要添加key属性，避免用索引号来设置key属性，最好是唯一的id */}
        { songs.map(item => <li key={item.id}>{item.named}</li>) }
        {/* 类名添加css, 注意：首先导入css文件，import 'path' */}
        <li className='title'>类名添加</li>
    </ul>
)

// 将数据渲染到页面中
ReactDOM.render(list, document.querySelector('#root'))