Merge pull request #2774 from jimfb/webcomponents

Added info (example+doc) about react with webcomponents

docs/_data/nav_docs.yml

@@ -87,6 +87,8 @@
     title: Special Non-DOM Attributes
   - id: reconciliation
     title: Reconciliation
+  - id: webcomponents
+    title: Web Components
   - id: glossary
     title: React (Virtual) DOM Terminology
 - title: Flux

docs/docs/ref-08-reconciliation.it-IT.md

@@ -3,7 +3,7 @@ id: reconciliation-it-IT
 title: Riconciliazione
 permalink: reconciliation-it-IT.html
 prev: special-non-dom-attributes-it-IT.html
-next: glossary-it-IT.html
+next: webcomponents.html
 ---
 
 La decisione chiave del design di React è fare in modo che l'API sembri ripetere il rendering dell'intera applicazione per ciascun aggiornamento. Ciò rende la scrittura delle applicazione molto più semplice, ma è anche una sfida incredibile per renderlo trattabile. Questo articolo spiega come siamo riusciti a trasformare, tramite potenti euristiche, un problema O(n<sup>3</sup>) in uno O(n).

docs/docs/ref-08-reconciliation.ko-KR.md

@@ -3,7 +3,7 @@ id: reconciliation-ko-KR
 title: 비교조정(Reconciliation)
 permalink: reconciliation-ko-KR.html
 prev: special-non-dom-attributes-ko-KR.html
-next: glossary-ko-KR.html
+next: webcomponents.html
 ---
 
 React의 주요 설계 철학은 업데이트할 때마다 전체 앱을 다시 렌더하는 것처럼 보이게 API를 만드는 것입니다. 이렇게 하면 애플리케이션 작성이 훨씬 쉬워지지만 한편으로는 어려운 도전 과제이기도 합니다. 이 글에서는 강력한 휴리스틱으로 어떻게 O(n<sup>3</sup>) 복잡도의 문제를 O(n)짜리로 바꿀 수 있었는지 설명합니다.

docs/docs/ref-08-reconciliation.md

@@ -3,7 +3,7 @@ id: reconciliation
 title: Reconciliation
 permalink: reconciliation.html
 prev: special-non-dom-attributes.html
-next: glossary.html
+next: webcomponents.html
 ---
 
 React's key design decision is to make the API seem like it re-renders the whole app on every update. This makes writing applications a lot easier but is also an incredible challenge to make it tractable. This article explains how with powerful heuristics we managed to turn a O(n<sup>3</sup>) problem into a O(n) one.

docs/docs/ref-09-webcomponents.md

@@ -0,0 +1,56 @@
+---
+id: webcomponents
+title: Web Components
+permalink: webcomponents.html
+prev: reconciliation.html
+next: glossary.html
+---
+
+Trying to compare and contrast React with WebComponents inevitably results in specious conclusions, because the two libraries are built to solve different problems.  WebComponents provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data.  The two goals are complementary; engineers can mix-and-match the technologies.  As a developer, you are free to use React in your WebComponents, or to use WebComponents in React, or both.
+
+## Using Web Components in React
+
+```javascript
+class HelloMessage extends React.Component{
+  render() {
+    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
+  }
+}
+```
+
+> Note:
+>
+> The programming models of the two component systems (web components vs. react components) differ in that
+> web components often expose an imperative API (for instance, a `video` web component might expose `play()`
+> and `pause()` functions).  To the extent that web components are declarative functions of their attributes,
+> they should work, but to access the imperative APIs of a web component, you will need to attach a ref to the
+> component and interact with the DOM node directly.  If you are using third-party web components, the
+> recommended solution is to write a React component that behaves as a wrapper for your web component.
+> 
+> At this time, events emitted by a web component may not properly propagate through a React render tree.
+> You will need to manually attach event handlers to handle these events within your React components.
+
+
+## Using React in your Web Components
+
+
+```javascript
+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});
+```
+
+## Complete Example
+
+Check out the `webcomponents` example in the [starter kit](/react/downloads.html) for a complete example.
+

docs/docs/ref-10-glossary.it-IT.md

@@ -2,7 +2,7 @@
 id: glossary-it-IT
 title: Terminologia del DOM (Virtuale)
 permalink: glossary-it-IT.html
-prev: reconciliation-it-IT.html
+prev: webcomponents.html
 ---
 
 Nella terminologia di React, esistono cinque tipi base che è importante distinguere:

docs/docs/ref-10-glossary.ko-KR.md

@@ -2,7 +2,7 @@
 id: glossary-ko-KR
 title: React (가상) DOM 용어
 permalink: glossary-ko-KR.html
-prev: reconciliation-ko-KR.html
+prev: webcomponents-ko-KR.html
 ---
 
 다음은 React에서 사용되는 용어들로, 이 다섯 가지의 타입을 구별하는 것은 중요합니다.

docs/docs/ref-10-glossary.md

@@ -2,7 +2,7 @@
 id: glossary
 title: React (Virtual) DOM Terminology
 permalink: glossary.html
-prev: reconciliation.html
+prev: webcomponents.html
 ---
 
 In React's terminology, there are five core types that are important to distinguish:

examples/webcomponents/index.html

@@ -0,0 +1,65 @@
+<!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>