【React学习】—jsx语法规则（三）-编程知识

【React学习】—jsx语法规则（三）

在这里插入图片描述
一、jsx语法规则：
1、定义虚拟DOM，不要写引号，
2、标签中混入JS表达式要用{}
3、样式的类名指定不要用class，要用className
4、内联样式，要用style={{key:value}}的形式去写
5、虚拟DOM只有一个根表签
6、标签必须闭合
7、标签首字母（若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素则报错）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>使用jsx创建</title><style>.title {background-color: pink;width: 200px;}</style></head><body><!-- 准备好一个容器 --><div id="test">
<!-- jsx语法规则：1、定义虚拟DOM，不要写引号，2、标签中混入JS表达式要用{}3、样式的类名指定不要用class，要用className4、内联样式，要用style={{key:value}}的形式去写5、虚拟DOM只有一个根表签6、标签必须闭合7、标签首字母（若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素则报错）--></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom支持react操作dom --><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">const myId = "CaiCai";const myData = "Hello React";const VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white', fontSize: "20px" }}>{myData.toLocaleUpperCase()}</span></h2><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white', fontSize: "20px" }}>{myData.toLocaleUpperCase()}</span></h2><input type="text"/></div>);ReactDOM.render(VDOM, document.getElementById("test"));</script></body>
</html>

二、区分js语句和表达式

在这里插入图片描述

三、JSX练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>jsx练习</title></head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom支持react操作dom --><script src="../js/react-dom.development.js"></script><!-- 引入Bable 用于将jsx转化为js --><script src="../js/babel.min.js"></script><!-- 此处一定要写Bable --><script type="text/babel">const data=['Angular','React','Vue']//创建虚拟DOMconst VDOM =(<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)//渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script></body>
</html>