React JSX教程实例

React安装

<script src="http://demo.jser.com/r/react-0.14/build/react.min.js"></script>
<script src="http://demo.jser.com/r/react-0.14/build/react-dom.min.js"></script>
<script src="http://demo.jser.com/r/react-0.14/browser.min.js"></script>

React实例

下面实例涉及了 自定义属性data-、样式style={}、表达式{}、数组、注释等知识点，以及一些需要注意地方

<div id="app"></div>
		
<script type="text/babel">
	var i =1;
	var conp ={
		color:'red',	//加引号
		fontSize:40 	//不能用font-size 不加px(React自动添加)
	};
	var name =['张三',<h3>李四</h3>,"王二","麻子"]; 
	
	ReactDOM.render( 
	<div>
		<h1>hello react</h1>
		{/*自定义属性前加data-*/}
		<p date-myattribute="value" style={conp}>你喜欢我吗</p>
		{/*不能用if else，可以用三元表达式 */}
		<h2>{ i==1 ? 'Yes':'No'}</h2>
		{/*数组自动展开所有成员*/}
		<div>{name}</div>
	</div>,
	document.getElementById("app")
	)
</script>

总结：初学需注意地方

1. type=“text/babel” 一定一定一定加上！
2. React表达式是单花括号{1+1} （ Vue是双花括号{{ 1+1}} ）
3. 注释写在花括号里 {/* 注释内容*/}

React教程网站

JSRE http://learn.jser.com/react/react-tutorial.html
菜鸟教程 https://www.runoob.com/react/react-tutorial.html

---

本教程总结自JSER，如需转载，请备注来源