From 3a76937a111d1b754d177f9200fe534b279e168f Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Fri, 10 Jan 2020 19:18:14 +0100
Subject: [PATCH 01/30] Translate until line 72

---
 content/docs/jsx-in-depth.md | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index eb3dc3a5b..2544a6b6b 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -1,6 +1,6 @@
 ---
 id: jsx-in-depth
-title: JSX In Depth
+title: JSX im Detail
 permalink: docs/jsx-in-depth.html
 redirect_from:
   - "docs/jsx-spread.html"
@@ -13,7 +13,7 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
+Im Grunde stellt JSX nur eine schönere Syntax für die `React.createElement(component, props, ...children)`-Funktion zur Verfügung. Der JSX-Code:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
@@ -21,7 +21,7 @@ Fundamentally, JSX just provides syntactic sugar for the `React.createElement(co
 </MyButton>
 ```
 
-compiles into:
+kompiliert zu:
 
 ```js
 React.createElement(
@@ -31,13 +31,13 @@ React.createElement(
 )
 ```
 
-You can also use the self-closing form of the tag if there are no children. So:
+Du kannst auch die selbstschließende Version des Tags nutzen, sofern keine Kind-Elemente vorhanden sind. So kompiliert:
 
 ```js
 <div className="sidebar" />
 ```
 
-compiles into:
+zu:
 
 ```js
 React.createElement(
@@ -47,19 +47,20 @@ React.createElement(
 )
 ```
 
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+Wenn du ausprobieren möchtest wie dein JSX zu welchem JavaScript konvertiert, kannst du [den Online-Babel-Compiler](babel://jsx-simple-example) nutzen.
 
-## Specifying The React Element Type {#specifying-the-react-element-type}
+## Den React Elementen-Typ spezifizieren {#specifying-the-react-element-type}
 
-The first part of a JSX tag determines the type of the React element.
+Der erste Teil eines JSX-Tags gibt den Typen des React-Elements an. 
 
-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
+Kapitalisierte Typen geben an dass der JSX-Tag sich auf einen React-Komponenten bezieht. Solche Tags werden in eine direkte Referenz der benannten Variablen kompiliert, folglich muss sich `Foo` auch im entsprechenden Namensraum befinden, wenn du den JSX `<Foo />`-Ausdruck nutzt.
 
-### React Must Be in Scope {#react-must-be-in-scope}
 
-Since JSX compiles into calls to `React.createElement`, the `React` library must also always be in scope from your JSX code.
+### React muss sich im Namensraum befinden {#react-must-be-in-scope}
 
-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
+Da JSX zu einem `React.createElement`-Aufruf kompiliert, muss auch die `React`-Bibliothek immer im Namensraum deines JSX-Codes eingebunden sein.
+
+Beispielsweise sind beide Importierungen in diesem Code nötig, sogar wenn weder `React` noch `CustomButton` direkt im JavaScript aufgegriffen werden:
 
 ```js{1,2,5}
 import React from 'react';

From dd92d012fe83c1fef3c1e8f033ceecef1a602489 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Sun, 12 Jan 2020 19:37:24 +0100
Subject: [PATCH 02/30] Translate until line 115

---
 content/docs/jsx-in-depth.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 2544a6b6b..6d1b16a88 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -72,11 +72,11 @@ function WarningButton() {
 }
 ```
 
-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
+Wenn du keinen JavaScript-Bundler nutzt und React via `<script>`-Tag lädst, dann befindet es sich bereits als `React`-Globale im Namensraum.
 
-### Using Dot Notation for JSX Type {#using-dot-notation-for-jsx-type}
+### Die Punkt-Notation als JSX-Typen nutzen {#using-dot-notation-for-jsx-type}
 
-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
+Es ist möglich einen React-Komponenten via Punkt-Notation innerhalb des JSX zu referenzieren. Dies ist besonders bequem wenn du mehrere React-Komponenten aus einem Modul exportierst. Wenn zum Beispiel `MyComponents.DatePicker` eine Komponente ist, kannst du Diese direkt im JSX wie folgt nutzen:
 
 ```js{10}
 import React from 'react';
@@ -92,25 +92,25 @@ function BlueDatePicker() {
 }
 ```
 
-### User-Defined Components Must Be Capitalized {#user-defined-components-must-be-capitalized}
+### Nutzerdefinierte Komponenten müssen Kapitalisiert sein {#user-defined-components-must-be-capitalized}
 
-When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string `'div'` or `'span'` passed to `React.createElement`. Types that start with a capital letter like `<Foo />` compile to `React.createElement(Foo)` and correspond to a component defined or imported in your JavaScript file.
+Sobald ein Elemententyp mit einem Kleinbuchstaben beginnt, bezieht sich Dieser auf einen bereits eingebauten Komponenten wie `<div>` oder `<span>`, welche `React.createElement`   als `'div'` oder `'span'` Zeichenkette übergeben werden. Typen die mit einem Großbuchstaben beginnen, wie z.B. `<Foo />`, kompilieren zu `React.createElement(Foo)` und beziehen sich auf eine Komponente, welche in deiner JavaScript-Datei eingebunden oder definiert wurde.
 
-We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
+Wir empfehlen Komponenten mit einem Großbuchstaben beginnend zu benennen. Solltest du eine Komponente nutzen die mit einem Kleinbuchstaben beginnt, ordne Diese einer kapitalisierten Variable zu, bevor du sie in JSX nutzt.  
 
-For example, this code will not run as expected:
+Folgender Code würde zum Beispiel nicht wie erwartet laufen:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Wrong! This is a component and should have been capitalized:
+// Falsch! Dies ist eine Komponente und sollte mit einem Großbuchstaben beginnen:
 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Richtig! Diese Nutzung von <div> ist erlaubt, da div ein valider HTML-Tag ist:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
+  // Falsch! React denkt das <hello /> ein HTML-Tag ist, weil es nicht mit einem Großbuchstaben beginnt:
   return <hello toWhat="World" />;
 }
 ```

From e22fff2cd30e701eb5c43955db4e98d5b4abcf9f Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Mon, 13 Jan 2020 20:50:04 +0100
Subject: [PATCH 03/30] Translate until line 170

---
 content/docs/jsx-in-depth.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 6d1b16a88..63d749eff 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -115,26 +115,26 @@ function HelloWorld() {
 }
 ```
 
