React教程（二）JSX介绍
2 JSX
本节目标
- 知道什么是JSX
- 使用JSX创建React元素
- 在JSX中使用JavaScript表达式
- 使用JSX的条件渲染和列表渲染
- 给JSX添加样式
2.1 JSX基本使用
2.1.1 createElement()的问题
- 繁琐不简洁
- 不直观，无法一眼看出所描述的结构
- 不优雅，用户体验不爽
2.1.2 JSX简介
JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
2.1.3 使用步骤
-
使用 JSX 语法创建 react 元素
-
const title = <h1>Hello JSXh1>
-
-
使用 ReactDOM.render() 方法渲染 react 元素到页面中
-
ReactDOM.render(title,root)
-
整体代码：
import React from 'react'
import ReactDOM from 'react-dom'
// 使用JSX创建react元素
const title = <h1>Hello JSX</h1>
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
2.1.4 小结
-
推荐使用JSX语法创建React元素
-
写JSX就和写HTML一样，更加直观、友好
-
JSX语法更能体现React的声明式特点（描述UI）
-
使用步骤
-
// 使用JSX创建react元素 const title = <h1>Hello JSX</h1> // 渲染react元素 ReactDOM.render(title, document.getElementById('root'))
-
2.1.5 为什么脚手架中可以使用JSX语法
- JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展。
- 需要使用babel编译处理后，才能在浏览器环境中使用。
- create-react-app脚手架中已经默认有该配置，无需手动配置。
- 编译JSX语法的包为：@babel/preset-react。
2.1.6 注意点
-
React元素的属性名使用驼峰命名法
-
特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex 。
1.
2.
-
没有子节点的React元素可以用 /> 结束 。
-
推荐：使用小括号包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。
-
// 使用小括号包裹 const title = ( <h1 className="title"> Hello JSX <span /> </h1> )
-
2.2 JSX中使用JavaScript表达式
2.2.1 嵌入表达式
- 数据存储在JS中
- 语法：{ JavaScript表达式 }
- 注意：语法中是单大括号，不是双大括号！
const name = 'kevin'
const dv = (
<div>
你好，我叫：？？？
div>
)
const title = (
<h1 className="title">
Hello {name}
h1>
)
运行结果：
2.2.2 注意点
-
单大括号中可以使用任意的 JavaScript 表达式
-
-
JSX 自身也是 JS 表达式
-
-
注意：JS 中的对象是一个例外，一般只会出现在 style 属性中
-
-
注意：不能在{}中出现语句（比如：if/for 等）
-
2.3 JSX的条件渲染
- 场景：loading效果
- 条件渲染：根据条件渲染特定的 JSX 结构
- 可以使用if/else或三元运算符或逻辑与运算符来实
if - else实现
import React from 'react'
import ReactDOM from 'react-dom'
// 条件渲染
const isLoading = true
const loadData = () =>{
if(isLoading){
return <div>loading...</div>
}
return <div>loaded</div>
}
const title = (
<h1>
条件渲染：
{loadData()}
</h1>
)
ReactDOM.render(title, document.getElementById('root'))
当isLoad=false的时候
三元组形式实现
const loadData = () =>{
return isLoading ? (<div>loading...</div>) : (<div>loaded</div>)
}
逻辑与运算符实现
==备注：==这种方式可能和上面两种方式达到的效果不太一样。但是逻辑与运算符是可以实现条件渲染的。
// 逻辑与运算符
const isLoading = true
const loadData = () =>{
return isLoading && (<div>loading...</div>)
}
2.4 JSX的列表渲染
- 如果要渲染一组数据，应该使用数组的map()方法
- 注意：渲染列表时应该添加 key 属性，key 属性的值要保证唯一
- 原则：map() 遍历谁，就给谁添加 key 属性
- 注意：尽量避免使用索引号作为 key
const songs = [
{id: 1, name: '痴心绝对'},
{id: 2, name: '像我这样的人'},
{id: 3, name: '南山南'},
]
const list = (
<ul>
{songs.map(item => <li>{item.name}</li>)}
</ul>
)
整体代码如下：
import React from "react";
import ReactDOM from "react-dom";
import './index.css'
const songs = [
{id: 1, name: '痴心绝对'},
{id: 2, name: '像我这样的人'},
{id: 3, name: '南山南'},
]
const list = (
<ul>
{songs.map(item => <li>{item.name}</li>)}
</ul>
)
ReactDOM.render(list, document.getElementById('root'))
运行结果
2.5 JSX的样式处理
1、行内样式
<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
JSX的样式处理
</h1>
2、类名——className（推荐）
<h1 className="list">
JSX的样式处理
</h1>
使用类名这种方式的话，我们需要新建一个.css文件，在css文件中定义之后，在js文件中引入样式文件即可。
例如：我新建了一个index.css文件，代码如下：
.list{
color: chocolate;
font-size: large;
}
在js文件中需要引入.css文件。整体.js文件代码如下
import React from "react";
import ReactDOM from "react-dom";
import './index.css'
const songs = [
{id: 1, name: '痴心绝对'},
{id: 2, name: '像我这样的人'},
{id: 3, name: '南山南'},
]
const list = (
<ul className="list">
{songs.map(item => <li>{item.name}</li>)}
</ul>
)
ReactDOM.render(list, document.getElementById('root'))
运行结果如下：
2.6 总结
- JSX是React核心内容
- JSX 表示在JS代码中写HTML结构，是React声明式的体现。
- 使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染，可以描述任意UI 结构。
- 推荐使用 className 的方式给JSX添加样式。
- React 完全利用 JS 语言自身的能力来编写UI，而不是造轮子增强 HTML功能.