01关于React的两种写法

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语法要注意

1. 以<开头，会当做标签解析，（html同名标签当做html的同名标签解析，不是html同名标签，当做组件解析）
2. 组件中用到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>