工程网站开发,定制做网站开发,潍坊尚呈网站建设公司 概况,百度seo排名如何提升1. JSX介绍
概念#xff1a;JSX是 JavaScript XML#xff08;HTML#xff09;的缩写#xff0c;表示在 JS 代码中书写 HTML 结构 作用#xff1a;在React中创建HTML结构#xff08;页面UI结构#xff09; 优势#xff1a;
采用类似于HTML的语法#xff0c;降低学习成…1. JSX介绍
概念JSX是 JavaScript XMLHTML的缩写表示在 JS 代码中书写 HTML 结构 作用在React中创建HTML结构页面UI结构 优势
采用类似于HTML的语法降低学习成本会HTML就会JSX充分利用JS自身的可编程能力创建HTML结构 注意JSX 并不是标准的 JS 语法是 JS 的语法扩展浏览器默认是不识别的脚手架中内置的 babel/plugin-transform-react-jsx 包用来解析该语法
2. JSX中使用js表达式
语法{ JS 表达式 } const name ‘名字’
你好我叫{name} //
你好,我叫Judian 可以使用的表达式 字符串、数值、布尔值、null、undefined、object [] / {} 1 2、‘abc’.split(‘’)、[‘a’, ‘b’].join(‘-’)fn() 特别注意 if 语句/ switch-case 语句/ 变量声明语句这些叫做语句不是表达式不能出现在 {} 中
3. JSX列表渲染
页面的构建离不开重复的列表结构比如歌曲列表商品列表等我们知道vue中用的是v-forreact这边如何实现呢 实现使用数组的map 方法 案例
// 定义个列表
constsongs [{ id: 1, name: 痴心绝对},{ id: 2, name: 像我这样的人},{ id: 3, name: 南山南}
]
functionApp() {return(divclassNameAppul{songs.map(item li{item.name}/li)}/ul/div)
}注意点需要为遍历项添加 key 属性
key 在 HTML 结构中是看不到的是 React 内部用来进行性能优化时使用key 在当前列表中要唯一的字符串或者数值String/Number如果列表中有像 id 这种的唯一值就用 id 来作为 key 值如果列表中没有像 id 这种的唯一值就可以使用 index下标来作为 key 值
4. JSX条件渲染
作用根据是否满足条件生成HTML结构比如Loading效果 实现可以使用 三元运算符 或 逻辑与()运算符 案例
// 来个布尔值
constflag truefunctionApp() {return(divclassNameApp{/* 条件渲染字符串 */}{flag ? react真有趣 : vue真有趣}{/* 条件渲染标签/组件 */}{flag ? spanthis is span/span: null}/div)
}5. JSX样式处理
• 行内样式 - style
functionApp() {return(divclassNameAppdivstyle{{color:red }}this is a div/div/div)
}exportdefaultApp • 行内样式 - style - 更优写法
conststyleObj {color:red
}functionApp() {return(divclassNameAppdivstyle{styleObj}this is a div/div/div)
}• 类名 - className推荐
app.css
.title{font-size: 30px;color: blue;
}app.js
import./app.cssfunctionApp() {return(divclassNameAppdivclassNametitlethis is a div/div/div)
}• 类名 - className - 动态类名控制
import./app.cssconstshowTitle truefunctionApp() {return(divclassNameAppdivclassName{showTitle? title :}this is a div/div/div)
}6. JSX注意事项
JSX必须有一个根节点如果没有根节点可以使用/幽灵节点替代所有标签必须形成闭合成对闭合或者自闭合都可以JSX中的语法更加贴近JS语法属性名采用驼峰命名法 class - className for - htmlForJSX支持多行换行如果需要换行需使用() 包裹防止bug出现
格式化配置
安装vsCode prettier插件修改配置文件 setting.json
