中文网站建设设计,制作小公司网站一般多少钱,wordpress 社交登陆,网络空间 网站 域名JSX 介绍
学习目标#xff1a; 能够理解什么是 JSX#xff0c;JSX 的底层是什么 概念#xff1a; JSX 是 javaScriptXML(HTML) 的缩写#xff0c;表示在 JS 代码中书写 HTML 结构 作用#xff1a; 在 React 中创建 HTML 结构#xff08;页面 UI 结构#xff09; 优势 能够理解什么是 JSXJSX 的底层是什么 概念 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 truereturn (div classNameApp{name}{age()}{flag ? 真棒 : 真菜}/div)
}export default App可以使用的表达式 1.字符串、布尔值、数值、null、undefined、object([]/{}) 2.算数运算12、字符串方法“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 classNameApp{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 classNameAppul{stu.map((item) (li key{item.id}姓名{item.name},年龄{item.age}/li))}/ul/div
)运行结果
JSX 条件渲染
学习目标 能够在 JSX 中实现条件渲染 作用 根据是否满足条件生成 HTML 结构比如 Loading 效果 实现 可以使用三元运算符或者逻辑与运算符 实例
function App() {// 条件渲染// 技术方案1.三元表达式常用 2.逻辑与运算const flag truereturn (div classNameApp1.三元表达式br/(1).简单版{flag ? spanthis is span/span:null}br/(2).复杂版可用小括号包裹起来{flag ? (divspanthis is span2/span/div) : null}2. (前面为true则显示false则不显示))br/{true spanthis is span/span}/div);
}export default App;运行结果
JSX 模板精简原则
学习目标 使模板中的逻辑跟简洁 实现 复杂的多分枝的逻辑收敛为一个函数通过一个专门的函数来写分支逻辑模板中只负责调用 实例
// 有一个状态type有123三种
// 1 展示 h1
// 2 展示 h2
// 3 展示 h3const title (type) {if(type 1){return h1this is h1/h1}else if(type 2){return h2this is h2/h2}else if(type 3){return h3this is h3/h3}
}return (div classNameApp{title(1)}{title(3)}{title(2)}/div);
}export default App;运行结果
JSX 样式处理
学习目标 能够在 JSX 中实现 CSS 样式处理 1. 行内样式 实现 在元素身上绑定一个 style 样式 - 行内样式 · style
function APP(){return (div classNameAppdiv style{{color:red,fontSize:10px}}this is div/div/div)
}
export default App- 行内样式·style·优化写法
function App() {const divStyle1 {color:blue,fontSize:20px}return (div classNameAppdiv 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.css3. 在元素上用 className 属性绑定 class 样式 div classNamecolors类名样式/div运行结果
JSX 动态类名控制
学习目标 根据需求判断是否显示某个类名的样式 实现 使用三元表达式或逻辑运算
import ./app.css;
function App() {const color1 trueconst color2 truereturn (div classNameApp1. 三元div className{color1?colors:}类名样式/div2. 与div className{color2 colors}类名样式/div/div)
}export default App;运行结果
JSX 注意事项
学习目标 掌握 JSX 实际开发过程中的一些注意事项 1. JSX 必须具有一个根节点如果没有根节点可以使用/(幽灵节点)代替根节点将所有元素包裹起来
function App() {return (div classNameApp1/divdiv className{htmlFor(i in 10)}2/div/)
}export default App;2. 所有标签必须形成闭合(
成对闭合或者自闭
和都可以 3. JSX 中的语法更加贴近 JS 语法属性名采用驼峰命名法
class - className; for - htmlFor 4. JSX 支持多行(换行)如果需要换行需使用
()包裹防止出现 Bug
