React基础教程(三)：JSX语法
1、JSX简介
- 全称：JavaScript XML
- react定义的一种类似于XML的JS扩展语法：JS+XML
- 本质是
React.createElement(component, props, ...children)方法的语法糖 - 作用：用来简化创建虚拟DOM（
注意：它不是字符串，也不是HTML/XML标签；它最终产生的就是一个JS对象） - 标签名任意：HTML标签或其他标签
2、JSX语法规则
- 定义虚拟DOM的时候不要写引号
- 标签中混入JS表达式时要用
{} - 样式的类名指定不要用
class，要用className - 内联样式，要用
style={{key:value}}的形式去写 - 虚拟DOM必须只有一个根标签
- 标签必须闭合
- 标签首字母：①若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。②若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello React</title><!-- 引入react核心库--><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom--><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js--><script src="../js/babel.min.js"></script>
</head>
<body>
<!-- 准备容器-->
<div id="test"></div><!--此处一定要写babel-->
<script type="text/babel">const myId = "react";const myData = "Hello React !!!";// 1、创建虚拟DOMconst virtualDOM = (<div><h1 className={'title'} id={myId}><span style={{color: "red", fontSize: '29px'}}>{myData}</span></h1><h1 className={'title'} id={myId.toUpperCase()}><span style={{color: "red", fontSize: '29px'}}>{myData}</span></h1><label><input type="text"/></label></div>);// 2、渲染虚拟DOMReactDOM.render(virtualDOM, document.getElementById("test"));
</script>
</body>
</html>
<style>.title {background-color: bisque;}
</style>
3、JSX小练习
需求：动态展示如下列表：
小插曲：
什么是表达式？
- 一个表达式会产生一个值，可以放在任何一个需要值的地方。
- 下面这些都是表达式
- a
- a+b
- func(1)
- arr.map()
- function test(){}
- 下面这些都是表达式
- 语句/代码
- 下面这些都是语句/代码
- if(){}
- for(){}
- switch(){case:xxxx}
- 下面这些都是语句/代码
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title><!-- 引入react核心库--><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom--><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js--><script src="../js/babel.min.js"></script>
</head>
<body>
<!-- 准备容器-->
<div id="test"></div>
<!--此处一定要写babel-->
<script type="text/babel">// 模拟一些数据const data = ['Angular', 'React', 'Vue'];// const obj = {name1:'Angular', name2:'Angular', name3:'Angular'};// 1、创建虚拟DOMconst virtualDOM = (<div><h2>前端js框架列表</h2><ul>{data.map((item, index)=>{return <li key={index}>{item}</li>})}</ul></div>); /*此处一定不要写引号，因为不是字符串。这是JSX语法*/// 2、渲染虚拟DOMReactDOM.render(virtualDOM, document.getElementById("test"));
</script>
</body>
</html>
