<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<title>Transfer Properties with Dots in JSX</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/JSXTransformer.js"></script>
	<style type="text/css">
		body{margin: 25px;}
	</style>
</head>
<body>
	<script type="text/jsx">
	/** @jsx React.DOM */
	var APP = React.createClass({
		render: function() {
			return (
				<div>
					<BButton className="btn btn-primary" href="javascript:alert('hello');" ><BHeart /> React</BButton>
					<BButton className="btn btn-success" href="javascript:alert('hello');"><BHeart /> React</BButton>
					<BButton className="btn btn-danger" href="javascript:alert('hello');"><BHeart /> React</BButton>
				</div>
			);
		}
	});

	var BButton = React.createClass({
		render: function() {
			return (
				<div>
					<a className={this.props.className} {...this.props}>{this.props.children}</a>
				</div>
			);
		}
	});

	var BHeart = React.createClass({
		render: function() {
			return (
				<span className="glyphicon glyphicon-heart"></span>
			);
		}
	});

	React.render(<APP />, document.body);
	</script>
</body>
</html>
Use Transfer with dots Lesson8
Use Transfer with dots
Lesson8
