mirror of
https://github.com/zebrajr/react.git
synced 2025-12-07 00:20:28 +01:00
36db2aeeb0
Added info (example+doc) about react with webcomponents
(cherry picked from commit 80bcc519d7)
66 lines
2.3 KiB
HTML
66 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
|
|
<title>Basic Example with WebComponents</title>
|
|
<link rel="stylesheet" href="../shared/css/base.css" />
|
|
</head>
|
|
<body>
|
|
<h1>Basic Example with WebComponents</h1>
|
|
<div id="container">
|
|
<p>
|
|
To install React, follow the instructions on
|
|
<a href="http://www.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>
|
|
<br /><br />
|
|
<h4>Example Details</h4>
|
|
<p>
|
|
This example demonstrates WebComponent/ReactComponent interoperability
|
|
by rendering a ReactComponent, which renders a WebComponent, which renders
|
|
another ReactComponent in the WebComponent's shadow DOM.
|
|
<p>
|
|
<p>
|
|
Learn more about React at
|
|
<a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
|
|
</p>
|
|
<script src="../shared/thirdparty/webcomponents.js"></script>
|
|
<script src="../../build/react.js"></script>
|
|
<script src="../../build/react-dom.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
|
|
|
|
<script type="text/babel">
|
|
|
|
// Define WebComponent
|
|
var proto = Object.create(HTMLElement.prototype, {
|
|
createdCallback: {
|
|
value: function() {
|
|
var mountPoint = document.createElement('span');
|
|
this.createShadowRoot().appendChild(mountPoint);
|
|
|
|
var name = this.getAttribute('name');
|
|
var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
|
|
ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
|
|
}
|
|
}
|
|
});
|
|
document.registerElement('x-search', {prototype: proto});
|
|
|
|
// Define React Component
|
|
class HelloMessage extends React.Component {
|
|
render() {
|
|
return <div>Hello <x-search name={this.props.name} />!</div>;
|
|
}
|
|
}
|
|
|
|
// Mount React Component (which uses WebComponent which uses React)
|
|
var container = document.getElementById('container');
|
|
ReactDOM.render(<HelloMessage name="Jim Sproch" />, container);
|
|
</script>
|
|
</body>
|
|
</html>
|