Skip to content

Instantly share code, notes, and snippets.

@dennishall1

dennishall1/home.html

Last active April 1, 2016 15:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dennishall1/505d1c54b8eab54c91aebbff247e0829 to your computer and use it in GitHub Desktop.
Save dennishall1/505d1c54b8eab54c91aebbff247e0829 to your computer and use it in GitHub Desktop.
Download ZIP
A Simple Component, Plus SEO
Raw
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-0.14.8.js"></script>
<script src="https://fb.me/react-dom-0.14.8.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div data-react="HelloMessage">
<div data-prop="greeting">Hello</div>
<div data-prop="subject">World</div>
</div>
<div data-react="HelloMessage">
<div data-prop="greeting">Howdy</div>
<div data-prop="subject">Partner</div>
</div>
<script type="text/babel">
var Components = {};
var HelloMessage = React.createClass({
render: function() {
return <div>{this.props.greeting}, {this.props.subject}</div>;
}
});
Components.HelloMessage = HelloMessage;
Array.prototype.forEach.call(document.querySelectorAll('[data-react]'), function(node){
var componentName = node.getAttribute('data-react');
var propNodes = node.querySelectorAll('[data-prop]');
var props = {};
Array.prototype.forEach.call(propNodes, function(propNode){
props[propNode.getAttribute('data-prop')] = propNode.textContent;
});
ReactDOM.render(React.createElement(Components[componentName], props), node);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment