advanced-guides/web-components

content/docs/web-components.md

@@ -6,41 +6,41 @@ redirect_from:
   - "docs/webcomponents.html"
 ---
 
-React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems.  Web Components 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. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.
+React und [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) wurden entwickelt um unterschiedliche Probleme zu lösen. Web Components bieten eine starke Kapselung für wiederverwendbare Komponenten, wobei React eine deklarative Bibliothek bietet, die das DOM mit deinen Daten synchronisiert. Die beiden Ziele ergänzen sich gegenseitig. Als Entwickler kannst du React in Web Components oder Web Componentens in React verwenden, oder beides.
 
-Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.
+Die meisten Leute, die React verwenden, verwenden keine Web Components, aber vielleicht möchtest du es, insbesondere wenn du UI Komponenten von Drittanbietern verwendest, die unter der Verwendung von Web Components geschrieben wurden.
 
-## Using Web Components in React {#using-web-components-in-react}
+## Web Components in React verwenden {#using-web-components-in-react}
 
 ```javascript
 class HelloMessage extends React.Component {
   render() {
-    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
+    return <div>Hallo <x-search>{this.props.name}</x-search>!</div>;
   }
 }
 ```
 
-> Note:
+> Hinweis:
 >
-> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.
+> Web Componentes haben meist eine imperative API. Beispielsweise könnte eine `video` Web Component, die beiden Funktionen `play()` und `pause()` bereitstellen. Um auf die imperative API zuzugreifen, wird eine Referenz (ref) benötigt um mit dem DOM-Knoten direkt zu interagieren. Wenn du Web Components von Drittanbietern verwendest, ist die beste Herangehensweise, eine React-Komponente zu erstellen die, die diese umschließt.
 >
-> 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.
+> Events, welche von einer Web Component gesendet werden könnten sich möglicherweise nicht über den React-Baum ausbreiten.
+> Du musst manuelle Event-Handler erstellen, um diese Events in deinen React-Komponenten zu vearbeiten.
 
-One common confusion is that Web Components use "class" instead of "className".
+Eine häufige Verwirrung entsteht dadurch, dass Web Components "class" anstatt "className" verwenden.
 
 ```javascript
 function BrickFlipbox() {
   return (
     <brick-flipbox class="demo">
-      <div>front</div>
-      <div>back</div>
+      <div>vorne</div>
+      <div>hinten</div>
     </brick-flipbox>
   );
 }
 ```
 
-## Using React in your Web Components {#using-react-in-your-web-components}
+## React in deinen Web Components verwenden {#using-react-in-your-web-components}
 
 ```javascript
 class XSearch extends HTMLElement {
@@ -56,7 +56,7 @@ class XSearch extends HTMLElement {
 customElements.define('x-search', XSearch);
 ```
 
->Note:
+>Hinweis:
 >
->This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion.
->Include the [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue.
+>Dieser Code **wird nicht** funktionieren, wenn du Klassen mit Babel umwandelst. Erfahre mehr [zur Problematik](https://github.com/w3c/webcomponents/issues/587) in dieser Diskussion.
+>Füge den [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) hinzu, bevor deine Web Component läd, um dieses Problem zu beseitigen.