1.什么是jsx
JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码
优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。
JSX是react的核心内容
注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法。
2.使用jsx创建react元素
- 导入react和reactDOM
// 导入react和react-dom import React from 'react' import ReactDOM from 'react-dom'
- 创建react元素
// 创建元素 const title = <h1 title="哈哈"></h1>
- 渲染元素
// 渲染元素 ReactDOM.render(title, document.getElementById('root'))
3.jsx中使用javascript表达式 {}
3.1 在jsx中可以在{}来使用js表达式
const name = 'zs'
const age = 18
const title = (
<h1>
姓名：{name}, 年龄：{age}
</h1>
)
在{}中可以访问对象的属性，访问数组的下标，可以使用三元运算符，可以调用方法。
3.2 JSX本身
const span = <span>我是一个span</span>
const title = <h1>盒子{span}</h1>
3.3 JSX中的注释
{/* 这是jsx中的注释 */} 推荐快键键 ctrl + /
4.jsx中使用条件渲染
在react中，一切都是javascript，所以条件渲染完全是通过js来控制的
//通过判断if/else控制
const isLoding = false
const loadData = () => {
if (isLoding) {
return <div>数据加载中.....</div>
} else {
return <div>数据加载完成，此处显示加载后的数据</div>
}
}
const title = <div>条件渲染：{loadData()}</div>
//通过三元运算符控制
const isLoding = false
const loadData = () => {
return isLoding ? (
<div>数据加载中.....</div>
) : (
<div>数据加载完成，此处显示加载后的数据</div>
)
}
//逻辑运算符
const isLoding = false
const loadData = () => {
return isLoding && <div>加载中...</div>
}
const title = <div>条件渲染：{loadData()}</div>
5.jsx中使用列表渲染
const songs = ['温柔', '倔强', '私奔到月球']
const dv = ( <div> <ul> {songs.map(song => ( <li key={song}>{song}</li> ))} </ul> </div> )
注意：列表渲染时应该给重复渲染的元素添加key属性，key属性的值要保证唯一
注意：key值避免使用index下标，因为下标会发生改变
6.jsx中添加样式
6.1 行内样式style
const dv = (
<div style={{ color: 'red', backgroundColor: 'pink' }}>style样式</div>
)
6.2 类名className
// 导入样式
import './base.css'
const dv = <div className="title">style样式</div>
// base.css样式文件
.title {
text-align: center;
color: red;
background-color: pink;
}
7.总结
-
JSX是React的核心内容
-
JSX表示在JS代码中书写HTML结构，是React声明式的体现
-
使用JSX配合嵌入的JS表达式，条件渲染，列表渲染，可以渲染任意的UI结构
-
结果使用className和style的方式给JSX添加样式
-
React完全利用JS的语言自身的能力来编写UI，而不是造轮子增强HTML的功能。（对比VUE）
标签：const,渲染,jsx,title,react,使用,JSX From： https://www.cnblogs.com/lijingru/p/16852943.html