From 029b4ad70eadd0f31cbb628b8cd0fd9ad26baad7 Mon Sep 17 00:00:00 2001 From: Jim Date: Thu, 25 Dec 2014 16:07:24 -0800 Subject: [PATCH] Added info (example+doc) about react with webcomponents --- _data/nav_docs.yml | 2 + docs/ref-08-reconciliation.it-IT.md | 2 +- docs/ref-08-reconciliation.ko-KR.md | 2 +- docs/ref-08-reconciliation.md | 2 +- docs/ref-09-webcomponents.md | 56 +++++++++++++++++++ ...sary.it-IT.md => ref-10-glossary.it-IT.md} | 2 +- ...sary.ko-KR.md => ref-10-glossary.ko-KR.md} | 2 +- ...{ref-09-glossary.md => ref-10-glossary.md} | 2 +- 8 files changed, 64 insertions(+), 6 deletions(-) create mode 100644 docs/ref-09-webcomponents.md rename docs/{ref-09-glossary.it-IT.md => ref-10-glossary.it-IT.md} (99%) rename docs/{ref-09-glossary.ko-KR.md => ref-10-glossary.ko-KR.md} (99%) rename docs/{ref-09-glossary.md => ref-10-glossary.md} (99%) diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml index 5970733c..e9394d05 100644 --- a/_data/nav_docs.yml +++ b/_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 diff --git a/docs/ref-08-reconciliation.it-IT.md b/docs/ref-08-reconciliation.it-IT.md index a69b82d3..b68e6350 100644 --- a/docs/ref-08-reconciliation.it-IT.md +++ b/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(n3) in uno O(n). diff --git a/docs/ref-08-reconciliation.ko-KR.md b/docs/ref-08-reconciliation.ko-KR.md index febf7cb6..e8bce339 100644 --- a/docs/ref-08-reconciliation.ko-KR.md +++ b/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(n3) 복잡도의 문제를 O(n)짜리로 바꿀 수 있었는지 설명합니다. diff --git a/docs/ref-08-reconciliation.md b/docs/ref-08-reconciliation.md index 54e40d37..8e113d97 100644 --- a/docs/ref-08-reconciliation.md +++ b/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(n3) problem into a O(n) one. diff --git a/docs/ref-09-webcomponents.md b/docs/ref-09-webcomponents.md new file mode 100644 index 00000000..3442bcfc --- /dev/null +++ b/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
Hello {this.props.name}!
; + } +} +``` + +> 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({name}, 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. + diff --git a/docs/ref-09-glossary.it-IT.md b/docs/ref-10-glossary.it-IT.md similarity index 99% rename from docs/ref-09-glossary.it-IT.md rename to docs/ref-10-glossary.it-IT.md index cd26ced6..01af918e 100644 --- a/docs/ref-09-glossary.it-IT.md +++ b/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: diff --git a/docs/ref-09-glossary.ko-KR.md b/docs/ref-10-glossary.ko-KR.md similarity index 99% rename from docs/ref-09-glossary.ko-KR.md rename to docs/ref-10-glossary.ko-KR.md index ad27e6e8..01131040 100644 --- a/docs/ref-09-glossary.ko-KR.md +++ b/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에서 사용되는 용어들로, 이 다섯 가지의 타입을 구별하는 것은 중요합니다. diff --git a/docs/ref-09-glossary.md b/docs/ref-10-glossary.md similarity index 99% rename from docs/ref-09-glossary.md rename to docs/ref-10-glossary.md index 50ccc000..7c1fae3d 100644 --- a/docs/ref-09-glossary.md +++ b/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: