JSX的概述
为什么要学习jsx？
我们在初建react项目的时候，需要使用到react.creatElement去写虚拟dom，在编写过程中太繁琐不直观，不利于开发，而jsx就是解决这个问题，可以直接写一段类似HTML的代码去代替react.creatElement编码。提高开发效率。
JSX是什么？ （react声明式UI）
JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码
JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 <@babel/plugin-transform-react-jsx> 包，用来解析该语法。
babel，高阶语法转成低阶语法，通过使用JSX去声明元素，再转换成虚拟dom。
JSX使用步骤
**前提：**查看当前项目react版本是多少，如果是17之前，使用JSX需要额外导入React，如果是17后，不需要额外导入React。
web页面使用步骤
-
导入
react和react-dom（脚手架已配置好） -
JSX创建react元素(虚拟DOM)
jsx注意： - 外层必须有一个根元素，没有根元素可以使用幽灵节点 `<></>`或者`<React.Fragment></React.Fragment>` - 所以标签必须闭合,但标签/> - 语言更严谨，不能于js关键字同名 `class` =====> `className` `for`========> `htmlFor` - JSX可以换行，如果JSX有多行，推荐使用`()`包裹JSX，防止自动插入分号的bug -
reactDom渲染react元素到页面
代码示例
js
// 1、导入所需的2个要素
import React from 'react';
import ReactDOM from 'react-dom';
// 2、通过jsx 创建虚拟dom
const root = <div class="bgc">hello JSX</div>
// 3、通过ReactDom去渲染到pc页面上,对应public里面index.html根标签
const viewRoot = document.getElementById('root')
ReactDOM.render (root,viewRoot)格式化react代码------prettier插件
如果使用vue、angular的时候把"editor.formatOnSave": false
js
// 保存时使用prettier进行格式化
"editor.formatOnSave": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,配置vscode，在vscode中使用tab键可以快速生成HTML内容
jsx
// 当按tab键的时候，会自动提示
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
// jsx的提示
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}JavaScript表达式和语句
JavaScript表达式：数据类型和运算符的组合（结果有值，可以console.log( 表达式 )）
jsx
数据类型：字符串、数值、布尔值、null、undefined、object（ [] / {} ）
运算符：1 + 2、'abc'.split('')、['a', 'b'].join('-')
声明式：function fn() {}、 fn()JavaScript语句：if语句、for语句、switch语句这种类型。
JSX里面使用JavaScript表达式
JSX里面只能出现表达式，不能出现语句，因为JSX类似虚拟DOM；
比如我们再vue当中使用到的插值语法{{}}
在jsx中使用表达式语法：{ JS 表达式 }
{}可以访问JSX、JSX注释（快键键 ctrl + /）、变量、对象属性obj.xxx、数组下标array0、三元表达式、函数调用fn()
- 比如，
<div>hello {type}</div>
js
// 举例
const type = 'JSX'
const saying = '我正在学习'
const title = (
<div>
hello {type}, {saying}
</div>
)JSX不可以使用JavaScript语句
会报错！！
元素样式控制
行内样式 - style
-
像 width/height 等属性，可以省略 px ，直接使用
数值即可 -
百分比的单位字符串形式使用"90%"
jsxconst showDiv = ( <div style={{ color: 'red', width:'200',backgroundColor: 'black' }}> 行内样式举例</div> )
行外样式 类- className （建议使用）
jsx
// 导入样式
import './total.css'
const dv = <div className="bgc">外部样式</div>条件渲染（如vue中v-if v-else)
- 在react中，通过javascript去控制条件渲染
- 使用
if/else或三元运算符或逻辑与(&&)运算符实现条件的渲染
js
const isLogin = false
// if/else
const showData = () => {
if (isLogin) {
return <div>已登录状态，以下是您的基本信息</div>
} else {
return <div>当前用户未登录，自动跳转至登录界面。。。</div>
}
}
// 三元表达式
const showData = () => {
return isLogin ? (
<div>已登录状态，以下是您的基本信息</div>
) : (
<div>当前用户未登录，自动跳转至登录界面。。。</div>
)
}
//逻辑运算符
const showData = () => {
return isLogin && <div>已登录状态，以下是您的基本信息</div>
}
const show = <div>{showData()}</div> 列表渲染(如v-for，结合设计模式的策略模式)
react通过数组的map方法，结合key值实现列表的渲染
关于列表渲染：
- 作用：需要重复生成相同的 HTML 结构，li、span、a等等
- 实现：使用数组的
map方法 +key属性（作用如vue当中v-for时必须加入的唯一key值一致） - key必须保持唯一，不建议使用index，以下只是举例，建议使用业务当中唯一的id作为标识。
js
const careers = ['医生', '律师', '秃头程序员']
const list = careers.map(career => <li key={index}>{career}</li>)
const careerDiv = (
<div>
<ul>{list}</ul>
</div>
)
// 直接再JSX里面处理
const careerDiv= (
<div>
<ul>{careers.map(career => <li key={index)>{career}</li>)}</ul>
</div>
)