mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
83 lines
2.0 KiB
HTML
83 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
|
|
<title>Basic Example with JSX</title>
|
|
<link rel="stylesheet" href="../shared/css/base.css" />
|
|
</head>
|
|
<body>
|
|
<h1>Basic Example with JSX</h1>
|
|
<div id="container">
|
|
<p>
|
|
To install React, follow the instructions on
|
|
<a href="https://github.com/facebook/react/">GitHub</a>.
|
|
</p>
|
|
<p>
|
|
If you can see this, React is not working right.
|
|
If you checked out the source from GitHub make sure to run <code>grunt</code>.
|
|
</p>
|
|
</div>
|
|
<h4>Example Details</h4>
|
|
<p>This is written with JSX and transformed in the browser.</p>
|
|
<p>
|
|
Learn more about React at
|
|
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
|
|
</p>
|
|
<script src="../shared/thirdparty/es5-shim.min.js"></script>
|
|
<script src="../shared/thirdparty/es5-sham.min.js"></script>
|
|
<script src="../shared/thirdparty/console-polyfill.js"></script>
|
|
<script src="../../build/react.js"></script>
|
|
<script src="../../build/JSXTransformer.js"></script>
|
|
<script type="text/jsx">
|
|
|
|
var Top = React.createClass({
|
|
childContextTypes: {
|
|
now: React.PropTypes.any
|
|
},
|
|
|
|
getChildContext: function() {
|
|
return {
|
|
now: this.state.now
|
|
};
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return {
|
|
now: Date.now()
|
|
};
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
setInterval(function() {
|
|
this.setState({
|
|
now: Date.now()
|
|
});
|
|
}.bind(this), 500);
|
|
},
|
|
|
|
render: function() {
|
|
return (
|
|
<div>
|
|
<h1>{this.state.now}</h1>
|
|
<Child />{this.props.children}
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
var Child = React.createClass({
|
|
contextTypes: {
|
|
now: React.PropTypes.any
|
|
},
|
|
|
|
render: function() {
|
|
// I never update
|
|
return <h2>{this.context.now}</h2>;
|
|
}
|
|
});
|
|
|
|
React.render(<Top><Child/></Top>, document.getElementById('container'));
|
|
</script>
|
|
</body>
|
|
</html>
|