Hello React
学习react目的
为了更好的掌握JavaScript这门语言，提高JavaScript的熟练度，探索与vue不同的开发方式。
Start
- react有三大主要依赖：react、react-dom、babel，在不使用脚手架开发的时候，需要用户先引入这三个依赖
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 使用jsx -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-
react当中使用的是jsx语法，与JavaScript语法区别就是，在jsx当中是可以写html标签的，因此，很多东西我们就可以直接使用jsx来实现，比如组件封装等。使用jsx开发，需要在script标签的type类型更改为text/babel
<script type="text/babel"></script>
创建虚拟DOM
-
在jsx当中创建的DOM元素，会被react使用render函数来转换为虚拟DOM，然后通过diff算法和页面上的DOM进行比对，然后找出更改的地方，然后对页面上的DOM元素进行更新。
<script type="text/babel"> //创建一个DOM元素，然后将它赋值给变量VDOM const VDOM = <h2>Hello React</h2>; //使用ReactDOM.render()来挂载到页面上 //document.getElementById('test'),获取页面上id为test的属性 ReactDOM.render(VDom,document.getElementById('test')) </script> 使用JavaScript来创建虚拟DOM
<script type="text/javascript">
// const VDom = <h1>Hello,React</h1>/*此处一定不能写引号，因为不是字符串*/
// const VDOM = React.createElement("标签名",'标签属性','标签内容')
const VDOM = React.createElement('h1',{id:'title'},'ReactDom')
// 2.渲染虚拟DOM到页面上
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
使用JavaScript来创建虚拟DOM要借助react内置的createElement()来进行创建，这也是react创建虚拟DOM的本质，在jsx当中，每一句html都会隐式的转换成这样
