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>
