Dinir · May 14, 2016 12:52 · Dinir · May 14, 2016
diff --git a/1.html b/1.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
 	<meta content="text/html;charset=utf-8" http-equiv="content-type">
 	<meta content="utf-8" http-equiv="encoding">
 	<meta name="viewport"
 	      content="width=device-width, initial-scale=1.0"/>
 	<title>Title</title>
 <!--	<link rel="shortcut icon" href="/favicon.ico">
 	<link rel="apple-touch-icon"
 	      href="./appiconios.png"/>
 	<link rel="apple-touch-icon-precomposed"
 	      href="./appiconandroid.png"/>
 	<link rel="stylesheet" href="./your.css">-->
 	<style>
 	
 	</style>
 </head>
 <script src="./build/react.js"></script>
 <script src="./build/react-dom.js"></script>
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 <script type="text/babel">
 	let MyReactComponent = React.createClass({
 		propLists: {
 			ts: React.PropTypes.string,
 			tn: React.PropTypes.number,
 			to: React.PropTypes.object
 		},

 		// The object returned by this method sets the initial value of this.state
 		getInitialState: function(){
 			return {
 				stA: this.props.tn,
 				stB: this.props.ts
 			};
 		},

 		// The object returned by this method sets the initial value of this.props
 		// If a complex object is returned, it is shared among all component instances
 		getDefaultProps: function(){
 			return {
 				ts: "I am yet happy here.",
 				tn: 47,
 				to: {
 					a: 345,
 					b: 456,
 					c: "567",
 					d: {
 						e: 678,
 						f: 789,
 						g: [8, 9, 0]
 					},
 					h: i => `<<< <<<<${i}>>>> >>>`
 				}
 			};
 		},

 		handleClick: function(e) {
 			console.log(e);
 //			this.state.stA += 30;
 //			this.setState(this.state);
 			this.setState({
 				stA: this.state.stA + 30
 			})
 		},

 		// Returns the jsx markup for a component
 		// Inspects this.state and this.props create the markup
 		// Should never update this.state or this.props
 		render: function(){
 			return (
 				<div>
 					<span>{this.props.ts}</span>
 					<span onClick={this.handleClick} style={{backgroundColor: `#${this.props.to.a}`, color: `#${this.props.to.b}`}} >{this.props.to.h(337)} {this.state.stA}</span>{this.state.stB}
 					<ul>
 					{this.props.to.d.g.map(
 						(v,i) => <li key={i}>{v}</li>
 					)}
 					</ul>
 				</div>
 			);
 		},

 		// An array of objects each of which can augment the lifecycle methods
 		mixins: [],

 		// Functions that can be invoked on the component without creating instances
 		statics: {
 			aStaticFunction: function(){}
 		},

 		// -- Lifecycle Methods --

 		// Invoked once before first render
 		componentWillMount: function(){
 			// Calling setState here does not cause a re-render
 		},

 		// Invoked once after the first render
 		componentDidMount: function(){
 			// You now have access to this.getDOMNode()
 		},

 		// Invoked whenever there is a prop change
 		// Called BEFORE render
 		componentWillReceiveProps: function(nextProps){
 			// Not called for the initial render
 			// Previous props can be accessed by this.props
 			// Calling setState here does not trigger an an additional re-render
 		},

 		// Determines if the render method should run in the subsequent step
 		// Called BEFORE a render
 		// Not called for the initial render
 		shouldComponentUpdate: function(nextProps, nextState){
 			// If you want the render method to execute in the next step
 			// return true, else return false
 			return true;
 		},

 		// Called IMMEDIATELY BEFORE a render
 		componentWillUpdate: function(nextProps, nextState){
 			// You cannot use this.setState() in this method
 		},

 		// Called IMMEDIATELY AFTER a render
 		componentDidUpdate: function(prevProps, prevState){
 		},

 		// Called IMMEDIATELY before a component is unmounted
 		componentWillUnmount: function(){
 		}

 	});

 	window.onload = () => ReactDOM.render(
 		<MyReactComponent tn={37} ts={"abcdFFFF"} to={{a:399, b:274, d:{g:[3,4,5,6,7]}, h:r=>`dd${r}ddd`}}/>,
 		document.getElementById("main")
 	);
 </script>

 <body>
 <div id="main"></div>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta content="text/html;charset=utf-8" http-equiv="content-type">
	<meta content="utf-8" http-equiv="encoding">
	<meta name="viewport"
	content="width=device-width, initial-scale=1.0"/>
	<title>Title</title>
	<!-- <link rel="shortcut icon" href="/favicon.ico">
	<link rel="apple-touch-icon"
	href="./appiconios.png"/>
	<link rel="apple-touch-icon-precomposed"
	href="./appiconandroid.png"/>
	<link rel="stylesheet" href="./your.css">-->
	<style>

	</style>
	</head>
	<script src="./build/react.js"></script>
	<script src="./build/react-dom.js"></script>
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
	<script type="text/babel">
	let MyReactComponent = React.createClass({
	propLists: {
	ts: React.PropTypes.string,
	tn: React.PropTypes.number,
	to: React.PropTypes.object
	},

	// The object returned by this method sets the initial value of this.state
	getInitialState: function(){
	return {
	stA: this.props.tn,
	stB: this.props.ts
	};
	},

	// The object returned by this method sets the initial value of this.props
	// If a complex object is returned, it is shared among all component instances
	getDefaultProps: function(){
	return {
	ts: "I am yet happy here.",
	tn: 47,
	to: {
	a: 345,
	b: 456,
	c: "567",
	d: {
	e: 678,
	f: 789,
	g: [8, 9, 0]
	},
	h: i => `<<< <<<<${i}>>>> >>>`
	}
	};
	},

	handleClick: function(e) {
	console.log(e);
	// this.state.stA += 30;
	// this.setState(this.state);
	this.setState({
	stA: this.state.stA + 30
	})
	},

	// Returns the jsx markup for a component
	// Inspects this.state and this.props create the markup
	// Should never update this.state or this.props
	render: function(){
	return (
	<div>
	<span>{this.props.ts}</span>
	<span onClick={this.handleClick} style={{backgroundColor: `#${this.props.to.a}`, color: `#${this.props.to.b}`}} >{this.props.to.h(337)} {this.state.stA}</span>{this.state.stB}
	<ul>
	{this.props.to.d.g.map(
	(v,i) => <li key={i}>{v}</li>
	)}
	</ul>
	</div>
	);
	},

	// An array of objects each of which can augment the lifecycle methods
	mixins: [],

	// Functions that can be invoked on the component without creating instances
	statics: {
	aStaticFunction: function(){}
	},

	// -- Lifecycle Methods --

	// Invoked once before first render
	componentWillMount: function(){
	// Calling setState here does not cause a re-render
	},

	// Invoked once after the first render
	componentDidMount: function(){
	// You now have access to this.getDOMNode()
	},

	// Invoked whenever there is a prop change
	// Called BEFORE render
	componentWillReceiveProps: function(nextProps){
	// Not called for the initial render
	// Previous props can be accessed by this.props
	// Calling setState here does not trigger an an additional re-render
	},

	// Determines if the render method should run in the subsequent step
	// Called BEFORE a render
	// Not called for the initial render
	shouldComponentUpdate: function(nextProps, nextState){
	// If you want the render method to execute in the next step
	// return true, else return false
	return true;
	},

	// Called IMMEDIATELY BEFORE a render
	componentWillUpdate: function(nextProps, nextState){
	// You cannot use this.setState() in this method
	},

	// Called IMMEDIATELY AFTER a render
	componentDidUpdate: function(prevProps, prevState){
	},

	// Called IMMEDIATELY before a component is unmounted
	componentWillUnmount: function(){
	}

	});

	window.onload = () => ReactDOM.render(
	<MyReactComponent tn={37} ts={"abcdFFFF"} to={{a:399, b:274, d:{g:[3,4,5,6,7]}, h:r=>`dd${r}ddd`}}/>,
	document.getElementById("main")
	);
	</script>

	<body>
	<div id="main"></div>
	</body>

	</html>