话不多说先来代码
`<body>
<div id="test"></div>
</body>`
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script type="text/babel">
let virtualDom = <h1>Hello React</h1>;
ReactDOM.render(virtualDom , document.getElementById('test'))
</script>
上面就是react的一个入门例子。在这个例子中，我们引入了三个js文件，分别是react开发版的核心库，一个react-dom库，还有babel的一个转语法的库。引入这三个库我们就可以进行最基本的react框架书写。
注意：上述最后一个script的type是进行语法转换的，因为浏览器不认识jsx语法，需要将type进行设置
接下来我们对上面的语法进行剖析：
let virtualDom = <h1>Hello React</h1>;
//这是react的jsx语法，实际上上面的语法会进行转换，转换成如下书写方式
let virtualDom = React.createElement('h1' ,attributes , 'hello React');
//上述有三个参数，第一个即是标签名，第二个是要给标签添加的属性，第三个就是标签内的内容
上面的内容仅仅只是创建了一个虚拟DOM，当我们在浏览器的控制台输出他时，内容如下
大家可以看到，实际上这是一个react自己定义的虚拟DOM，此时它还未插入到指定的容器中，下面我们就可以将这个虚拟DOM插入到容器中
ReactDOM.render(virtualDom , document.getElementById('test'))
//上面我们使用了ReactDOM.render()函数，将其渲染到了容器#test里面
以上就是今天的hello world，希望对大家有帮助。
虚拟DOM及其算法相关请查看博客 https://www.cnblogs.com/dojo-lzz/p/8047742.html
1970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
