React-JSX

React-JSX

jsx就是javascript对象，使用React构造组件，babel进行编译成js对象，在通过ReactDOM.render()方法将DOM元素插入到页面中

ReactDOM.render(
	<div>1111</div>,document.getElementById("root")
)

等价

ReactDOM.render(
	React.createElement("div",{
		id:'aaa',
		class:'bbb'
	},'1111'),document.getElementById("root")
)

其他JSX语法—

1.驼峰式命名
2.属性 = className
3.使用小括号包裹JSX
4.变量渲染页面 {XXX}
5.条件渲染
const isLoading = true;
const loadData = ()=> {
	if(isLoading){
		return (<div></div>)
	}else{
		return (<div></div>)
	}
}
const title = (
	<h1>
		条件渲染:
		{loadData()}
	<h1>
)
ReactDOM.render(title,document.getElementById('root'));
6.渲染列表
<ul>
	{list.map(item => <li key={item.id}>{item.name}</li>)}
<ul>