React笔记（2）JSX

JSX简介

JSX是JavaScript XML 的缩写，表示在JavaScript代码中写XML格式的代码。
优势：声明语法更加直观、与HTML相同，降低学习成本、提高开发效率。
JSX是React的核心内容。

使用步骤

1. 使用JSX语法创建react元素
2. 渲染React元素

//导入react
import React from "react";
import ReactDOM  from "react-dom";

//使用JSX创建react元素
const title = <h1>Hello JSX</h1>

//渲染react
ReactDOM.render(title,document.getElementById('root'))

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

(1）. JSX不是标准的ECMAScript语法，它是ECMASCript的语法扩展。
(2). 需要使用babel编译处理后，才能在浏览器环境中使用。
(3). create-react-app脚手架中已经默认有该配置，无需手动配置
(4). 编译 JSX 语法的包：@babel/preset-react

4. 注意点
   （1）React元素采用驼峰命名法
   （2）特殊属性名：class->className、for ->htmlFor 、tabindex->tabIndex
   （3）没有子节点的React元素可用 /> 结束
   （4）推荐使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

const dv = (
<div>Hello</div>
)

JSX中使用JavaScript表达式

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

const  name = 'sicily'
const dv =(
  <div>hello, I'm {name}</div>
)

JSX的条件渲染

场景：loading效果
可用if/else 、三元表达式、逻辑与运算符

//条件渲染
const isLoading =false
const loadData = () => {
  if(isLoading){
    return <div>load...</div>
  }
  return <div>数据加载完成，显示加载后数据</div>
}

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

列表渲染
渲染一组数据使用数据的map（）方法
注意渲染列表时要添加key属性，key属性的值要保证唯一
原则：map（）遍历谁就给谁添加key属性，尽量避免索引号做key

JSX的样式处理

1. 行内样式——style

//行内样式
const list =(
  <h1 style={{color:'green',backgroundColor:'styblue'}}>
    样式处理
  </h1>
)
//渲染react
ReactDOM.render(list,document.getElementById('root'))

2. 类名——className(推荐)
   在css文件中写样式
   在jsx中使用css的样式：

//引入css文件
import “./index.css”

注释

{/*  注释内容*/}

嵌套

与在HTML中类似