Dinir/1.html

## 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>