Translate react without es6 (#105)

* Translate react without es6 * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: miku86 <[email protected]> * Update props and initial state titles * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> * Update content/docs/react-without-es6.md Co-Authored-By: Phil <[email protected]> Co-authored-by: miku86 <[email protected]> Co-authored-by: Phil <[email protected]>
reactjs · Jan 10, 2020 · 9934fbc · 9934fbc
1 parent 2154e37
commit 9934fbc
Showing 1 changed file with 42 additions and 43 deletions.
diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md
@@ -1,36 +1,35 @@
 ---
 id: react-without-es6
-title: React Without ES6
+title: React ohne ES6
 permalink: docs/react-without-es6.html
 ---
 
-Normally you would define a React component as a plain JavaScript class:
+Normalerweise definiert man eine React-Komponente als eine einfache JavaScript-Klasse:
 
 ```javascript
 class Greeting extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Hallo, {this.props.name}</h1>;
   }
 }
 ```
 
-If you don't use ES6 yet, you may use the `create-react-class` module instead:
-
+Wenn du ES6 noch nicht verwendest, kannst du stattdessen das `create-react-class` Modul verwenden:
 
 ```javascript
 var createReactClass = require('create-react-class');
 var Greeting = createReactClass({
   render: function() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Hallo, {this.props.name}</h1>;
   }
 });
 ```
 
-The API of ES6 classes is similar to `createReactClass()` with a few exceptions.
+Die API von ES6-Klassen ähnelt sich, mit wenigen Ausnahmen, der von `createReactClass()`.
 
-## Declaring Default Props {#declaring-default-props}
+## Deklarieren von Default Props {#declaring-default-props}
 
-With functions and ES6 classes `defaultProps` is defined as a property on the component itself:
+Mit Funktionen und ES6-Klassen wird `defaultProps` als Eigenschaft für die Komponente selbst definiert:
 
 ```javascript
 class Greeting extends React.Component {
@@ -42,7 +41,7 @@ Greeting.defaultProps = {
 };
 ```
 
-With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object:
+Mit `createReactClass()` musst du `getDefaultProps()` als Funktion für das übergebene Objekt definieren:
 
 ```javascript
 var Greeting = createReactClass({
@@ -57,9 +56,9 @@ var Greeting = createReactClass({
 });
 ```
 
-## Setting the Initial State {#setting-the-initial-state}
+## Setzen des initialen States {#setting-the-initial-state}
 
-In ES6 classes, you can define the initial state by assigning `this.state` in the constructor:
+In ES6-Klassen kannst du den initialen State definieren, indem du im Konstruktor `this.state` zuweist:
 
 ```javascript
 class Counter extends React.Component {
@@ -71,7 +70,7 @@ class Counter extends React.Component {
 }
 ```
 
-With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state:
+Mit `createReactClass()` musst du eine separate `getInitialState`-Methode bereitstellen, die den initialen State zurückgibt:
 
 ```javascript
 var Counter = createReactClass({
@@ -84,14 +83,14 @@ var Counter = createReactClass({
 
 ## Autobinding {#autobinding}
 
-In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor:
+In React-Komponenten, die als ES6-Klassen deklariert wurden, folgen Methoden der gleichen Semantik wie reguläre ES6-Klassen. Dies bedeutet, dass `this` sich nicht automatisch an die Instanz bindet. Du musst im **constructor** explizit `.bind(this)` verwenden:
 
 ```javascript
 class SayHello extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {message: 'Hello!'};
-    // This line is important!
+    this.state = {message: 'Hallo!'};
+    // Diese Zeile ist wichtig!
     this.handleClick = this.handleClick.bind(this);
   }
 
@@ -100,86 +99,86 @@ class SayHello extends React.Component {
   }
 
   render() {
-    // Because `this.handleClick` is bound, we can use it as an event handler.
+    // Da `this.handleClick` gebunden ist, können wir es als Event-Handler verwenden.
     return (
       <button onClick={this.handleClick}>
-        Say hello
+        Sag Hallo
       </button>
     );
   }
 }
 ```
 
-With `createReactClass()`, this is not necessary because it binds all methods:
+Mit `createReactClass()` ist dies nicht notwendig, da es alle Methoden bindet:
 
 ```javascript
 var SayHello = createReactClass({
   getInitialState: function() {
-    return {message: 'Hello!'};
+    return {message: 'Hallo!'};
   },
 
   handleClick: function() {
-    alert(this.state.message);
+    alert(this.state.nachricht);
   },
 
   render: function() {
     return (
       <button onClick={this.handleClick}>
-        Say hello
+        Sag Hallo
       </button>
     );
   }
 });
 ```
 
-This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.
+Das bedeutet, dass ES6-Klassen mit etwas mehr Code für Event-Handler geliefert werden, aber die Leistung bei großen Anwendungen etwas besser ist.
 
-If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel:
+Wenn der Boilerplate-Code für dich zu unattraktiv ist, kannst du den **experimentellen** Syntaxvorschlag [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) mit Babel aktivieren:
 
 
 ```javascript
 class SayHello extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {message: 'Hello!'};
+    this.state = {message: 'Hallo!'};
   }
-  // WARNING: this syntax is experimental!
-  // Using an arrow here binds the method:
+  // WARNUNG: Diese Syntax ist experimentell!
+  // Die Verwendung eines Pfeils bindet hier die Methode:
   handleClick = () => {
     alert(this.state.message);
   }
 
   render() {
     return (
       <button onClick={this.handleClick}>
-        Say hello
+        Sag Hallo
       </button>
     );
   }
 }
 ```
 
-Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language.
+Bitte beachte, dass die obige Syntax **experimentell** ist und sich die Syntax möglicherweise ändert oder der Vorschlag nicht in die Sprache eingebaut wird.
 
-If you'd rather play it safe, you have a few options:
+Wenn du lieber auf Nummer sicher gehen möchtest, hast du einige Möglichkeiten:
 
-* Bind methods in the constructor.
-* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`.
-* Keep using `createReactClass`.
+* Binde Methoden im Konstruktor.
+* Verwende Pfeilfunktionen, z.B. `onClick={(e) => this.handleClick(e)}`.
+* Verwende weiterhin `createReactClass`.
 
 ## Mixins {#mixins}
 
->**Note:**
+>**Hinweis:**
 >
->ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.
+>ES6 hat keine Unterstützung für Mixins, daher sind Mixins nicht unterstützt wenn du React zusammen mit ES6-Klassen benutzt.
 >
->**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/blog/2016/07/13/mixins-considered-harmful.html).**
+>**Wir haben auch zahlreiche Probleme in Projekten festgestellt, die Mixins verwenden, [und empfehlen, diese nicht in neuem Code zu verwenden](/blog/2016/07/13/mixins-considered-harmful.html).**
 >
->This section exists only for the reference.
+>Dieser Abschnitt dient nur als Referenz.
 
-Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` lets you use a legacy `mixins` system for that.
+Manchmal haben sehr unterschiedliche Komponenten ähnliche Funktionen. Diese werden manchmal als [Cross-Cutting Concern](https://de.wikipedia.org/wiki/Cross-Cutting_Concern) bezeichnet. Mit `createReactClass` kannst du dafür ein altes `mixins`-System verwenden.
 
-One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/docs/react-component.html#the-component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
+Ein häufiger Anwendungsfall ist eine Komponente, die sich in einem bestimmten Zeitintervall selbst aktualisieren möchte. Es ist einfach, `setInterval()` zu verwenden, aber es ist wichtig, das Intervall abzubrechen, wenn du es nicht mehr benötigst, um Speicherplatz zu sparen. React bietet [Lifecycle-Methoden](/docs/react-component.html#the-component-lifecycle) an, die dich wissen lassen, wann eine Komponente im Begriff ist erstellt oder zerstört zu werden. Wir können ein Mixin erstellen, das diese Methoden verwendet, um eine einfache `setInterval()`-Funktion bereitzustellen, die automatisch bereinigt wird, wenn deine Komponente zerstört wird.
 
 ```javascript
 var SetIntervalMixin = {
@@ -197,20 +196,20 @@ var SetIntervalMixin = {
 var createReactClass = require('create-react-class');
 
 var TickTock = createReactClass({
-  mixins: [SetIntervalMixin], // Use the mixin
+  mixins: [SetIntervalMixin], // Verwende das Mixin
   getInitialState: function() {
     return {seconds: 0};
   },
   componentDidMount: function() {
-    this.setInterval(this.tick, 1000); // Call a method on the mixin
+    this.setInterval(this.tick, 1000); // Rufe eine Methode für das Mixin auf
   },
   tick: function() {
     this.setState({seconds: this.state.seconds + 1});
   },
   render: function() {
     return (
       <p>
-        React has been running for {this.state.seconds} seconds.
+        React wurde {this.state.seconds} Sekunden lang ausgeführt.
       </p>
     );
   }
@@ -222,4 +221,4 @@ ReactDOM.render(
 );
 ```
 
-If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
+Wenn eine Komponente mehrere Mixins verwendet und mehrere Mixins definieren dieselbe Lifecycle-Methode (d.h. mehrere Mixins möchten eine Bereinigung durchführen, wenn die Komponente zerstört wird), werden alle Lifecycle-Methoden aufgerufen. Methoden, die für Mixins definiert wurden, werden in der Reihenfolge ausgeführt in der die Mixins aufgelistet wurden, gefolgt von einem Methodenaufruf für die Komponente.