目录
<body>
<!-- 追备好一个容器 -->
<div id="test">
</div>
</body>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于react操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于jsx转 js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 一定要写babel -->
<script type="text/babel">
//创建虚拟dom,此处一定不要写引号。因为不是字符串
const VDOM=<h1> hello_react</h1>
//渲染虚拟dom 到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
<!-- 一定要写babel -->
<script type="text/javascript" >
//创建虚拟dom,此处一定不要写引号。因为不是字符串
const VDOM=React.createElement('h1',{id:'title'},'hello_react')
//渲染虚拟dom 到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
虚拟dDOM比较“轻”，真实DOM比较“重”，以为虚拟DOM是react内部再用，无需真实DOM上那么多的属性
React.createElement('xx',{id:'xx'},'xx')
上面创建的就是一个简单的虚拟DOM对象
XML
//早期用于存储和传输数据
<student>
<name>tom</name>
<age>18</age>
</student>JSON
"{"name:"tom","age":"18"}"
JSON.parse 转对象
JSON.stringfy 转JSON字符串const VDOM=(
<div>
<h1 className='title' id={myId.toLocaleLowerCase()}>
<span style={{color:"pink",fontSize:'30px'}}>{myData.toLocaleLowerCase()}</span>
</h1>
<input type="text"/>
</div>
)
//渲染虚拟dom 到页面
ReactDOM.render(VDOM,document.getElementById('test'))
不能渲染对象的，
注意区分【JS语句】与【JS表达式】，
<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'))当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
