diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml
index ca7dceb58..a94f0750b 100644
--- a/content/tutorial/nav.yml
+++ b/content/tutorial/nav.yml
@@ -1,7 +1,7 @@
- title: Tutorial
items:
- id: before-we-start-the-tutorial
- title: Bevor wir mit dem Tutorial beginnen
+ title: Bevor wir mit dem Tutorial anfangen
href: /tutorial/tutorial.html#before-we-start-the-tutorial
forceInternal: true
subitems:
@@ -10,7 +10,7 @@
href: /tutorial/tutorial.html#what-are-we-building
forceInternal: true
- id: prerequisites
- title: Vorraussetzungen
+ title: Voraussetzungen
href: /tutorial/tutorial.html#prerequisites
forceInternal: true
- id: setup-for-the-tutorial
@@ -40,11 +40,11 @@
href: /tutorial/tutorial.html#what-is-react
forceInternal: true
- id: inspecting-the-starter-code
- title: Betrachten des ersten Codes
+ title: Untersuchen des Einstiegscodes
href: /tutorial/tutorial.html#inspecting-the-starter-code
forceInternal: true
- id: passing-data-through-props
- title: Daten über Properties weitergeben
+ title: Daten über Props weitergeben
href: /tutorial/tutorial.html#passing-data-through-props
forceInternal: true
- id: making-an-interactive-component
@@ -52,7 +52,7 @@
href: /tutorial/tutorial.html#making-an-interactive-component
forceInternal: true
- id: developer-tools
- title: Developer Tools
+ title: Entwicklerwerkzeuge
href: /tutorial/tutorial.html#developer-tools
forceInternal: true
- id: completing-the-game
@@ -61,23 +61,23 @@
forceInternal: true
subitems:
- id: lifting-state-up
- title: Den State hoch holen
+ title: Den State hochziehen
href: /tutorial/tutorial.html#lifting-state-up
forceInternal: true
- id: why-immutability-is-important
- title: Warum ist Immutability wichtig
+ title: Warum Unveränderlichkeit (engl. Immutability) wichtig ist
href: /tutorial/tutorial.html#why-immutability-is-important
forceInternal: true
- id: function-components
- title: Funktionskomponente
+ title: Funktionskomponenten
href: /tutorial/tutorial.html#function-components
forceInternal: true
- id: taking-turns
- title: Einen Zug machen
+ title: Abwechselnd einen Zug machen
href: /tutorial/tutorial.html#taking-turns
forceInternal: true
- id: declaring-a-winner
- title: Einen Gewinner verkünden
+ title: Einen Gewinner bekanntgeben
href: /tutorial/tutorial.html#declaring-a-winner
forceInternal: true
- id: adding-time-travel
@@ -86,11 +86,11 @@
forceInternal: true
subitems:
- id: storing-a-history-of-moves
- title: Einen Zug-Verlauf speichern
+ title: Speichern eines Verlaufs von Spielzügen
href: /tutorial/tutorial.html#storing-a-history-of-moves
forceInternal: true
- id: lifting-state-up-again
- title: Den State nochmal hoch holen
+ title: Den State nochmal hochziehen
href: /tutorial/tutorial.html#lifting-state-up-again
forceInternal: true
- id: showing-the-past-moves
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index fe73a7653..7bb39ccc6 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -1,6 +1,6 @@
---
id: tutorial
-title: "Tutorial: Intro to React"
+title: "Tutorial: Einführung in React"
layout: tutorial
sectionid: tutorial
permalink: tutorial/tutorial.html
@@ -12,97 +12,97 @@ redirect_from:
- "docs/tutorial-zh-CN.html"
---
-This tutorial doesn't assume any existing React knowledge.
+Für dieses Tutorial benötigst Du keine Vorkenntnisse in React.
-## Before We Start the Tutorial {#before-we-start-the-tutorial}
+## Bevor wir mit dem Tutorial anfangen {#before-we-start-the-tutorial}
-We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React.
+Wir werden im Laufe dieses Tutorials ein kleines Spiel programmieren. ** Vielleicht neigst du dazu, es zu überspringen, weil du keine Spiele programmieren willst -- aber gib ihm doch eine Chance.** Die Techniken, die du in diesem Tutorial lernen wirst, sind notwendig um eine React-App zu erstellen. Wenn du das Tutorial bewältigst, wird dir das ein tiefes Verständnis von React geben.
->Tip
+>Tipp
>
->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other.
+>Dieses Tutorial ist gestaltet für jene, die **learn by doing** bevorzugen. Solltest du es bevorzugen, die Konzepte von Grund auf zu lernen, schau doch in unsere [Schritt für Schritt Anleitung](/docs/hello-world.html). Das Tutorial und die Anleitung ergänzen sich gegenseitig.
-The tutorial is divided into several sections:
+Dieses Tutorial ist in mehrere Abschnitte aufgeteilt:
-* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
-* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
-* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development.
-* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+* Das [Setup für das Tutorial](#setup-for-the-tutorial) gibt dir **einen Ausgangspunkt** um das Tutorial durchzuführen.
+* Die [Übersicht](#overview) bringt dir die **Grundlagen** von React bei: Components, Props und State.
+* [Das Spiel fertigstellen](#completing-the-game) zeigt dir **die am häufigsten vorkommenden Techniken** während der Entwicklung mit React.
+* [Zeitreisen hinzufügen](#adding-time-travel) gibt dir **einen tieferen Einblick** in die einzigartigen Stärken von React.
-You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections.
+Du musst nicht sofort alle Abschnitte abschließen, um einen Mehrwert aus dem Tutorial zu ziehen. Versuche so weit zu kommen, wie du kannst, selbst wenn es nur ein oder zwei Abschnitte sind.
-### What Are We Building? {#what-are-we-building}
+### Was werden wir erstellen? {#what-are-we-building}
-In this tutorial, we'll show how to build an interactive tic-tac-toe game with React.
+In diesem Tutorial werden wir dir zeigen, wie du ein interaktives Tic-Tac-Toe-Spiel mit React erstellen kannst.
-You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+Hier kannst du sehen, was wir erstellen werden: **[Finales Ergebnis](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Sollte der Code keinen Sinn für dich ergeben oder solltest du dich mit der Syntax nicht auskennen, kein Problem! Das Ziel dieses Tutorials ist es, dir zu helfen React und dessen Syntax zu verstehen.
-We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses.
+Wir empfehlen dir, dass du dir das Tic-Tac-Toe-Spiel anschaust, bevor du mit dem Tutorial weitermachst. Eines der Features, die du bemerken wirst, ist, dass sich rechts vom Spielbrett eine nummerierte Liste befindet. Diese Liste zeigt alle getätigten Züge an und wird mit dem Spielfortschritt aktualisiert.
-You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+Du kannst das Tic-Tac-Toe-Spiel schließen, sobald du dich damit vertraut gemacht hast. Wir werden in diesem Tutorial mit einem einfacheren Template beginnen. Im nächsten Schritt helfen wir dir alles einzurichten, damit du anfangen kannst, das Spiel zu erstellen.
-### Prerequisites {#prerequisites}
+### Voraussetzungen {#prerequisites}
-We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.
+Wir nehmen an, dass du bereits ein wenig mit HTML und JavaScript vertraut bist. Selbst wenn du vorher eine andere Sprache erlernt hast, solltest du trotzdem in der Lage sein, folgen zu können. Des Weiteren nehmen wir an, dass dir Programmierkonzepte wie Funktionen, Objekte, Arrays und in geringerem Maße auch Klassen ein Begriff sind.
-If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to.
+Wenn du die Grundlagen von JavaScript noch einmal wiederholen möchtest, empfehlen wir dir [dieses Handbuch](https://developer.mozilla.org/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript) zu lesen. Beachte, dass wir auch Features von ES6 nutzen werden — eine aktuelle Version von JavaScript. In diesem Tutorial verwenden wir unter anderem die sogenannte [arrow-Funktion](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen), [Klassen](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Klassen), [`let`](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/let), und [`const`](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/const) Ausdrücke. Schaue dir [Babel REPL](babel://es5-syntax-example) an, um zu sehen, in was ES6-Code kompiliert wird.
-## Setup for the Tutorial {#setup-for-the-tutorial}
+## Setup für das Tutorial {#setup-for-the-tutorial}
-There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer.
+Es gibt zwei Möglichkeiten, das Tutorial durchzuführen: Entweder du schreibst den Code direkt im Browser oder du richtest dir eine lokale Entwicklungsumgebung ein.
-### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser}
+### Möglichkeit 1: Code direkt im Browser schreiben {#setup-option-1-write-code-in-the-browser}
-This is the quickest way to get started!
+Das ist der schnellste Weg um direkt anfangen zu können!
-First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial.
+Zuerst öffnest du diesen **[Einstiegscode](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in einem neuen Tab. Im neuen Tab solltest du ein leeres Tic-Tac-Toe-Spielbrett und React-Code sehen können. Den React-Code werden wir innerhalb dieses Tutorials bearbeiten.
-You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React.
+Jetzt kannst du die zweite Setup-Option überspringen und direkt zum Abschnitt [Übersicht](#overview) springen, um eine Übersicht über React zu erhalten.
-### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment}
+### Möglichkeit 2: Lokale Entwicklungsumgebung {#setup-option-2-local-development-environment}
-This is completely optional and not required for this tutorial!
+Das ist komplett optional und für dieses Tutorial nicht notwendig!
-Optional: Instructions for following along locally using your preferred text editor
+Optional: Anleitung um lokal in deinem bevorzugten Texteditor mit dem Tutorial weiterzumachen
-This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow:
+Dieses Setup benötigt mehr initialen Aufwand, ermöglicht dir jedoch, das Tutorial in einem Editor deiner Wahl durchzuführen. Folgende Schritte sind dafür notwendig:
-1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed.
-2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project.
+1. Stelle sicher, dass du eine aktuelle Version von [Node.js](https://nodejs.org/de/) installiert hast.
+2. Folge den [Installationsanweisungen für Create React App](/docs/create-a-new-react-app.html#create-react-app) um ein neues Projekt zu erstellen.
```bash
-npx create-react-app my-app
+npx create-react-app meine-app
```
-3. Delete all files in the `src/` folder of the new project
+3. Lösche alle Dateien innerhalb des `src/`-Ordners des neuen Projektes.
-> Note:
+> Hinweis:
>
->**Don't delete the entire `src` folder, just the original source files inside it.** We'll replace the default source files with examples for this project in the next step.
+>**Lösche nicht den gesamten `src`-Ordner sondern lediglich die Dateien innerhalb des Verzeichnisses.** Wir werden die Standard-Quellcode-Dateien im nächsten Schritt mit Beispielen für dieses Projekt ersetzen.
```bash
-cd my-app
+cd meine-app
cd src
-# If you're using a Mac or Linux:
+# Wenn du einen Mac oder Linux benutzt:
rm -f *
-# Or, if you're on Windows:
+# Oder wenn du Windows nutzt:
del *
-# Then, switch back to the project folder
+# Wechsle danach zurück zum Projekt-Verzeichnis
cd ..
```
-4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100).
+4. Füge eine Datei mit dem Namen `index.css` in den `src/`-Ordner mit [diesem CSS-Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100) ein.
-5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010).
+5. Füge eine Datei mit dem Namen `index.js` in den `src/`-Ordner mit [diesem JS-Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010) ein.
-6. Add these three lines to the top of `index.js` in the `src/` folder:
+6. Schreibe diese drei Zeilen an den Anfang von `index.js` im `src/`-Ordner:
```js
import React from 'react';
@@ -110,32 +110,32 @@ import ReactDOM from 'react-dom/client';
import './index.css';
```
-Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field.
+Wenn du jetzt `npm start` in deinem Projektverzeichnis ausführst und dann im Browser `http://localhost:3000` aufrufst, solltest du ein leeres Tic-Tac-Toe-Feld sehen.
-We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor.
+Wir empfehlen dir [diese Anweisungen](https://babeljs.io/docs/editors/) zu befolgen, um Syntax-Highlighting für deinen Editor zu konfigurieren.
-### Help, I'm Stuck! {#help-im-stuck}
+### Hilfe, ich hänge fest! {#help-im-stuck}
-If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/reactiflux) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out.
+Wenn du nicht mehr weiterkommst, schau am besten in die [Community-Support-Ressourcen](/community/support.html). Insbesondere ist der [Reactiflux Chat](https://discord.gg/reactiflux) ein guter Weg um schnell Hilfe zu bekommen. Solltest du keine Antwort bekommen, oder weiterhin festhängen, erstelle ein Issue-Ticket und wir werden dich unterstützen.
-## Overview {#overview}
+## Übersicht {#overview}
-Now that you're set up, let's get an overview of React!
+Da du jetzt alles vorbereitet hast, lass uns erstmal einen Überblick über React bekommen!
-### What Is React? {#what-is-react}
+### Was ist React? {#what-is-react}
-React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components".
+React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek für das Erstellen von Benutzeroberflächen. Es ermöglicht dir, komplexe Oberflächen aus kleinen isolierten Code-Schnipseln, sogenannten "Komponenten" (engl. components), zusammenzustellen.
-React has a few different kinds of components, but we'll start with `React.Component` subclasses:
+React bietet ein paar unterschiedliche Arten von Komponenten an, aber wir beginnen mit den `React.Component` Subklassen:
```javascript
class ShoppingList extends React.Component {
render() {
return (
-
Shopping List for {this.props.name}
+
Shoppingliste für {this.props.name}
Instagram
WhatsApp
@@ -146,51 +146,51 @@ class ShoppingList extends React.Component {
}
}
-// Example usage:
+// Anwendungsbeispiel:
```
-We'll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components.
+Wir kommen bald zu den merkwürdigen XML-ähnlichen Tags. Wir nutzen Komponenten um React mitzuteilen, was wir dargestellt haben wollen. Wenn sich unsere Daten ändern wird React die Komponenten effizient aktualisieren und neu darstellen.
-Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props` (short for "properties"), and returns a hierarchy of views to display via the `render` method.
+In unserem Beispiel ist ShoppingList eine **React Komponenten-Klasse** bzw. ein **React Komponententyp**. Eine Komponente nimmt Parameter, sogenannte `props` (kurz für engl. "properties" - Eigenschaften) entgegen und gibt über die `render`-Methode eine Darstellungs-Hierarchie zurück.
-The `render` method returns a *description* of what you want to see on the screen. React takes the description and displays the result. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called "JSX" which makes these structures easier to write. The `` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to:
+Die `render`-Methode gibt eine *Beschreibung* von dem zurück, was du auf dem Bildschirm sehen willst. React nimmt diese Beschreibung und zeigt das Ergebnis an. Genauergesagt gibt `render` ein **React-Element** zurück, welches eine leichtgewichtige Beschreibung von dem ist, was dargestellt werden soll. Die meisten React-Entwickler nutzen eine spezielle Syntax namens "JSX" welche es leichter macht, solche Strukturen zu schreiben. Die ``-Syntax wird während des Builds in ein `React.createElement('div')` umgewandelt. Das Beispiel oben entspricht:
```javascript
return React.createElement('div', {className: 'shopping-list'},
- React.createElement('h1', /* ... h1 children ... */),
- React.createElement('ul', /* ... ul children ... */)
+ React.createElement('h1', /* ... h1 Kindelemente ... */),
+ React.createElement('ul', /* ... ul Kindelemente ... */)
);
```
-[See full expanded version.](babel://tutorial-expanded-version)
+[Gesamtes Beispiel anzeigen.](babel://tutorial-expanded-version)
-If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it in this tutorial. Instead, we will keep using JSX.
+Wenn du mehr über `createElement()` wissen willst, findest du eine detaillierte Beschreibung in der [API Referenz](/docs/react-api.html#createelement). Jedoch werden wir `createElement()` in diesem Tutorial nicht verwenden. Stattdessen werden wir weiterhin JSX nutzen.
-JSX comes with the full power of JavaScript. You can put *any* JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program.
+JSX hat den vollen Funktionsumfang von JavaScript. Du kannst *jeden* JavaScript-Ausdruck innerhalb von Klammern in JSX benutzen. Jedes React-Element ist ein JavaScript-Objekt, welches in eine Variable gespeichert oder innerhalb des Programms hin- und hergereicht werden kann.
-The `ShoppingList` component above only renders built-in DOM components like `` and ``. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing ``. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components.
+Die `ShoppingList`-Kompontente von oben stellt nur native DOM-Komponenten wie `` und `` dar. Dennoch kannst du auch eigene React-Komponenten zusammenstellen und darstellen. Wir können jetzt zum Beispiel immer auf die Shopping-Liste verweisen indem wir `` schreiben. Jede React-Komponente ist abgekapselt und kann eigenständig operieren; das erlaubt dir, komplexe Benutzeroberflächen aus einfachen Komponenten zu kreieren.
-### Inspecting the Starter Code {#inspecting-the-starter-code}
+### Untersuchen des Einstiegscodes {#inspecting-the-starter-code}
-If you're going to work on the tutorial **in your browser,** open this code in a new tab: **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. If you're going to work on the tutorial **locally,** instead open `src/index.js` in your project folder (you have already touched this file during the [setup](#setup-option-2-local-development-environment)).
+Wenn du an dem Tutorial **in deinem Browser** arbeitest, öffne diesen Code in einem neuen Tab: **[Einstiegscode](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Wenn du **lokal** an dem Tutorial arbeitest, öffne stattdessen `src/index.js` in deinem Projektverzeichnis (du hast diese Datei bereits während des [Setups](#setup-option-2-local-development-environment) angelegt).
-This Starter Code is the base of what we're building. We've provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game.
+Dieser Einstiegscode ist die Grundlage auf der wir aufbauen. Wir haben bereits den CSS-Code vorbereitet, sodass du dich nur auf das Lernen von React und das Programmieren des Tic-Tac-Toe-Spiels fokussieren musst.
-By inspecting the code, you'll notice that we have three React components:
+Beim Betrachten des Codes wirst du feststellen, dass wir drei React-Kompontenten haben:
-* Square
-* Board
-* Game
+* Square (Quadrat)
+* Board (Spielbrett)
+* Game (Spiel)
-The Square component renders a single `