JSX:是 JavaScript XML的缩写。
在 JS 代码中书写 XML 结构
注意:JSX 不是标准的 JS 语法,是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包,用来解析该语法。
React用它来创建 UI(HTML)结构
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
// jsx创建元素
const list = - html
- js
- css
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))
采用类似于 HTML 的语法,降低了学习成本,会 HTML 就会 JSX
充分利用 JS 自身的能力来创建 HTML 结构。比如,利用 JS 数组的 map 方法创建列表结构
babel在线使用
jsx ---babel---> React.createELement
jsx必须要有一个根节点
属性名不能用js中的关键字。例如class, for
单标签要闭合
换行建议使用()包裹
老版本(16.8)先引入react才能使用jsx
格式1:<> xxx >
import ReactDOM from 'react-dom'
const title = <> Hello React
p标签
>
ReactDOM.render(title, document.querySelector('#root'))
格式2:
import ReactDOM from 'react-dom'
const title = Hello React
p标签
>
ReactDOM.render(title, document.querySelector('#root'))
例如class, for
class -> className
for ->htmlFor
--->
理解引入react的作用(提供createElement的功能)
老版本中不引入就会报错React must be in scope when using JSX
const content = (
xxx
)
{ JS 表达式 }
例如:
import ReactDOM from 'react-dom'
const num = Math.random()
const title = (
随机值:{ num }
)
ReactDOM.render(title, document.querySelector('#root'))
大括号是一种特殊的语法,让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码 而不是字符串
作用:执行{}内部的代码,并输出结果。
1 属性值
const logo = 'https://create-react-app.dev/img/logo.svg'
![]({logo})
2 内容
const name = '小芳'
{name}
可以写
表达式
定义:数据类型和运算符的组合(可以单独出现数据类型,也可以数据类型+运算符的组合)
特点:有值(或者能够计算出一个值); 能被console.log()
其他的jsx表达式
注释
不可以写
对象
js语句:if 语句/ switch-case 语句/ 变量声明语句
import React from 'react'
import ReactDOM from 'react-dom'
const girl = {
name: '小芳',
age: 19,
logo: 'https://create-react-app.dev/img/logo.svg',
skills: ['唱歌', '收稻子']
}
const f1 = () => {
return {girl.skills.join(',')}
}
const baseInfo = (
姓名: {girl.name}
妙龄: {girl.age}
)
const content = (
jsx-表达式
{/* 1. {} 可以用在内容上 */}
{/* {}可以包其他的jsx */}
{baseInfo}
{/* {}可以包表达式 */}
爱好:{girl.skills}
字符串:{'abc'}
字符串:{'{'}
数组:{[1, 2, 3]}
数值:{100}
函数:{f1()}
算数表达式:100/2={100 / 2}
三元表达式:{girl.age < 28 ? '芳龄' : '年龄'} {girl.age}
{/* 2. {}可以用在属性值上 */}
类名组合
{/*
下面是错误的示范
不能输出对象,不能使用语句
{{ a: 1 }}
{var a =1 }
*/}
)
ReactDOM.render(content, document.getElementById('root'))
if/else
三元运算符
逻辑与(&&)运算符
简单情况-用三元表达式
const flag = 0
const content = ({flag ? '达成' : '没有达成'})
简单情况-用逻辑与
const isLogin = true
const content = ({ isLogin && '您登录了'})
复杂情况-使用额外的函数
const loadData = (isLoading) => {
if (isLoading) {
return 数据加载中,请稍后...
} else {
return 数据加载完成,此处显示加载后的数据
}
}
const content = {loadData(true)}
从后端取回来的数据保存在数组中,需要用列表展示。这里的数组如下:
const skills = [
{ id: 1, name: 'html' },
{ id: 2, name: 'css' },
{ id: 3, name: 'js' }
]
我们要生成的dom结构如下:
技能1:html
技能2:css
技能3:js
直接定义一个数组,每个元素都是一个jsx结构
const skills = [技能1:html
, 技能2: css
, 技能3: js
]
const content = {skills}
ReactDOM.render(content, document.getElementById('root'))
// 完整格式
const t = skills.map(function(item) {
return 技能{item.id}: {item.name}
})
const list = {t}
const list = (
{skills.map(item => 技能{item.id}: {item.name}
)}
)
React 内部用来进行性能优化时使用的,在最终的HTML结构中是看不到的。
例如,数据如下
const songs = [
{ id: 1, name: '痴心绝对' },
{ id: 2, name: '像我这样的人' },
{ id: 3, name: '南山南' }
]
生成的dom
- 排名:1 - 歌名:痴心绝对
- 排名:2 - 歌名:想我这样的人
- 排名:3 - 歌名:南山南
如果添加一条数据,则视图也要随之更新,而更新的逻辑是:前三条正常保留,而重新添加第四条。
如果数据中有一个唯一的属性值,就可以使用这个属性来当做key
如果没有,就可以用索引值
格式
要点:
为啥有两个{{ }}
外层的{}表示 要开始写js了
内层的{}表示是一个对象
属性名是小驼峰格式 (background-color ===> backgroundColor)
属性值是字符串, 如果单位是px,可以简写数值
要点
用className(不是class)定义类名
把样式写在额外的.css文件中,然后引入.css文件
import './index.css'
// 类名
我是黑底红字的h1
补充建立.css
.title{
color: red;
width: 200px;
background-color: black;
}
jsx中的样式:
行内: style={{对象,小驼峰}}
外部: className
React 使用 JSX 来编写 UI(HTML)
React 完全利用 JS 语言自身的能力来增强 UI 的编写 - 能用 JS 来实现的功能绝不会增加一个新的 API
现在,就可以使用 React 来编写任意 UI 结构了