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語法，瀏覽器是不認(rèn)識(shí)的托嚣，一定要引入babel的庫裁蚁，并將script標(biāo)簽的類型改為type=“text/babel”
- JSX語法要注意
- 以<開頭，會(huì)當(dāng)做標(biāo)簽解析，（html同名標(biāo)簽當(dāng)做html的同名標(biāo)簽解析茅姜，不是html同名標(biāo)簽，當(dāng)做組件解析）
- 組件中用到j(luò)s語法的地方要用{}包裹
<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'>//創(chuàng)建一個(gè)虛擬的DOM對(duì)象
<span>{content}</span>//JSX的語法。{}的內(nèi)容當(dāng)成js來解析
</h2>;
ReactDOM.render(vDom2,document.getElementById('test2')) //渲染虛擬DOM對(duì)象到頁面上钻洒，這一句是必須的奋姿，否則頁面不會(huì)有內(nèi)容顯示
</script>
