1.早期存储和传输数据格式
XML
<student>
<name> </name>
</student>
后来就变为json了
{
"name":"laozhichi",
"age":18
}
在这里的json转化为传统的字符串可以用stringfy的方式进行转化,字符串转化为json可以用stringfy的形式转化
2.jsx语法规则
A.混入js表达式要用{ }
B.样式的类名要用className,不能用class
C.内联样式要用style={{属性:属性值}}的形式进行编写
D.只能有一个根标签
E.标签首字母:若小写字母开头,那么先检测html当中是否有同名的标签,如果没有那么就会报错
若大写字母开头,那么会显示到页面上,不会报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title{
color:blue;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- 引入核心库,记得要放在react-dom前面,因为先有核心库,才能创建好环境引入其他依赖包 -->
<script src="./react.development.js"></script>
<!-- 引入react帮你操作DOM的库 -->
<script src="./react-dom.development.js"></script>
<!-- 将jsx转化为js -->
<script src="./babel.min.js"></script>
<script type="text/babel"> //在这里一定要写成是babel
const myId='laozhichi'
const age=19
const VDOM=(
<div>
<h1 id={myId}>
<span className='title'>{age}</span>
<span tyle={{fontSize:"10px",color:"blue"}}>
</h1>
</div>
)
ReactDOM.render(VDOM,document.getElementById('root'))
</script>
</body>
</html>