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}