JSX 介绍
学习目标： 能够理解什么是 JSX，JSX 的底层是什么
概念： JSX 是 javaScriptXML(HTML) 的缩写，表示在 JS 代码中书写 HTML 结构
作用： 在 React 中创建 HTML 结构（页面 UI 结构）
优势：
1. 采用类似 HTML 的语法，降低学习成本，会 HTML 就会 JSX
2. 充分利用 JS 自生的可编程能力创建 HTML 结构
注意： JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的@babel/plugin-transform-react-jsx 包，用来解析该语法，将声明式的 JSX 解析为命令式的函数调用
JSX 中使用 js 表达式
学习目标： 能够在 JSX 中使用表达式
语法：{JS 表达式}
function App() {
// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {
return 25
}
//3.三元运算符
const flag = true
return (
<div className="App">
{name}
{age()}
{flag ? '真棒' : '真菜'}
</div>
)
}
export default App
可以使用的表达式
1.字符串、布尔值、数值、null、undefined、object([]/{})
2.算数运算（1+2）、字符串方法（“abcde”.split(’’)）、数组方法（[‘a’,‘b’].join(’-’)）
3. fn()
特别注意
if 语句/switch-case 语句/变量声明语句，这些叫做语句，不是表达式，不能书写在{}中！！！
// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {
return 25
}
//3.三元运算符
const flag = true
// 其他的自行尝试...
return (
<div className="App">
{name}
<br />
{age()}
<br />
{flag ? '真棒' : '真菜'}
<br />
</div>
)
JSX 列表渲染
学习目标： 能够在 JSX 中实现列表渲染
页面的构建离不开重复的列表结构，比如歌曲列表，商品列表等等，Vue 中用的式 v-for 做到这一点，react 中又该如何实现呢？
实现： 使用数组的 map 方法
案例:
// 技术方案：map 重复渲染的是哪个模板 就return那个
// 注意事项：遍历列表时同样需要一个类似number/string不可重复的key 提高diff性能
// key仅仅在内部使用，不会出现在真实的dom结构
const stu = [
{ id: 1, name: '小明', age: 18 },
{ id: 2, name: '李华', age: 19 },
{ id: 3, name: '小红', age: 17 },
{ id: 4, name: '小芳', age: 17 },
]
return (
<div className="App">
<ul>
{stu.map((item) => (
<li key={item.id}>
姓名：{item.name},年龄：{item.age}
</li>
))}
</ul>
</div>
)
运行结果：
JSX 条件渲染
学习目标： 能够在 JSX 中实现条件渲染
作用： 根据是否满足条件生成 HTML 结构，比如 Loading 效果
实现： 可以使用三元运算符或者逻辑&&（与）运算符
实例：
function App() {
// 条件渲染
// 技术方案：1.三元表达式（常用） 2.逻辑&&（与）运算
const flag = true
return (
<div className="App">
1.三元表达式<br/>
(1).简单版：
{flag ? <span>this is span</span>:null}<br/>
(2).复杂版（可用小括号包裹起来）：
{
flag ? (<div>
<span>this is span2</span>
</div>) : null
}
2.&& (前面为true则显示，false则不显示))<br/>
{true && <span>this is span</span>}
</div>
);
}
export default App;
运行结果：
JSX 模板精简原则
学习目标： 使模板中的逻辑跟简洁
实现： 复杂的多分枝的逻辑收敛为一个函数，通过一个专门的函数来写分支逻辑，模板中只负责调用
实例：
// 有一个状态type有1，2，3三种
// 1 展示 h1
// 2 展示 h2
// 3 展示 h3
const title = (type) =>{
if(type === 1){
return <h1>this is h1</h1>
}
else if(type === 2){
return <h2>this is h2</h2>
}
else if(type === 3){
return <h3>this is h3</h3>
}
}
return (
<div className="App">
{title(1)}
{title(3)}
{title(2)}
</div>
);
}
export default App;
运行结果：
JSX 样式处理
学习目标： 能够在 JSX 中实现 CSS 样式处理
1. 行内样式
实现： 在元素身上绑定一个 style 样式
- 行内样式 · style
function APP(){
return (
<div className="App">
<div style={{color:'red',fontSize:'10px'}}>this is div</div>
</div>
)
}
export default App
- 行内样式·style·优化写法
function App() {
const divStyle1 = {
color:'blue',
fontSize:'20px'
}
return (
<div className="App">
<div style={divStyle1}>this is div</div>
</div>
)
}
export default App;
2. 类名样式
实现： 在元素身上绑定一个 className 属性即可
1. 创建一个 css 样式表文件 app.css
.colors {
color: peru;
font-size: 40px;
}
2. JSX 中引入 css 文件
// 使用import引入样式表文件
import './app.css'
3. 在元素上用 className 属性绑定 class 样式
<div className='colors'>类名样式</div>
运行结果：
JSX 动态类名控制
学习目标： 根据需求判断是否显示某个类名的样式
实现： 使用三元表达式或逻辑&&运算
import './app.css';
function App() {
const color1 = true
const color2 = true
return (
<div className="App">
1. 三元：
<div className={color1?'colors':''}>类名样式</div>
2. &&（与）
<div className={color2 && 'colors'}>类名样式</div>
</div>
)
}
export default App;
运行结果：
JSX 注意事项
学习目标： 掌握 JSX 实际开发过程中的一些注意事项
1. JSX 必须具有一个根节点，如果没有根节点可以使用<></>(幽灵节点)代替根节点将所有元素包裹起来文章来源：https://www.toymoban.com/news/detail-721704.html
function App() {
return (
<>
<div className="App">1</div>
<div className={htmlFor(i in 10)}>2</div>
</>
)
}
export default App;
2. 所有标签必须形成闭合(文章来源地址https://www.toymoban.com/news/detail-721704.html
），成对闭合或者自闭（ ）和都可以3. JSX 中的语法更加贴近 JS 语法，属性名采用驼峰命名法
class -> className; for -> htmlFor
4. JSX 支持多行(换行)，如果需要换行，需使用
()包裹，防止出现 Bug
到了这里，关于JSX看着一篇足以入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
