eduard-tkv/reactbook.html

## reactbook.html
<!DOCTYPE html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
<title>ReactJS Chapter 1</title>

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script type="text/javascript" src="js/react.min.js"></script>
<script type="text/javascript" src="js/react-dom.min.js"></script>
<script src="js/babel.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an
            <strong>outdated</strong> browser.
            Please <a href="http://browsehappy.com/">upgrade
            your browser</a> to improve your experience.</p>
        <![endif]-->
        <!-- Add your site or application content here -->
<div id="container"></div>


<script type="text/babel">

var Label = React.createClass({
render: function(){

var labelStyle = {
fontWeight: 500,
fontSize: 16
};

return(
<p style={labelStyle}>{this.props.color}</p>
);
}
});

var Square = React.createClass({
render: function(){

var squareStyle = {
 height: 150,
 backgroundColor: this.props.color
};

return(
<div style={squareStyle}></div>
);
}
});


var Card= React.createClass({
render: function(){

var cardStyle = {
 height: 200,
 width: 150,
 padding: 0,
 backgroundColor: "#FFF",
 WebkitFilter: "drop-shadow(0px 0px 5px #666)",
 filter: "drop-shadow(0px 0px 5px #666)",
 textAlign: "center"
};

return(
<div style={cardStyle}>
<Square {...this.props}/>
<Label {...this.props}/>
</div>
);
}
});

ReactDOM.render(
<div>
<Card color="#FD6633"/>
</div>,
document.getElementById('container')
);
</script>
    </body>
</html>
	<!DOCTYPE html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<title>ReactJS Chapter 1</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/custom.css">
	<script type="text/javascript" src="js/react.min.js"></script>
	<script type="text/javascript" src="js/react-dom.min.js"></script>
	<script src="js/babel.min.js"></script>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an
	<strong>outdated</strong> browser.
	Please <a href="http://browsehappy.com/">upgrade
	your browser</a> to improve your experience.</p>
	<![endif]-->
	<!-- Add your site or application content here -->
	<div id="container"></div>


	<script type="text/babel">

	var Label = React.createClass({
	render: function(){

	var labelStyle = {
	fontWeight: 500,
	fontSize: 16
	};

	return(
	<p style={labelStyle}>{this.props.color}</p>
	);
	}
	});

	var Square = React.createClass({
	render: function(){

	var squareStyle = {
	height: 150,
	backgroundColor: this.props.color
	};

	return(
	<div style={squareStyle}></div>
	);
	}
	});


	var Card= React.createClass({
	render: function(){

	var cardStyle = {
	height: 200,
	width: 150,
	padding: 0,
	backgroundColor: "#FFF",
	WebkitFilter: "drop-shadow(0px 0px 5px #666)",
	filter: "drop-shadow(0px 0px 5px #666)",
	textAlign: "center"
	};

	return(
	<div style={cardStyle}>
	<Square {...this.props}/>
	<Label {...this.props}/>
	</div>
	);
	}
	});

	ReactDOM.render(
	<div>
	<Card color="#FD6633"/>
	</div>,
	document.getElementById('container')
	);
	</script>
	</body>
	</html>