-To fix this, we will rename `hello` to `Hello` and use `<Hello />` when referring to it:
+Um dies zu beheben benennen wir `hello` zu `Hello` um und nutzen `<Hello />` zum einbinden:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Correct! This is a component and should be capitalized:
+// Richtig! Da dies eine Komponente ist, sollte Diese auch mit einem Großbuchstaben beginnen:
 function Hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Richtig! Diese Nutzung von <div> ist erlaubt, da div ein valider HTML-Tag ist:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Correct! React knows <Hello /> is a component because it's capitalized.
+  // Richtig! React weiß dass <Hello /> eine Komponente ist, weil sie mit einem Großbuchstaben beginnt.
   return <Hello toWhat="World" />;
 }
 ```
 
-### Choosing the Type at Runtime {#choosing-the-type-at-runtime}
+### Den Typen zur Laufzeit bestimmen {#choosing-the-type-at-runtime}
 
-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
+Das Nutzen eines generellen Ausdrucks als React Elementtyp ist nicht möglich. Solltest du dennoch einen generellen Ausdruck zur Bezeichnung eines Elementtyps nutzen wollen, weiße Diesem vorher einer kapitalisierten Variablen zu. Dieser Fall tritt häufig ein wenn du eine Komponente abhängig von einer `prop` rendern willst: 
 
 ```js{10,11}
 import React from 'react';
@@ -146,12 +146,12 @@ const components = {
 };
 
 function Story(props) {
-  // Wrong! JSX type can't be an expression.
+  // Falsch! Der JSX Typ darf kein Ausdruck sein.
   return <components[props.storyType] story={props.story} />;
 }
 ```
 
-To fix this, we will assign the type to a capitalized variable first:
+Um dies zu beheben weisen wir dem Typen zuerst eine kapitalisierte Variable zu:
 
 ```js{10-12}
 import React from 'react';
@@ -163,7 +163,7 @@ const components = {
 };
 
 function Story(props) {
-  // Correct! JSX type can be a capitalized variable.
+  // Richtig! Der JSX Typ kann eine Variable sein welche mit einem Großbuchstaben beginnt.
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }

From 45bccd13124f4618e15242d5d93b4b96e25a0b9c Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Wed, 15 Jan 2020 21:45:24 +0100
Subject: [PATCH 04/30] Translate until line 211

---
 content/docs/jsx-in-depth.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 63d749eff..9c29ba1aa 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -171,19 +171,19 @@ function Story(props) {
 
 ## Props in JSX {#props-in-jsx}
 
-There are several different ways to specify props in JSX.
+Es gibt verschiedene Wege um props in JSX zu nutzen. 
 
-### JavaScript Expressions as Props {#javascript-expressions-as-props}
+### JavaScript-Ausdrücke als Props {#javascript-expressions-as-props}
 
-You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX:
+Man kann jeden JavaScript-Ausdruck als prop verwenden, indem du ihn mit `{}` ummantelst. Zum Beispiel im folgenden JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-For `MyComponent`, the value of `props.foo` will be `10` because the expression `1 + 2 + 3 + 4` gets evaluated.
+Für `MyComponent` wird der Inhalt von `props.foo` 10 sein, da der Ausdruck `1 + 2 + 3 + 4` ausgeführt wird.
 
-`if` statements and `for` loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:
+`if`-Anweisungen und `for`-Schleifen sind keine Ausdrücke in JavaScript, können also nicht direkt in JSX genutzt werden. Du kannst Diese stattdessen wie im folgenden Beispiel umsetzen:
 
 ```js{3-7}
 function NumberDescriber(props) {
@@ -197,11 +197,11 @@ function NumberDescriber(props) {
 }
 ```
 
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
+Du kannst mehr über [bedingtes Rendering](/docs/conditional-rendering.html) und [Schleifen](/docs/lists-and-keys.html) in den entsprechenden Abschnitten erfahren.
 
 ### String Literals {#string-literals}
 
-You can pass a string literal as a prop. These two JSX expressions are equivalent:
+Du kannst ein String Literal als prop weitergeben. Die folgenden JSX-Ausdrücke sind gleich:
 
 ```js
 <MyComponent message="hello world" />

From eb76ee5fac58425eafa33ec63342367c69f8aa74 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Thu, 16 Jan 2020 18:42:06 +0100
Subject: [PATCH 05/30] Translate until line 266

---
 content/docs/jsx-in-depth.md | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 9c29ba1aa..90bf7aebe 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -209,7 +209,7 @@ Du kannst ein String Literal als prop weitergeben. Die folgenden JSX-Ausdrücke
 <MyComponent message={'hello world'} />
 ```
 
-When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
+Wenn du ein String Literal weitergibst, ist der Inhalt des HTML-unformatiert. Somit sind die folgenden beiden Ausdrücke gleich:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -217,11 +217,11 @@ When you pass a string literal, its value is HTML-unescaped. So these two JSX ex
 <MyComponent message={'<3'} />
 ```
 
-This behavior is usually not relevant. It's only mentioned here for completeness.
+Normalerweise ist dieser Umstand nicht relevant. Es wird nur zum Zwecke der Vollständigkeit erwähnt. 
 
-### Props Default to "True" {#props-default-to-true}
+### Props standardmäßig auf "Wahr" {#props-default-to-true}
 
-If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
+Wenn du eine Prop ohne Inhalt weitergibst ist deren Wert standardmäßig `wahr`. Diese beiden JSX-Ausdrücke sind gleich:
 
 ```js
 <MyTextBox autocomplete />
@@ -229,11 +229,12 @@ If you pass no value for a prop, it defaults to `true`. These two JSX expression
 <MyTextBox autocomplete={true} />
 ```
 
-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
+Im Gesamten würden wir nicht empfehlen Dies so zu benutzen, da hier Verwechslungsgefahr mit der [ES6 object Abkürzung](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015), `{foo}` als Abkürzung für `{foo: foo}` im Gegensatz zu `{foo: true}`, besteht.
+Dieses Verhalten gibt es nur da es zum Verhalten von HTML passt. 
 
-### Spread Attributes {#spread-attributes}
+### Spread Attribute {#spread-attributes}
 
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
+Solltest du bereits `props` als ein Objekt haben und möchtest es an JSX weitergeben, kannst du mit `...` einen "Aufteilungs"-Operator für das ganze Propsobjekt nutzen. Diese beiden Komponenten sind gleich:
 
 ```js{7}
 function App1() {
@@ -246,7 +247,7 @@ function App2() {
 }
 ```
 
-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+Du kannst dir auch spezielle props aussuchen welche deine Komponente konsumiert und trotzdem alle anderen Props mit dem "Aufteilungs"-Operator weitergeben.
 
 ```js{2}
 const Button = props => {

From d368397c742aa4c6b84aca6f049fb98157bc65f9 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Sat, 18 Jan 2020 16:56:55 +0100
Subject: [PATCH 06/30] Translate until line 349

---
 content/docs/jsx-in-depth.md | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 90bf7aebe..5a74b86e1 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -267,30 +267,31 @@ const App = () => {
 };
 ```
 
-In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
-All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.
+Im obigen Beispiel wird die `kind`-Prop sicher ausgenommen und *wird nicht* zu dem `<button>`-Element im DOM weitergegeben.
+Alle anderen Props werden mit Hilfe des `...other`-Objekts weitergegeben, was die Komponente sehr flexibel macht. Man erkennt das eine `onClick` und eine `children` Prop weitergegeben werden.
 
-Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.  
+Spread-Attribute können sehr nützlich sein, sie machen es aber auch sehr einfach unnötige Props an Komponenten weiterzugeben, welche nicht auf sich oder darauf achten ob sie ungültige Attribute an den DOM weiterzugeben. Wir empfehlen diese Syntax mit Bedacht einzusetzen. 
 
-## Children in JSX {#children-in-jsx}
 
-In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
+## Kindelemente in JSX {#children-in-jsx}
+
+In JSX-Ausdrücken, die sowohl einen öffnenden als auch einen schließenden Tag beinhalten, wird der Inhalt zwischen diesen Tags als eine spiezielle Prop weitergegeben: `props.children`. Es gibt verschiedene Wege um Kindelemente weiterzugeben:
 
 ### String Literals {#string-literals-1}
 
-You can put a string between the opening and closing tags and `props.children` will just be that string. This is useful for many of the built-in HTML elements. For example:
+Du kannst eine Zeichenkette zwischen den öffnenden und den schließenden Tags platzieren, dann würde `props.children` eben nur für diese Zeichenkette stehen. Dies ist nützlich für viele der inklusiven HTML-Elemente. Zum Beispiel:
 
 ```js
 <MyComponent>Hello world!</MyComponent>
 ```
 
-This is valid JSX, and `props.children` in `MyComponent` will simply be the string `"Hello world!"`. HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:
+Hier handelt es sich um valides JSX und `props.children` wäre im `MyComponent` einfach nur die Zeichenkette `"Hello world!"`. HTML wird nicht ausgeschlossen, somit kannst du JSX generell einfach so schreiben wie du auch HTML auf diesem Wege schreiben würdest:
 
 ```html
 <div>This is valid HTML &amp; JSX at the same time.</div>
 ```
 
-JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:
+JSX entfernt den Weißraum am Anfang und am Ende einer Zeile. Außerdem entfernt es auch Leerzeilen. Neue Zeilen benachbart zu Tags werden entfernt; Neue Zeilen die in der Mitte von String Literals erscheinen werden in ein einzelnes Leerzeichen umgewandelt. Somit rendert alles Folgende zu dem selben Ergebnis:
 
 ```js
 <div>Hello World</div>
@@ -310,9 +311,9 @@ JSX removes whitespace at the beginning and ending of a line. It also removes bl
 </div>
 ```
 
-### JSX Children {#jsx-children}
+### JSX Kindelemente {#jsx-children}
 
-You can provide more JSX elements as the children. This is useful for displaying nested components:
+Du kannst mehrere JSX-Elemente als Kindelemente zur Verfügung stellen. Dies ist nützlich um verschachtelte Komponenten anzuzeigen:
 
 ```js
 <MyContainer>
@@ -321,7 +322,7 @@ You can provide more JSX elements as the children. This is useful for displaying
 </MyContainer>
 ```
 
-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
+Es ist möglich verschiedene Typen von Kindelementen miteinander zu vermischen, somit kannst du String Literals zusammen mit JSX-Kindelementen nutzen. Dies ist eine weitere Gemeinsamkeit von JSX und HTML bei der das Folgende sowohl valides JSX als auch valides HTML darstellt:
 
 ```html
 <div>
@@ -333,13 +334,13 @@ You can mix together different types of children, so you can use string literals
 </div>
 ```
 
-A React component can also return an array of elements:
+Eine React-Komponente kann auch ein Array von Elementen zurückgeben:
 
 ```js
 render() {
-  // No need to wrap list items in an extra element!
+  // Es ist nicht nötig die Listelemente mit einem extra Element zu umhüllen!
   return [
-    // Don't forget the keys :)
+    // Die Keys nicht vergessen :)
     <li key="A">First item</li>,
     <li key="B">Second item</li>,
     <li key="C">Third item</li>,

From 91b82d3fbbbcbe29993186cbd18daaeeccc3ceca Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Sun, 19 Jan 2020 13:36:38 +0100
Subject: [PATCH 07/30] Translate until line 377

---
 content/docs/jsx-in-depth.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 5a74b86e1..d4ff25e54 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -348,9 +348,9 @@ render() {
 }
 ```
 
-### JavaScript Expressions as Children {#javascript-expressions-as-children}
+### JavaScript-Ausdrücke als Kindelemente {#javascript-expressions-as-children}
 
-You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent:
+Du kannst jeden JavaScript-Ausdruck als Kindelement weitergeben, indem du es mit `{}` umhüllst. Die folgenden Ausdrücke sind zum Beispiel gleich:
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -358,7 +358,7 @@ You can pass any JavaScript expression as children, by enclosing it within `{}`.
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
+Dies zeigt sich oft als nützlich sobald du eine Liste von JSX-Ausdrücken mit unbestimmter Länge rendern möchtest. Das folgende Beispiel rendert eine HTML-Liste:
 
 ```js{2,9}
 function Item(props) {

From 2e37ec380b476d3256116d200bc8d34ebe6a2e36 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Sun, 19 Jan 2020 20:50:52 +0100
Subject: [PATCH 08/30] Switch "String Literal" to "String-Literals"

---
 content/docs/jsx-in-depth.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index d4ff25e54..a34d2e4f8 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -199,9 +199,9 @@ function NumberDescriber(props) {
 
 Du kannst mehr über [bedingtes Rendering](/docs/conditional-rendering.html) und [Schleifen](/docs/lists-and-keys.html) in den entsprechenden Abschnitten erfahren.
 
-### String Literals {#string-literals}
+### String-Literals {#string-literals}
 
-Du kannst ein String Literal als prop weitergeben. Die folgenden JSX-Ausdrücke sind gleich:
+Du kannst ein String-Literal als prop weitergeben. Die folgenden JSX-Ausdrücke sind gleich:
 
 ```js
 <MyComponent message="hello world" />
@@ -209,7 +209,7 @@ Du kannst ein String Literal als prop weitergeben. Die folgenden JSX-Ausdrücke
 <MyComponent message={'hello world'} />
 ```
 
-Wenn du ein String Literal weitergibst, ist der Inhalt des HTML-unformatiert. Somit sind die folgenden beiden Ausdrücke gleich:
+Wenn du ein String-Literal weitergibst, ist der Inhalt des HTML-unformatiert. Somit sind die folgenden beiden Ausdrücke gleich:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -277,7 +277,7 @@ Spread-Attribute können sehr nützlich sein, sie machen es aber auch sehr einfa
 
 In JSX-Ausdrücken, die sowohl einen öffnenden als auch einen schließenden Tag beinhalten, wird der Inhalt zwischen diesen Tags als eine spiezielle Prop weitergegeben: `props.children`. Es gibt verschiedene Wege um Kindelemente weiterzugeben:
 
-### String Literals {#string-literals-1}
+### String-Literals {#string-literals-1}
 
 Du kannst eine Zeichenkette zwischen den öffnenden und den schließenden Tags platzieren, dann würde `props.children` eben nur für diese Zeichenkette stehen. Dies ist nützlich für viele der inklusiven HTML-Elemente. Zum Beispiel:
 
@@ -291,7 +291,7 @@ Hier handelt es sich um valides JSX und `props.children` wäre im `MyComponent`
 <div>This is valid HTML &amp; JSX at the same time.</div>
 ```
 
-JSX entfernt den Weißraum am Anfang und am Ende einer Zeile. Außerdem entfernt es auch Leerzeilen. Neue Zeilen benachbart zu Tags werden entfernt; Neue Zeilen die in der Mitte von String Literals erscheinen werden in ein einzelnes Leerzeichen umgewandelt. Somit rendert alles Folgende zu dem selben Ergebnis:
+JSX entfernt den Weißraum am Anfang und am Ende einer Zeile. Außerdem entfernt es auch Leerzeilen. Neue Zeilen benachbart zu Tags werden entfernt; Neue Zeilen die in der Mitte von String-Literals erscheinen werden in ein einzelnes Leerzeichen umgewandelt. Somit rendert alles Folgende zu dem selben Ergebnis:
 
 ```js
 <div>Hello World</div>
@@ -322,7 +322,7 @@ Du kannst mehrere JSX-Elemente als Kindelemente zur Verfügung stellen. Dies ist
 </MyContainer>
 ```
 
-Es ist möglich verschiedene Typen von Kindelementen miteinander zu vermischen, somit kannst du String Literals zusammen mit JSX-Kindelementen nutzen. Dies ist eine weitere Gemeinsamkeit von JSX und HTML bei der das Folgende sowohl valides JSX als auch valides HTML darstellt:
+Es ist möglich verschiedene Typen von Kindelementen miteinander zu vermischen, somit kannst du String-Literals zusammen mit JSX-Kindelementen nutzen. Dies ist eine weitere Gemeinsamkeit von JSX und HTML bei der dasS Folgende sowohl valides JSX als auch valides HTML darstellt:
 
 ```html
 <div>

From 4ca404685b2224ddbe95113c8b276619b3a13b31 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Sun, 19 Jan 2020 20:52:18 +0100
Subject: [PATCH 09/30] Switch String Literal to String-Literal

---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index a34d2e4f8..354954d49 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -322,7 +322,7 @@ Du kannst mehrere JSX-Elemente als Kindelemente zur Verfügung stellen. Dies ist
 </MyContainer>
 ```
 
-Es ist möglich verschiedene Typen von Kindelementen miteinander zu vermischen, somit kannst du String-Literals zusammen mit JSX-Kindelementen nutzen. Dies ist eine weitere Gemeinsamkeit von JSX und HTML bei der dasS Folgende sowohl valides JSX als auch valides HTML darstellt:
+Es ist möglich verschiedene Typen von Kindelementen miteinander zu vermischen, somit kannst du String-Literals zusammen mit JSX-Kindelementen nutzen. Dies ist eine weitere Gemeinsamkeit von JSX und HTML bei der das Folgende sowohl valides JSX als auch valides HTML darstellt:
 
 ```html
 <div>

From d92e8e3fab9ece9a03cc216ee98a8fa9228703cc Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Mon, 20 Jan 2020 21:10:53 +0100
Subject: [PATCH 10/30] Translate until line 386

---
 content/docs/jsx-in-depth.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 354954d49..dc880530b 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -375,7 +375,7 @@ function TodoList() {
 }
 ```
 
-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
+JavaScript-Ausdrücke können mit anderen Typen von Kindelementen zusammen gemischt werden. Dies ist oft nützlich im Gegensatz zu String-Templates:
 
 ```js{2}
 function Hello(props) {
@@ -383,7 +383,7 @@ function Hello(props) {
 }
 ```
 
-### Functions as Children {#functions-as-children}
+### Funktionen als Kindelemente {#functions-as-children}
 
 Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
 

From 75aaf69d7b9196fc9fe6c6e38131a7ec87286b96 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 21 Jan 2020 19:42:50 +0100
Subject: [PATCH 11/30] Translate until line 406

---
 content/docs/jsx-in-depth.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index dc880530b..d3706fc23 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -385,10 +385,10 @@ function Hello(props) {
 
 ### Funktionen als Kindelemente {#functions-as-children}
 
-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
+Normalerweise werden in JSX eingefügte JavaScript-Ausdrücke zu einer Zeichenkette, einem React-Element, oder einer Liste dieser Dinge ausgeführt. Wie dem auch sei, `props.children` funktioniert genau wie jede andere Prop, da es in der Lage ist jede Art von Daten weiterzugeben, nicht nur Solche bei denen React weiß wie es Diese rendern soll. Wenn du Beispiel eine eigene Komponente hast, kannst du Dieser eine Callback-Funktion als `props.children` übergeben: 
 
 ```js{4,13}
-// Calls the children callback numTimes to produce a repeated component
+// Ruft die Kindelement-Callback-Funktion numTimes-mal auf und produziert mehrmals eine Komponente
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {

From 575a97c0ae13896966edd4bf07411e199e2052f9 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Wed, 22 Jan 2020 20:41:29 +0100
Subject: [PATCH 12/30] Translate until line 436

---
 content/docs/jsx-in-depth.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index d3706fc23..9728352f2 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -405,12 +405,12 @@ function ListOfTenThings() {
   );
 }
 ```
+ 
+Kindelemente, die zu einer Komponente weitergegeben werden, können alles sein, solange die Komponente die Kindelemente vor dem Rendering in etwas verwandelt was React versteht. Dieses Verfahren wird nicht sehr häufig angewand, aber es funktioniert, solltest du einmal die Grenzen des Machbaren in JSX etwas ausreizen wollen.
 
-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
+### Boolean, Null, und Undefined werden ignoriert {#booleans-null-and-undefined-are-ignored}
 
-### Booleans, Null, and Undefined Are Ignored {#booleans-null-and-undefined-are-ignored}
-
-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
+`false`, `null`, `undefined`, und `true` sind valide Kindelemente. Diese werden jedoch nicht gerendert. Die folgenden JSX-Ausdrücke rendern alle zum gleichen Ergebnis:
 
 ```js
 <div />
@@ -426,7 +426,7 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```
 
-This can be useful to conditionally render React elements. This JSX renders the `<Header />` component only if `showHeader` is `true`:
+Dies ist nützlich um React-Elemente geknüpft an Bedingungen zu rendern. Das folgende JSX rendert die `<Header />`-Komponente nur wenn `showHeader` `true` ist:
 
 ```js{2}
 <div>

From d9becd38a96e855eb91d93069044c49a66fcc6ef Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Thu, 23 Jan 2020 20:33:33 +0100
Subject: [PATCH 13/30] Finish initial translation

---
 content/docs/jsx-in-depth.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 9728352f2..e035cb793 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -435,7 +435,7 @@ Dies ist nützlich um React-Elemente geknüpft an Bedingungen zu rendern. Das fo
 </div>
 ```
 
-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+Diese Regel gilt nur unter Vorbehalt, da ["falsy" Wertte](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), wie beispielsweise die Nummer `0`, trotzdem von React gerendert werden. Der folgende Code könnte sich zum Beispiel anders als erwartet verhalten, da hier `0` ausgegeben wird wenn `props.messages` ein leeres Array ist: 
 
 ```js{2}
 <div>
@@ -445,7 +445,7 @@ One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/doc
 </div>
 ```
 
-To fix this, make sure that the expression before `&&` is always boolean:
+Um dies zu beheben, stelle sicher das der Ausdruck vor `&&` immer ein boolscher Wert ist:
 
 ```js{2}
 <div>
@@ -455,7 +455,7 @@ To fix this, make sure that the expression before `&&` is always boolean:
 </div>
 ```
 
-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
+Umgekehrt, solltest du Werte wie `false`, `true`, `null`, oder `undefined` ausgeben wollen, musst du Diese zuerst [in einen String umwandeln](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion):
 
 ```js{2}
 <div>

From b60e59950cf2282a2da42b69f68905826d040112 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Thu, 23 Jan 2020 20:34:58 +0100
Subject: [PATCH 14/30] Rename "Zeichenkette" to "String"

---
 content/docs/jsx-in-depth.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index e035cb793..2628ff80c 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -94,7 +94,7 @@ function BlueDatePicker() {
 
 ### Nutzerdefinierte Komponenten müssen Kapitalisiert sein {#user-defined-components-must-be-capitalized}
 
-Sobald ein Elemententyp mit einem Kleinbuchstaben beginnt, bezieht sich Dieser auf einen bereits eingebauten Komponenten wie `<div>` oder `<span>`, welche `React.createElement`   als `'div'` oder `'span'` Zeichenkette übergeben werden. Typen die mit einem Großbuchstaben beginnen, wie z.B. `<Foo />`, kompilieren zu `React.createElement(Foo)` und beziehen sich auf eine Komponente, welche in deiner JavaScript-Datei eingebunden oder definiert wurde.
+Sobald ein Elemententyp mit einem Kleinbuchstaben beginnt, bezieht sich Dieser auf einen bereits eingebauten Komponenten wie `<div>` oder `<span>`, welche `React.createElement`   als `'div'` oder `'span'` String übergeben werden. Typen die mit einem Großbuchstaben beginnen, wie z.B. `<Foo />`, kompilieren zu `React.createElement(Foo)` und beziehen sich auf eine Komponente, welche in deiner JavaScript-Datei eingebunden oder definiert wurde.
 
 Wir empfehlen Komponenten mit einem Großbuchstaben beginnend zu benennen. Solltest du eine Komponente nutzen die mit einem Kleinbuchstaben beginnt, ordne Diese einer kapitalisierten Variable zu, bevor du sie in JSX nutzt.  
 
@@ -279,13 +279,13 @@ In JSX-Ausdrücken, die sowohl einen öffnenden als auch einen schließenden Tag
 
 ### String-Literals {#string-literals-1}
 
-Du kannst eine Zeichenkette zwischen den öffnenden und den schließenden Tags platzieren, dann würde `props.children` eben nur für diese Zeichenkette stehen. Dies ist nützlich für viele der inklusiven HTML-Elemente. Zum Beispiel:
+Du kannst einen String zwischen den öffnenden und den schließenden Tags platzieren, dann würde `props.children` eben nur für diesen String stehen. Dies ist nützlich für viele der inklusiven HTML-Elemente. Zum Beispiel:
 
 ```js
 <MyComponent>Hello world!</MyComponent>
 ```
 
-Hier handelt es sich um valides JSX und `props.children` wäre im `MyComponent` einfach nur die Zeichenkette `"Hello world!"`. HTML wird nicht ausgeschlossen, somit kannst du JSX generell einfach so schreiben wie du auch HTML auf diesem Wege schreiben würdest:
+Hier handelt es sich um valides JSX und `props.children` wäre im `MyComponent` einfach nur den String `"Hello world!"`. HTML wird nicht ausgeschlossen, somit kannst du JSX generell einfach so schreiben wie du auch HTML auf diesem Wege schreiben würdest:
 
 ```html
 <div>This is valid HTML &amp; JSX at the same time.</div>
@@ -385,7 +385,7 @@ function Hello(props) {
 
 ### Funktionen als Kindelemente {#functions-as-children}
 
-Normalerweise werden in JSX eingefügte JavaScript-Ausdrücke zu einer Zeichenkette, einem React-Element, oder einer Liste dieser Dinge ausgeführt. Wie dem auch sei, `props.children` funktioniert genau wie jede andere Prop, da es in der Lage ist jede Art von Daten weiterzugeben, nicht nur Solche bei denen React weiß wie es Diese rendern soll. Wenn du Beispiel eine eigene Komponente hast, kannst du Dieser eine Callback-Funktion als `props.children` übergeben: 
+Normalerweise werden in JSX eingefügte JavaScript-Ausdrücke zu einem String, einem React-Element, oder einer Liste dieser Dinge ausgeführt. Wie dem auch sei, `props.children` funktioniert genau wie jede andere Prop, da es in der Lage ist jede Art von Daten weiterzugeben, nicht nur Solche bei denen React weiß wie es Diese rendern soll. Wenn du Beispiel eine eigene Komponente hast, kannst du Dieser eine Callback-Funktion als `props.children` übergeben: 
 
 ```js{4,13}
 // Ruft die Kindelement-Callback-Funktion numTimes-mal auf und produziert mehrmals eine Komponente

From 1517fda5e80b82eacf8779e9776ec2b5178d460e Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:50:09 +0100
Subject: [PATCH 15/30] Update content/docs/jsx-in-depth.md

Accept suggestions ins line 438

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 2628ff80c..91bea5227 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -435,7 +435,7 @@ Dies ist nützlich um React-Elemente geknüpft an Bedingungen zu rendern. Das fo
 </div>
 ```
 
-Diese Regel gilt nur unter Vorbehalt, da ["falsy" Wertte](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), wie beispielsweise die Nummer `0`, trotzdem von React gerendert werden. Der folgende Code könnte sich zum Beispiel anders als erwartet verhalten, da hier `0` ausgegeben wird wenn `props.messages` ein leeres Array ist: 
+Diese Regel gilt nur unter Vorbehalt, da ["falsy" Werte](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), wie beispielsweise die Nummer `0`, trotzdem von React gerendert werden. Der folgende Code könnte sich zum Beispiel anders als erwartet verhalten, da hier `0` ausgegeben wird wenn `props.messages` ein leeres Array ist: 
 
 ```js{2}
 <div>

From 9dee1fb8053f8c742d304208a6548cb971f4640b Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:50:57 +0100
Subject: [PATCH 16/30] Update content/docs/jsx-in-depth.md

Accept suggestions ins line 429

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 91bea5227..231d9e3ba 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -426,7 +426,7 @@ Kindelemente, die zu einer Komponente weitergegeben werden, können alles sein,
 <div>{true}</div>
 ```
 
-Dies ist nützlich um React-Elemente geknüpft an Bedingungen zu rendern. Das folgende JSX rendert die `<Header />`-Komponente nur wenn `showHeader` `true` ist:
+Dies ist nützlich um React-Elemente, die an Bedingungen geknüpft sind zu rendern. Das folgende JSX rendert die `<Header />`-Komponente nur wenn `showHeader` `true` ist:
 
 ```js{2}
 <div>

From 2113d98391e85a9100603223ea2450ec5fdd3088 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:51:47 +0100
Subject: [PATCH 17/30] Update content/docs/jsx-in-depth.md

Accept suggestions ins line 409

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 231d9e3ba..5b4174624 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -406,7 +406,7 @@ function ListOfTenThings() {
 }
 ```
  
-Kindelemente, die zu einer Komponente weitergegeben werden, können alles sein, solange die Komponente die Kindelemente vor dem Rendering in etwas verwandelt was React versteht. Dieses Verfahren wird nicht sehr häufig angewand, aber es funktioniert, solltest du einmal die Grenzen des Machbaren in JSX etwas ausreizen wollen.
+Kindelemente, die zu einer benutzerdefinierten Komponente weitergegeben werden, können alles sein, solange diese Komponente sie vor dem Rendern in etwas umwandelt, das React verstehen kann. Diese Verwendung ist nicht üblich, aber sie funktioniert, solltest du einmal die Möglichkeiten von JSX etwas ausreizen wollen.
 
 ### Boolean, Null, und Undefined werden ignoriert {#booleans-null-and-undefined-are-ignored}
 

From 3805afe531cbefce1c36794aca82cb11bb42a28b Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:54:31 +0100
Subject: [PATCH 18/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 224

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 5b4174624..5973e7ff3 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -221,7 +221,7 @@ Normalerweise ist dieser Umstand nicht relevant. Es wird nur zum Zwecke der Voll
 
 ### Props standardmäßig auf "Wahr" {#props-default-to-true}
 
-Wenn du eine Prop ohne Inhalt weitergibst ist deren Wert standardmäßig `wahr`. Diese beiden JSX-Ausdrücke sind gleich:
+Wenn du eine Prop ohne Inhalt weitergibst ist deren Wert standardmäßig `true`. Diese beiden JSX-Ausdrücke sind gleich:
 
 ```js
 <MyTextBox autocomplete />

From 05412e71d2bec7d63244a041d57c35487b52ba9c Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:55:09 +0100
Subject: [PATCH 19/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 378

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 5973e7ff3..fb15dac97 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -375,7 +375,7 @@ function TodoList() {
 }
 ```
 
-JavaScript-Ausdrücke können mit anderen Typen von Kindelementen zusammen gemischt werden. Dies ist oft nützlich im Gegensatz zu String-Templates:
+JavaScript-Ausdrücke können mit anderen Typen von Kindelementen vermischt werden. Dies ist oft nützlich im Gegensatz zu String-Templates:
 
 ```js{2}
 function Hello(props) {

From 1581deab6622991314eb5d1dc8eac93addb98db8 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:55:42 +0100
Subject: [PATCH 20/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 325

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index fb15dac97..3ae8dee33 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -322,7 +322,7 @@ Du kannst mehrere JSX-Elemente als Kindelemente zur Verfügung stellen. Dies ist
 </MyContainer>
 ```
 
-Es ist möglich verschiedene Typen von Kindelementen miteinander zu vermischen, somit kannst du String-Literals zusammen mit JSX-Kindelementen nutzen. Dies ist eine weitere Gemeinsamkeit von JSX und HTML bei der das Folgende sowohl valides JSX als auch valides HTML darstellt:
+Es ist möglich verschiedene Typen von Kindelementen miteinander zu vermischen, somit kannst du String-Literale zusammen mit JSX-Kindelementen nutzen. Dies ist eine weitere Gemeinsamkeit von JSX und HTML bei der das Folgende sowohl valides JSX als auch valides HTML darstellt:
 
 ```html
 <div>

From 629fdde0d19d6b2a33a75e62501549ab87c014c1 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:56:13 +0100
Subject: [PATCH 21/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 294

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 3ae8dee33..6c54fc276 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -291,7 +291,7 @@ Hier handelt es sich um valides JSX und `props.children` wäre im `MyComponent`
 <div>This is valid HTML &amp; JSX at the same time.</div>
 ```
 
-JSX entfernt den Weißraum am Anfang und am Ende einer Zeile. Außerdem entfernt es auch Leerzeilen. Neue Zeilen benachbart zu Tags werden entfernt; Neue Zeilen die in der Mitte von String-Literals erscheinen werden in ein einzelnes Leerzeichen umgewandelt. Somit rendert alles Folgende zu dem selben Ergebnis:
+JSX entfernt den Leerzeichen am Anfang und am Ende einer Zeile. Außerdem entfernt es auch Leerzeilen. Neue Zeilen benachbart zu Tags werden entfernt; Neue Zeilen die in der Mitte von String-Literalen erscheinen werden in ein einzelnes Leerzeichen umgewandelt. Somit rendert alles Folgende zu dem selben Ergebnis:
 
 ```js
 <div>Hello World</div>

From cb29f554ca52b3a31c4c0953222c5212a8b1e181 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:56:43 +0100
Subject: [PATCH 22/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 212

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 6c54fc276..1fecdc865 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -209,7 +209,7 @@ Du kannst ein String-Literal als prop weitergeben. Die folgenden JSX-Ausdrücke
 <MyComponent message={'hello world'} />
 ```
 
-Wenn du ein String-Literal weitergibst, ist der Inhalt des HTML-unformatiert. Somit sind die folgenden beiden Ausdrücke gleich:
+Wenn du ein String-Literal weitergibst, ist sein Wert HTML-unformatiert. Somit sind die folgenden beiden Ausdrücke gleich:
 
 ```js
 <MyComponent message="&lt;3" />

From ab90799ecc85457c19940434983a0d8fad88b38e Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:57:04 +0100
Subject: [PATCH 23/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 178

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 1fecdc865..375ee96e1 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -175,7 +175,7 @@ Es gibt verschiedene Wege um props in JSX zu nutzen.
 
 ### JavaScript-Ausdrücke als Props {#javascript-expressions-as-props}
 
-Man kann jeden JavaScript-Ausdruck als prop verwenden, indem du ihn mit `{}` ummantelst. Zum Beispiel im folgenden JSX:
+Man kann jeden JavaScript-Ausdruck als Prop verwenden, indem du ihn mit `{}` ummantelst. Zum Beispiel im folgenden JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />

From 363e56c2f4fd7b0cd5d62b2fbcfc9d27bdf1b229 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:58:33 +0100
Subject: [PATCH 24/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 154

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 375ee96e1..a82856edf 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -151,7 +151,7 @@ function Story(props) {
 }
 ```
 
-Um dies zu beheben weisen wir dem Typen zuerst eine kapitalisierte Variable zu:
+Um dies zu beheben, weisen wir zunächst den Typ einer großgeschriebenen Variable zu:
 
 ```js{10-12}
 import React from 'react';

From 098d055b8d587a9683ee90ca2c5d5035524ef394 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:58:54 +0100
Subject: [PATCH 25/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 149

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index a82856edf..58adfeda2 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -146,7 +146,7 @@ const components = {
 };
 
 function Story(props) {
-  // Falsch! Der JSX Typ darf kein Ausdruck sein.
+  // Falsch! Der JSX-Typ kann kein Ausdruck sein.
   return <components[props.storyType] story={props.story} />;
 }
 ```

From d10eba925d66b72a104c7ffa2712bdad49d814f1 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 06:59:31 +0100
Subject: [PATCH 26/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 288

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 58adfeda2..9a5281ce4 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -285,7 +285,7 @@ Du kannst einen String zwischen den öffnenden und den schließenden Tags platzi
 <MyComponent>Hello world!</MyComponent>
 ```
 
-Hier handelt es sich um valides JSX und `props.children` wäre im `MyComponent` einfach nur den String `"Hello world!"`. HTML wird nicht ausgeschlossen, somit kannst du JSX generell einfach so schreiben wie du auch HTML auf diesem Wege schreiben würdest:
+Hier handelt es sich um valides JSX und `props.children` wäre in `MyComponent` einfach nur der String `"Hello world!"`. HTML wird nicht ausgeschlossen, somit kannst du JSX generell einfach so schreiben wie du auch HTML auf diesem Wege schreiben würdest:
 
 ```html
 <div>This is valid HTML &amp; JSX at the same time.</div>

From 4eb7cf6a8150ef193925118ce9e38e02e41e3a01 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 07:00:08 +0100
Subject: [PATCH 27/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 270

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 9a5281ce4..024e6a384 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -267,7 +267,7 @@ const App = () => {
 };
 ```
 
-Im obigen Beispiel wird die `kind`-Prop sicher ausgenommen und *wird nicht* zu dem `<button>`-Element im DOM weitergegeben.
+Im obigen Beispiel wird die `kind`-Prop sicher ausgenommen und *wird nicht* zum `<button>`-Element im DOM weitergegeben.
 Alle anderen Props werden mit Hilfe des `...other`-Objekts weitergegeben, was die Komponente sehr flexibel macht. Man erkennt das eine `onClick` und eine `children` Prop weitergegeben werden.
 
 Spread-Attribute können sehr nützlich sein, sie machen es aber auch sehr einfach unnötige Props an Komponenten weiterzugeben, welche nicht auf sich oder darauf achten ob sie ungültige Attribute an den DOM weiterzugeben. Wir empfehlen diese Syntax mit Bedacht einzusetzen. 

From 0bd099ef7b3f6701dae0336fec4214685e8a9f31 Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 07:00:40 +0100
Subject: [PATCH 28/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 250

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 024e6a384..eca3d13eb 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -247,7 +247,7 @@ function App2() {
 }
 ```
 
-Du kannst dir auch spezielle props aussuchen welche deine Komponente konsumiert und trotzdem alle anderen Props mit dem "Aufteilungs"-Operator weitergeben.
+Du kannst dir auch spezielle Props aussuchen welche deine Komponente konsumiert und trotzdem alle anderen Props mit dem "spread"-Operator weitergeben.
 
 ```js{2}
 const Button = props => {

From 74ce75754f07053aceca5095548a4b5ca846a3df Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 07:01:14 +0100
Subject: [PATCH 29/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 237

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index eca3d13eb..0d2d5a928 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -234,7 +234,7 @@ Dieses Verhalten gibt es nur da es zum Verhalten von HTML passt.
 
 ### Spread Attribute {#spread-attributes}
 
-Solltest du bereits `props` als ein Objekt haben und möchtest es an JSX weitergeben, kannst du mit `...` einen "Aufteilungs"-Operator für das ganze Propsobjekt nutzen. Diese beiden Komponenten sind gleich:
+Solltest du bereits `props` als ein Objekt haben und möchtest es an JSX weitergeben, kannst du mit `...` einen "spread"-Operator für das ganze Props-Objekt nutzen. Diese beiden Komponenten sind gleich:
 
 ```js{7}
 function App1() {

From 73d79e18979f3eec8ceeb4c14da642c95b3da61f Mon Sep 17 00:00:00 2001
From: Sascha Metz <metz@raum3.de>
Date: Tue, 18 Feb 2020 17:54:32 +0100
Subject: [PATCH 30/30] Update content/docs/jsx-in-depth.md

Accept suggestions in line 388

Co-Authored-By: Phil <phil@capshake.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 0d2d5a928..9140152de 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -385,7 +385,7 @@ function Hello(props) {
 
 ### Funktionen als Kindelemente {#functions-as-children}
 
-Normalerweise werden in JSX eingefügte JavaScript-Ausdrücke zu einem String, einem React-Element, oder einer Liste dieser Dinge ausgeführt. Wie dem auch sei, `props.children` funktioniert genau wie jede andere Prop, da es in der Lage ist jede Art von Daten weiterzugeben, nicht nur Solche bei denen React weiß wie es Diese rendern soll. Wenn du Beispiel eine eigene Komponente hast, kannst du Dieser eine Callback-Funktion als `props.children` übergeben: 
+Normalerweise werden die in JSX eingefügten JavaScript-Ausdrücke als String, einem React-Element, oder einer Liste dieser Dinge ausgegeben. Wie dem auch sei, `props.children` funktioniert genau wie jede andere Prop, da es in der Lage ist jede Art von Daten weiterzugeben, nicht nur Solche bei denen React weiß wie es Diese rendern soll. Wenn du zum Beispiel eine eigene Komponente hast, kannst du Dieser eine Callback-Funktion als `props.children` übergeben: 
 
 ```js{4,13}
 // Ruft die Kindelement-Callback-Funktion numTimes-mal auf und produziert mehrmals eine Komponente