01js的用法
<div id="test1"></div>
<script src="js/react.development.js"></script>
<script src='js/react-dom.development.js'></script>
<script type="text/javascript">
const vDom1 = React.createElement('span',{},"hello React");
const vDom3 = React.createElement('h2',{id:'myId1',className:'myclass1'},vDom1);
ReactDOM.render(vDom3,document.getElementById('test1'))
</script>
02JSX用法
- 这里JSX语法，浏览器是不认识的，一定要引入babel的库，并将script标签的类型改为type=“text/babel”
- JSX语法要注意
- 以<开头，会当做标签解析，（html同名标签当做html的同名标签解析，不是html同名标签，当做组件解析）
- 组件中用到js语法的地方要用{}包裹
<div id="test2"></div>
<script type="text/javascript" src='js/babel.min.js'></script>
<script type="text/babel">
const id = 'myId2';
const content = 'hello react';
const vDom2 = <h2 id={id} className='myclass2'>//创建一个虚拟的DOM对象
<span>{content}</span>//JSX的语法。{}的内容当成js来解析
</h2>;
ReactDOM.render(vDom2,document.getElementById('test2')) //渲染虚拟DOM对象到页面上，这一句是必须的，否则页面不会有内容显示
</script>
