【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，要用className
4、内联样式，要用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']
//创建虚拟DOM
const 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>
四、组件与模块化的理解
