简单语法写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
<!-- 用于解析babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root1"></div>
<script type="text/babel">
//es6方法创建,jsx简单写法
/*
* jsx语法
* jsx是js语法扩展，可以嵌套表达式，在编译之后jsx表达式会被转为普通的js函数调佣，并且对其取值后得到js对象
* jsx特定属性：可以使用引号讲属性值指定为字符串字面量，也可以用大括号来给属性中插入一个表达式
*
*/
let name='fxt'
let flag=true
let id='hello'
let root2=document.getElementById('root1')
let div= <div className='hello'>
<h1 id={id}>hello {name}</h1>
<p>{name}</p>
<p>{flag? 'hello':'world'}</p>
</div>
ReactDOM.render(div,root2)
// ReactDOM在渲染所有内容之前，默认会惊醒转义，他可以确保我们的应用永远不会被注入那些并不是我们自己编写的代码
// 所有内容在渲染之前都被转换成了字符串，这样可以有效的防止我们的xss（cross0site-scripting,跨站脚本）攻击
</script>
</body>
</html>
