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、创建虚拟DOM
const 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、渲染虚拟DOM
ReactDOM.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、创建虚拟DOM
const virtualDOM = (
<div>
<h2>前端js框架列表</h2>
<ul>
{
data.map((item, index)=>{
return <li key={
index}>{
item}</li>
})
}
</ul>
</div>
); /*此处一定不要写引号，因为不是字符串。这是JSX语法*/
// 2、渲染虚拟DOM
ReactDOM.render(virtualDOM, document.getElementById("test"));
</script>
</body>
</html>