ES6面向对象应用：React

ES6面向对象应用——React：
React：
1、模块化、组件化——class
2、JSX《—》babel《—》browser.js

<script src="/React.js"></script>
<script src="/ReactDOM.js"></script>
<script src="/browser.js"></script>
<script type="text/babel">
     // class Test extends React.component { 
     class Item extends React.component { 
		constructor(...args) { 
			super(...args) 
		} 
		render() { 
			// return <span> 123 </span>; 
			return <li> {this.props.str} </li>; 
		} 
	} 
	class List extends React.component { 
		constructor(...args) { 
			super(...args) 
		} 
		render() { 
			// alert(this.props.arr)
			// alert(this.props.arr[0])

			/* let aItems=[];
			for(let i=0;i<this.props.arr.length;i++){
				aItems.push(<Item str={this.props.arr[i]}></Item>)
			} */

			// let aItems=this.props.arr.map(a=><Item str={a}></Item>)

			// return <ul>
			// 	<Item str="abc"></Item>
			// 	<Item str="hr226"></Item>
			// </ul>;
			/* return <ul>
				{aItems}
			</ul>;  */ 
			return <ul>
				{this.props.arr.map(a=><Item str={a}></Item>)}
			</ul>; 
		} 
	} 
	window.onload = function() { 
		let oDiv = document.getElementById('div1'); 
		ReactDOM.render(
			// <Test></Test>,
			// <List></List>,
			// <List arr="['abc','def']"></List>,
			<List arr={['abc','def','hr226']}></List>,
			oDiv
		)
	}
 </script>

<div id="div1"></div>