什么是JSX
JSX是JavaScript XML的简写，表示在JavaScript代码中编写HTML格式代码
优势：声明式语法更加简洁，与HTML结构相同，提高开发效率
JSX中使用JavaScript表达式
1.基本用法
- 语法：{JavaScript表达式}
- 表达式中的数据存储在JS变量中
let name = '被子'
const dv = (<div>你好，我是:{name}</div>)
ReactDOM.render(dv,document.getElementById("app"))
2. 使用注意点
- 单大括号中正常可以是任意的JavaScript表达式
正确：{1}、{1+1}、{'a'}、{sayHi()}、{另外一个JSX}、{ 1>0 ?'真':'假' } - 单大括号中不能出现语句(例如：if/for等)
错误：{if(1>0){}}、{for(let i=0;i<10;i++){}} - JS对象一般只会出现在style属性中
错误：{{name:'rose'}}
正确：conts Home = <div style={{color:'red'}}></div>
2.JSX创建一个H1元素渲染到页面上
<!-- 导入react、react-dom、babel 三个js文件 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules//react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<div id="app"></div>
<script type="text/babel">
// 用JSX方式创建React元素
let H1 = <h1>Hello React</h1>
// 渲染React元素到页面中
ReactDOM.render(H1,document.getElementById('app'))
</script>
JSX中的条件渲染
- 如果用户登录了显示欢迎登录，未登录显示请登录
let islogin = false;
function JSX(){
// if判断
if(islogin){
return (<p>欢迎登录</p>);
}
return (<p>请登录</p>);
}
// 三元表达式
// function JSX() {
// return (<div>{islogin?'未登录':'登录成功'}</div>)
//}
export default JSX
JSX中的循环渲染
- 在页面上生成一个前端技术书籍列表，就需要用到循环渲染
语法：{ 数组变量.map( item=>( <标签>{item}</标签> ) ) }
注意：map方法前面通常是数组，map方法的箭头函数体内容放到小括
let books = ["DOM编程艺术", "JS高级编程", "React实战"];
function JSX() {
return (
<ul>
{books.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
)
}
JSX中样式处理
1.行内样式处理 - style
let books = ["DOM编程艺术", "JS高级编程", "React实战"];
function JSX() {
return (
<ul>
{books.map((item) => (
<li style={{color:'red',listStyle:'none'}} key={item}>{item}</li>
))}
</ul>
)
}
2.类名样式处理 - className
需要使用 import '样式文件路径/样式文件名称.css'导入样式文件 ,title类在xxx.css文件中定义好
JSX中给元素设置css类名是className而非class，因为class是关键字
import './index.css'
let books = ["DOM编程艺术", "JS高级编程", "React实战"];
function JSX() {
return (
<ul>
{books.map((item) => (
<li className='color' key={item}>{item}</li>
))}
</ul>
)
}
