React学习(一) JSX及元素渲染

JSX

全称为JavaScript XML，字面意思就是在JS中写XML（HTML）格式的代码

原理是利用了babel将JSX编译为使用react.createElement()，react本身也是使用这个方法插入节点，但其代码结构非常繁琐，不够直观优雅。使用JSX可以像写html一样写结构，结构直观也提高开发效率。

<div className="shopping-list">
	<h1>Shopping List</h1>
	<ul> 
		<li>Instagram</li>
		<li>WhatsApp</li>
	</ul>
</div>

使用

（1）使用JSX创建react元素

const title = <h1>Hello JSX</h1>

（2）使用ReactDOM.render()渲染react元素到页面中

ReactDOM.render(title,
               document,getElementById('title')