diff --git a/README.md b/README.md index 966131db5..9a1ed59fe 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# react.dev +# de.react.dev -This repo contains the source code and documentation powering [react.dev](https://react.dev/). +This repo contains the source code and documentation powering [de.react.dev](https://de.react.dev/). ## Getting started @@ -10,7 +10,7 @@ This repo contains the source code and documentation powering [react.dev](https: 1. Node: any 12.x version starting with v12.0.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) -1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine +1. A clone of the [de.react.dev repo](https://github.com/reactjs/de.react.dev) on your local machine ### Installation @@ -51,7 +51,7 @@ The documentation is divided into several sections with a different tone and pur 1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes 1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches. +1. Go to the [de,react.dev repo](https://github.com/reactjs/de,react.dev) and you should see recently pushed branches. 1. Follow GitHub's instructions. 1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub. @@ -60,4 +60,4 @@ The documentation is divided into several sections with a different tone and pur If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135). ## License -Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. +Content submitted to [de.react.dev](https://de.react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. diff --git a/examples/conditional-rendering/conditional-rendering.js b/examples/conditional-rendering/conditional-rendering.js new file mode 100644 index 000000000..095c59b15 --- /dev/null +++ b/examples/conditional-rendering/conditional-rendering.js @@ -0,0 +1,21 @@ +function UserGreeting(props) { + return

Willkommen zurück!

; +} + +function GuestGreeting(props) { + return

Bitte melde dich an.

; +} + +function Greeting(props) { + const isLoggedIn = props.isLoggedIn; + if (isLoggedIn) { + return ; + } + return ; +} + +ReactDOM.render( + // Probiere mal isLoggedIn={true} aus: + , + document.getElementById('root') +); diff --git a/examples/conditional-rendering/element-variable.js b/examples/conditional-rendering/element-variable.js new file mode 100644 index 000000000..6b01fd699 --- /dev/null +++ b/examples/conditional-rendering/element-variable.js @@ -0,0 +1,71 @@ +class LoginControl extends React.Component { + constructor(props) { + super(props); + this.handleLoginClick = this.handleLoginClick.bind( + this + ); + this.handleLogoutClick = this.handleLogoutClick.bind( + this + ); + this.state = {isLoggedIn: false}; + } + + handleLoginClick() { + this.setState({isLoggedIn: true}); + } + + handleLogoutClick() { + this.setState({isLoggedIn: false}); + } + + render() { + const isLoggedIn = this.state.isLoggedIn; + let button; + + if (isLoggedIn) { + button = ( + + ); + } else { + button = ( + + ); + } + + return ( +
+ + {button} +
+ ); + } +} + +function UserGreeting(props) { + return

Willkommen zurück!

; +} + +function GuestGreeting(props) { + return

Bitte melde dich an.

; +} + +function Greeting(props) { + const isLoggedIn = props.isLoggedIn; + if (isLoggedIn) { + return ; + } + return ; +} + +function LoginButton(props) { + return ; +} + +function LogoutButton(props) { + return ; +} + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/examples/conditional-rendering/inline-if-else-with-logical-operator.js b/examples/conditional-rendering/inline-if-else-with-logical-operator.js new file mode 100644 index 000000000..b70680daf --- /dev/null +++ b/examples/conditional-rendering/inline-if-else-with-logical-operator.js @@ -0,0 +1,20 @@ +function Mailbox(props) { + const unreadMessages = props.unreadMessages; + return ( +
+

Hallo!

+ {unreadMessages.length > 0 && ( +

+ Du hast {unreadMessages.length} ungelesene + Nachrichten. +

+ )} +
+ ); +} + +const messages = ['React', 'Re: React', 'Re:Re: React']; +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/examples/conditional-rendering/preventing-component-rendering.js b/examples/conditional-rendering/preventing-component-rendering.js new file mode 100644 index 000000000..f5b18599c --- /dev/null +++ b/examples/conditional-rendering/preventing-component-rendering.js @@ -0,0 +1,38 @@ +function WarningBanner(props) { + if (!props.warn) { + return null; + } + + return
Warnung!
; +} + +class Page extends React.Component { + constructor(props) { + super(props); + this.state = {showWarning: true}; + this.handleToggleClick = this.handleToggleClick.bind( + this + ); + } + + handleToggleClick() { + this.setState(state => ({ + showWarning: !state.showWarning, + })); + } + + render() { + return ( +
+ + +
+ ); + } +} + +ReactDOM.render(, document.getElementById('root')); diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 72ab36884..d8be50f1b 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -136,7 +136,7 @@ export function HomeContent() { React

- The library for web and native user interfaces + Die Bibliothek für webbasierte und native Benutzeroberflächen

- Learn React + label="Lerne React"> + Lerne React - API Reference + label="API-Referenz"> + API-Referenz
diff --git a/src/components/Layout/Sidebar/SidebarButton.tsx b/src/components/Layout/Sidebar/SidebarButton.tsx index dc1f29a8d..7b9f027a8 100644 --- a/src/components/Layout/Sidebar/SidebarButton.tsx +++ b/src/components/Layout/Sidebar/SidebarButton.tsx @@ -31,7 +31,7 @@ export function SidebarButton({ })}> + ); } ``` -Now that you've declared `MyButton`, you can nest it into another component: +Jetzt, da du `MyButton` deklariert hast, kannst du ihn in eine andere Komponente einbetten: ```js {5} export default function MyApp() { return (
-

Welcome to my app

+

Willkommen zu meiner Anwendung

); } ``` -Notice that `` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase. +Beachte, dass `` mit einem Großbuchstaben beginnt. So weißt du, dass es sich um eine React Komponente handelt. React Komponentennamen müssen immer mit einem Großbuchstaben beginnen, während HTML-Tags kleingeschrieben werden müssen. -Have a look at the result: +Schau dir das Ergebnis an: @@ -56,7 +56,7 @@ Have a look at the result: function MyButton() { return ( ); } @@ -64,7 +64,7 @@ function MyButton() { export default function MyApp() { return (
-

Welcome to my app

+

Willkommen zu meiner Anwendung

); @@ -73,49 +73,49 @@ export default function MyApp() { -The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references. +Das `export default` Schlüsselwort gibt die Hauptkomponente in der Datei an. Wenn du mit einer bestimmten JavaScript-Syntax nicht vertraut bist, haben [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) und [javascript.info](https://javascript.info/import-export) tolle Referenzen. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## JSX Markup schreiben {/*jsx-markup-schreiben*/} -The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box. +Die Markup Syntax die du oben gesehen hast, wird *JSX* genannt. Sie ist optional, aber die meisten React Projekte verwenden JSX wegen seiner Bequemlichkeit. Alle [Tools, die wir für die lokale Entwicklung empfehlen](/learn/installation) unterstützen JSX von Haus aus. -JSX is stricter than HTML. You have to close tags like `
`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `
...
` or an empty `<>...` wrapper: +JSX ist strenger als HTML. Du musst Tags wie `
` schließen. Deine Komponente kann auch nicht mehrere JSX-Tags zurückgeben. Du musst sie in einen gemeinsamen Eltern-Tag wie `
...
` oder einen leeren `<>...` Wrapper einwickeln: ```js {3,6} function AboutPage() { return ( <> -

About

-

Hello there.
How do you do?

+

Über uns

+

Hallo zusammen.
Wie geht es euch?

); } ``` -If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx) +Wenn du viel HTML zu JSX umwandeln musst, kannst du einen [Online Konverter](https://transform.tools/html-to-jsx) verwenden. -## Adding styles {/*adding-styles*/} +## Styles hinzufügen {/*styles-hinzufügen*/} -In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute: +In React gibst du eine CSS-Klasse mit `className` an. Es funktioniert genauso wie das HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) Attribut: ```js ``` -Then you write the CSS rules for it in a separate CSS file: +Dann schreibst du die CSS Regeln in eine separate CSS Datei: ```css -/* In your CSS */ +/* In deiner CSS Datei */ .avatar { border-radius: 50%; } ``` -React does not prescribe how you add CSS files. In the simplest case, you'll add a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project. +React schreibt dir nicht vor, wie du deine CSS Dateien hinzufügst. Im einfachsten Fall fügst du ein [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) Tag zu deinem HTML hinzu. Wenn du ein Build-Tool oder ein Framework verwendest, schau dir dessen Dokumentation an, um zu erfahren, wie du eine CSS Datei zu deinem Projekt hinzufügst. -## Displaying data {/*displaying-data*/} +## Daten anzeigen {/*daten-anzeigen*/} -JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`: +Mit JSX kannst du deinem JavaScript Markup hinzufügen. Geschweifte Klammern lassen dich zu JavaScript "zurückkehren", so dass du eine Variable aus deinem Code einbetten und sie dem Benutzer anzeigen kannst. Zum Beispiel wird `user.name` angezeigt: ```js {3} return ( @@ -125,7 +125,7 @@ return ( ); ``` -You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute: +Du kannst auch von JSX Attributen zu JavaScript "zurückkehren", aber du musst geschweifte Klammern *anstatt von* Anführungszeichen verwenden. Zum Beispiel übergibt `className="avatar"` den String `"avatar"` als CSS Klasse, aber `src={user.imageUrl}` liest die JavaScript Variable `user.imageUrl` aus und übergibt dann diesen Wert als `src` Attribut: ```js {3,4} return ( @@ -136,7 +136,7 @@ return ( ); ``` -You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary): +Du kannst auch komplexere Ausdrücke innerhalb von JSX geschweiften Klammern verwenden, zum Beispiel [String Konkatenation](https://javascript.info/operators#string-concatenation-with-binary): @@ -154,7 +154,7 @@ export default function Profile() { {'Photo -In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables. +`style={{}}` im obigen Beispiel ist keine spezielle Syntax, sondern ein reguläres `{}` Objekt innerhalb der `style={ }` JSX geschweiften Klammern. Du kannst das `style` Attribut verwenden, wenn deine Styles von JavaScript Variablen abhängen. +## Bedingtes Rendern {/*bedingtes-renden*/} -## Conditional rendering {/*conditional-rendering*/} - -In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX: +In React gibt es keine spezielle Syntax um Bedingungen zu schreiben. Stattdessen verwendest du die gleichen Techniken wie beim Schreiben von regulärem JavaScript Code. Zum Beispiel kannst du eine [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) Anweisung verwenden, um JSX bedingt zu rendern: ```js let content; -if (isLoggedIn) { +if (isLogged) { content = ; } else { content = ; @@ -197,11 +196,11 @@ return ( ); ``` -If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX: +Wenn du kompakteren Code bevorzugst, kannst du den [Ternary `?` Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) verwenden. Im Gegensatz zu `if` funktioniert er auch innerhalb von JSX: ```js
- {isLoggedIn ? ( + {isLogged ? ( ) : ( @@ -209,31 +208,31 @@ If you prefer more compact code, you can use the [conditional `?` operator.](htt
``` -When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): +Wenn du den `else` Zweig nicht brauchst, kannst du auch eine kürzere [logische `&&` Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation) verwenden: ```js
- {isLoggedIn && } + {isLogged && }
``` -All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`. +Die selben Ansätze funktionieren auch, wenn du Attribute bedingt verwenden möchtest. Wenn du mit dieser JavaScript Syntax nicht vertraut bist, kannst du damit beginnen, immer `if...else` zu verwenden. -## Rendering lists {/*rendering-lists*/} +## Listen rendern {/*listen-rendern*/} -You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components. +Um Listen von Komponenten zu rendern, kannst du eine [`for` Schleife](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) oder die [Array `map()` Funktion](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) verwenden. -For example, let's say you have an array of products: +Nehmen wir an, dass du ein Array von Produkten hast: ```js const products = [ - { title: 'Cabbage', id: 1 }, - { title: 'Garlic', id: 2 }, - { title: 'Apple', id: 3 }, + { title: 'Kohl', id: 1 }, + { title: 'Knoblauch', id: 2 }, + { title: 'Apfel', id: 3 }, ]; ``` -Inside your component, use the `map()` function to transform an array of products into an array of `
  • ` items: +Nutze die `map()` Funktion, um ein Array von Produkten in ein Array von `
  • ` Elementen zu transformieren: ```js const listItems = products.map(product => @@ -247,15 +246,15 @@ return ( ); ``` -Notice how `
  • ` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items. +Beachte, wie jedes `
  • ` ein `key` Attribut hat. Für jedes Element in einer Liste solltest du einen String oder eine Zahl übergeben, das dieses Element eindeutig unter seinen Geschwister Elementen identifiziert. Normalerweise sollte ein key aus deinen Daten stammen, wie z.B. eine Datenbank ID. React verwendet deine keys, um zu wissen, was passiert ist, wenn du später Elemente einfügst, löschst oder neu anordnest. ```js const products = [ - { title: 'Cabbage', isFruit: false, id: 1 }, - { title: 'Garlic', isFruit: false, id: 2 }, - { title: 'Apple', isFruit: true, id: 3 }, + { title: 'Kohl', isFruit: false, id: 1 }, + { title: 'Knoblauch', isFruit: false, id: 2 }, + { title: 'Apfel', isFruit: true, id: 3 }, ]; export default function ShoppingList() { @@ -278,37 +277,37 @@ export default function ShoppingList() { -## Responding to events {/*responding-to-events*/} +## Auf Ereignisse reagieren {/*auf-ereignisse-reagieren*/} -You can respond to events by declaring *event handler* functions inside your components: +Du kannst auf Ereignisse reagieren, indem du *event handler* Funktionen innerhalb deiner Komponenten deklarierst: ```js {2-4,7} function MyButton() { function handleClick() { - alert('You clicked me!'); + alert('Du hast mich gedrückt!'); } return ( ); } ``` -Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button. +Beachte, wie `onClick={handleClick}` keine Klammern am Ende hat! Rufe die Event Handler Funktion nicht auf: du musst sie nur *übergeben*. React wird deinen Event Handler aufrufen, wenn der Benutzer auf den Button klickt. -## Updating the screen {/*updating-the-screen*/} +## Anzeige aktualisieren {/*anzeige-aktualisieren*/} -Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component. +Oft möchtest du, dass deine Komponente sich an Informationen erinnert und sie anzeigt. Zum Beispiel möchtest du vielleicht die Anzahl der Klicks auf einen Button zählen. Um dies zu tun, füge *state* zu deiner Komponente hinzu. -First, import [`useState`](/reference/react/useState) from React: +Als Erstes musst du [`useState`](/reference/react/useState) aus React importieren: ```js import { useState } from 'react'; ``` -Now you can declare a *state variable* inside your component: +Jetzt kannst du eine *state Variable* innerhalb deiner Komponente deklarieren: ```js function MyButton() { @@ -316,9 +315,9 @@ function MyButton() { // ... ``` -You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`. +Du bekommst zwei Dinge von `useState`: den aktuellen state (`count`) und die Funktion, die es dir ermöglicht, ihn zu aktualisieren (`setCount`). Du kannst den beiden Dingen beliebige Namen geben, aber die Konvention ist es, `[something, setSomething]` zu schreiben. -The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter: +Wenn der Button das erste Mal angezeigt wird, wird `count` `0` sein, weil du `0` an `useState()` übergeben hast. Wenn du den state ändern möchtest, rufe `setCount()` auf und übergebe den neuen Wert. Wenn du auf diesen Button klickst, wird der Zähler erhöht: ```js {5} function MyButton() { @@ -330,15 +329,15 @@ function MyButton() { return ( ); } ``` -React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on. +React wird deine Komponenten Funktion erneut aufrufen. Dieses Mal wird `count` `1` sein. Danach wird es `2` sein. Und so weiter. -If you render the same component multiple times, each will get its own state. Click each button separately: +Wenn du die selbe Komponente mehrmals renderst, wird jede ihren eigenen state haben. Klicke jeden Button einzeln: @@ -348,7 +347,7 @@ import { useState } from 'react'; export default function MyApp() { return (
    -

    Counters that update separately

    +

    Counter, die seperaten state haben

    @@ -364,7 +363,7 @@ function MyButton() { return ( ); } @@ -379,59 +378,59 @@ button {     -Notice how each button "remembers" its own `count` state and doesn't affect other buttons. +Beachte, wie jeder Button sich seinen eigenen `count` state "merkt" und andere Buttons nicht beeinflusst. -## Using Hooks {/*using-hooks*/} +## Hooks benutzen {/*hooks-benutzen*/} -Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [API reference.](/reference/react) You can also write your own Hooks by combining the existing ones. +Funktionen die mit `use` beginnen, werden *Hooks* genannt. `useState` ist ein eingebauter Hook, der von React bereitgestellt wird. Du kannst andere eingebaute Hooks in der [API Referenz](/reference/react) finden. Du kannst auch deine eigenen Hooks schreiben, indem du die existierenden kombinierst. -Hooks are more restrictive than other functions. You can only call Hooks *at the top* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there. +Hooks sind restriktiver als andere Funktionen. Du kannst Hooks nur *auf höchster Ebene* deiner Komponenten (oder anderen Hooks) aufrufen. Wenn du `useState` in einer Bedingung oder einer Schleife verwenden möchtest, extrahiere eine neue Komponente und platziere sie dort. -## Sharing data between components {/*sharing-data-between-components*/} +## Daten zwischen Komponenten teilen {/*daten-zwischen-komponenten-teilen*/} -In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed: +Im vorherigen Beispiel hatte jedes `MyButton` seinen eigenen unabhängigen `count`, und wenn jeder Button geklickt wurde, änderte sich nur der `count` für den geklickten Button: - + -Initially, each `MyButton`'s `count` state is `0` +Zu Beginn ist der `count` state jeder `MyButton` Komponente `0` - + -The first `MyButton` updates its `count` to `1` +Die erste `MyButton` Komponente aktualisiert ihren `count` auf `1` -However, often you'll need components to *share data and always update together*. +Oft benötigst du jedoch Komponenten, die *Daten teilen und immer zusammen aktualisiert werden*. -To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. +Um beide `MyButton` Komponenten den selben `count` anzeigen zu lassen und zusammen zu aktualisieren, musst du den state von den einzelnen Buttons "nach oben" zur nächsten Komponente, die alle enthält, verschieben. -In this example, it is `MyApp`: +In diesem Beispiel ist es `MyApp`: - + -Initially, `MyApp`'s `count` state is `0` and is passed down to both children +Zu Beginn ist der `count` state jeder `MyButton` Komponente `0` - + -On click, `MyApp` updates its `count` state to `1` and passes it down to both children +Beim Drücken eines Buttons aktualisiert `MyApp` seinen `count` state auf `1` und gibt ihn an beide Kinder weiter -Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. +Wenn du jetzt auf einen der Buttons klickst, wird der `count` in `MyApp` geändert, was beide `MyButton` Komponenten ändert. So kannst du das in Code ausdrücken. -First, *move the state up* from `MyButton` into `MyApp`: +Zuerst *verschiebe den state* von `MyButton` *nach oben* zu `MyApp`: ```js {2-6,18} export default function MyApp() { @@ -443,7 +442,7 @@ export default function MyApp() { return (
    -

    Counters that update separately

    +

    Counter, die sich zusammen ändern

    @@ -451,12 +450,12 @@ export default function MyApp() { } function MyButton() { - // ... we're moving code from here ... + // ... wir verschieben den Code von hier } ``` -Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: +Dann *geben wir den state* von `MyApp` an jedes `MyButton` weiter, zusammen mit dem gemeinsamen click handler. Du kannst Informationen an `MyButton` mit den JSX geschweiften Klammern weitergeben, genau wie du es zuvor mit eingebauten Tags wie `` gemacht hast: ```js {11-12} export default function MyApp() { @@ -468,7 +467,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    Counter, die sich zusammen ändern

    @@ -476,21 +475,21 @@ export default function MyApp() { } ``` -The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons. +Die Informationen, die du so weitergibst, werden *props* genannt. Jetzt enthält die `MyApp` Komponente den `count` state und den `handleClick` Event Handler, und *gibt beide als props* an jeden Button weiter. -Finally, change `MyButton` to *read* the props you have passed from its parent component: +Zuletzt, ändere `MyButton` so um, dass du die props *lesen* kannst, die du von der Parent Komponente übergeben hast: ```js {1,3} function MyButton({ count, onClick }) { return ( ); } ``` -When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components. +Wenn du den Button drückst, wird der `onClick` event handler aufgerufen. Jeder Button hat als `onClick` prop die `handleClick` Funktion von `MyApp`, sodass dieser Code läuft. Dieser Code ruft `setCount(count + 1)` auf und erhöht die `count` state Variable. Der neue `count` Wert wird als prop an jeden Button weitergegeben, sodass sie alle den neuen Wert anzeigen. Dies wird "lifting state up" genannt. Indem du den state nach oben verschiebst, hast du ihn zwischen Komponenten geteilt. @@ -506,7 +505,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    Counter die sich zusammen ändern

    @@ -516,7 +515,7 @@ export default function MyApp() { function MyButton({ count, onClick }) { return ( ); } @@ -533,6 +532,6 @@ button { ## Next Steps {/*next-steps*/} -By now, you know the basics of how to write React code! +Jetzt kennst du die Grundlagen, wie man React Code schreibt! -Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React. +Schau dir das [Tutorial](/learn/tutorial-tic-tac-toe) an, um sie in die Praxis umzusetzen und deine erste Mini-App mit React zu bauen. diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index 7251fc31b..f0c254eb6 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -3,23 +3,21 @@ title: Installation --- - -React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started. - +React wurde von Anfang an für eine stufenweise Integration konzipiert. Du kannst React in dem Maße verwenden, wie es für dich passt. Unabhängig davon, ob du einen ersten Eindruck von React gewinnen möchtest, Interaktivität zu einer HTML-Seite hinzufügen oder eine komplexe React-basierte App starten möchtest, dieser Abschnitt wird dir helfen, den Einstieg zu finden. -* [How to start a new React project](/learn/start-a-new-react-project) -* [How to add React to an existing project](/learn/add-react-to-an-existing-project) -* [How to set up your editor](/learn/editor-setup) -* [How to install React Developer Tools](/learn/react-developer-tools) +* [Wie man ein neues React-Projekt startet](/learn/start-a-new-react-project) +* [Wie man React zu einem bestehenden Projekt hinzufügt](/learn/add-react-to-an-existing-project) +* [Wie man seinen Editor einrichtet](/learn/editor-setup) +* [Wie man die React-Entwicklertools installiert](/learn/react-developer-tools) -## Try React {/*try-react*/} +## React ausprobieren {/*try-react*/} -You don't need to install anything to play with React. Try editing this sandbox! +Um React zu testen, musst du nichts installieren. Probiere es einfach in dieser Sandbox aus! @@ -35,23 +33,26 @@ export default function App() { -You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner. +Du kannst den Code direkt editieren oder dazu ein neues Browserfenster öffnen, indem du den "Fork"-Button in der oberen rechten Ecke verwendest. +<<<<<<< HEAD +Die meisten Seiten in der React-Dokumentation haben Sandboxen wie diese. Außerhalb davon gibt es viele Online-Sandboxen, die React unterstützen, zum Beispiel: [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), oder [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) +======= Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN) +>>>>>>> 169d5c1820cd1514429bfac2a923e51dd782d37e -### Try React locally {/*try-react-locally*/} - -To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser! +### Probiere React lokal aus {/*try-react-locally*/} -## Start a new React project {/*start-a-new-react-project*/} +Um React lokal auf dem eigenen Computer auszuprobieren, [lade diese HTML-Seite herunter](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html). Öffne sie sowohl in deinem Code-Editor als auch in deinem Browser. -If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project) +## Starte ein neues Projekt mit React {/*start-a-new-react-project*/} -## Add React to an existing project {/*add-react-to-an-existing-project*/} +Wenn du eine neue Anwendung oder eine Webseite vollständig mit React erstellen willst, dann [starte ein neues Projekt mit React.](/learn/start-a-new-react-project) -If want to try using React in your existing app or a website, [add React to an existing project.](/learn/add-react-to-an-existing-project) +## Füge React zu einem bestehenden Projekt hinzu {/*add-react-to-an-existing-project*/} -## Next steps {/*next-steps*/} +Wenn du React in einer bestehenden Anwendung oder Webseite testen willst, [füge React zu einem bestehenden Projekt hinzu.](/learn/add-react-to-an-existing-project) -Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. +## Nächste Schritte {/*next-steps*/} +Sieh dir den [Schnelleinstieg](/learn) an, um dort eine Tour von den wichtigsten React-Konzepten zu bekommen, den du jeden Tag begegnen wirst. diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6bb..b96f29a7d 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,30 +4,30 @@ title: React Developer Tools -Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems. +Nutze die React Developer Tools, um React [Komponenten](/learn/your-first-component) zu inspizieren, [Parameter](/learn/passing-props-to-a-component) und [Zustand](/learn/state-a-components-memory) zu bearbeiten, und Performance Probleme zu identifizieren. -* How to install React Developer Tools +* Wie man die React Developer Tools installiert -## Browser extension {/*browser-extension*/} +## Browser-Erweiterung {/*browser-extension*/} -The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: +Der leichteste Weg Fehler in einer Webseite, die mit React erstellt wurde, zu beheben ist es die React Developer Tools Browser Erweiterung zu installieren. Sie ist für mehrere beliebte Browser verfügbar: -* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [Für **Chrome** installieren](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [Für **Firefox** installieren](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [Für **Edge** installieren](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels. +Wenn du jetzt eine Webseite besuchst, **die mit React erstellt wurde**, wirst du das _Komponenten_- und _Profiler_ Panel sehen. -![React Developer Tools extension](/images/docs/react-devtools-extension.png) +![React Developer Tools Erweiterung](/images/docs/react-devtools-extension.png) -### Safari and other browsers {/*safari-and-other-browsers*/} -For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package: +### Safari und andere Browser {/*safari-and-other-browsers*/} +Für andere Browser (zum Beispiel Safari), musst du das [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm Paket installieren: ```bash # Yarn yarn global add react-devtools @@ -36,26 +36,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal: +Öffne als Nächstes die Developer-Tools aus dem Terminal: ```bash react-devtools ``` -Then connect your website by adding the following ` ``` -Reload your website in the browser now to view it in developer tools. +Lade deine Webseite jetzt im Browser neu, um die Developer-Tools zu sehen. -![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) +![Eigenständige React Developer Tools](/images/docs/react-devtools-standalone.png) ## Mobile (React Native) {/*mobile-react-native*/} -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +React Developer Tools kann ebenfalls genutzt werden um Apps, die mit [React Native](https://reactnative.dev/) erstellt wurden, zu inspizieren. -The easiest way to use React Developer Tools is to install it globally: +Der leichteste Weg ist React Developer Tools global zu installieren: ```bash # Yarn yarn global add react-devtools @@ -64,13 +64,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal. +Öffne als Nächstes die Developer Tools aus dem Terminal: ```bash react-devtools ``` -It should connect to any local React Native app that's running. +Es sollte sich mit jeder lokal laufenden React Native App verbinden. -> Try reloading the app if developer tools doesn't connect after a few seconds. +> Versuche die App neu zuladen, falls die Developer-Tools sich nicht nach einigen Sekunden verbinden. -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) +[Erfahre mehr über die Fehlerbehebung in React Native](https://reactnative.dev/docs/debugging) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 0f05a0569..a1f5bca1c 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -1,18 +1,18 @@ --- -title: Thinking in React +title: Die React-Denkweise --- -React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called *components*. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through the thought process of building a searchable product data table with React. +React kann die Art und Weise verändern, wie du über die Designs, die du betrachtest, und die Anwendungen, die du erstellst, denkst. Wenn du eine Benutzeroberfläche mit React erstellst, wirst du sie zunächst in Teile zerlegen, die *Komponenten* genannt werden. Dann wirst du die verschiedenen visuellen Zustände für jede ihrer Komponenten beschreiben. Schließlich wirst du ihre Komponenten miteinander verbinden, damit die Daten durch sie fließen. In diesem Tutorial führen wir dich durch den Gedankenprozess der Erstellung einer durchsuchbaren Produktdatentabelle mit React. -## Start with the mockup {/*start-with-the-mockup*/} +## Beginne mit dem Mockup {/*start-with-the-mockup*/} -Imagine that you already have a JSON API and a mockup from a designer. +Stelle dir vor, du hast bereits eine JSON-API und ein Mockup von einem Designer. -The JSON API returns some data that looks like this: +Die JSON-API gibt einige Daten zurück, die wie folgt aussehen: ```json [ @@ -25,25 +25,25 @@ The JSON API returns some data that looks like this: ] ``` -The mockup looks like this: +Das Mockup sieht folgendermaßen aus: -To implement a UI in React, you will usually follow the same five steps. +Um eine Benutzeroberfläche in React zu implementieren, folgst du normalerweise denselben fünf Schritten. -## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/} +## Schritt 1: Zerlege die Benutzeroberfläche in eine Komponentenhierarchie {/*step-1-break-the-ui-into-a-component-hierarchy*/} -Start by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them! +Beginne damit, Kästchen um jede Komponente und Unterkomponente im Mockup zu zeichnen und sie zu benennen. Wenn du mit Designern zusammenarbeitest, haben sie diese Komponenten vielleicht schon in ihrem Designtool benannt. Frage sie! -Depending on your background, you can think about splitting up a design into components in different ways: +Je nach deinem Hintergrund kannst du darüber nachdenken, ein Design auf verschiedene Weisen in Komponenten aufzuteilen: -* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. -* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) -* **Design**--consider how you would organize the design's layers. +* **Programmierung** - Verwende dieselben Techniken, um zu entscheiden, ob du eine neue Funktion oder ein neues Objekt erstellen solltest. Eine dieser Techniken ist das [Single-Responsibility-Prinzip](https://de.wikipedia.org/wiki/Single-Responsibility-Prinzip), d.h. eine Komponente sollte idealerweise nur eine Aufgabe erfüllen. Wenn sie größer wird, sollte sie in kleinere Unterkomponenten zerlegt werden. +* **CSS**--Du solltest überlegen, wofür Klassenselektoren erstellt werden können. (Komponenten sind jedoch etwas weniger granular.) +* **Design**-überlege, wie die Ebenen des Designs organisiert werden können. -If your JSON is well-structured, you'll often find that it naturally maps to the component structure of your UI. That's because UI and data models often have the same information architecture--that is, the same shape. Separate your UI into components, where each component matches one piece of your data model. +Wenn dein JSON gut strukturiert ist, wirst du oft feststellen, dass es sich auf natürliche Weise der Komponentenstruktur deiner Benutzeroberfläche anpasst. Das liegt daran, dass UI- und Datenmodelle oft dieselbe Informationsarchitektur haben, d. h. dieselbe Form. Unterteile die Benutzeroberfläche in Komponenten, wobei jede Komponente einem Teil deines Datenmodells entspricht. -There are five components on this screen: +Auf diesem Bildschirm gibt es fünf Komponenten: @@ -51,19 +51,19 @@ There are five components on this screen: -1. `FilterableProductTable` (grey) contains the entire app. -2. `SearchBar` (blue) receives the user input. -3. `ProductTable` (lavender) displays and filters the list according to the user input. -4. `ProductCategoryRow` (green) displays a heading for each category. -5. `ProductRow` (yellow) displays a row for each product. +1. `FilterableProductTable` (grau) enthält die gesamte Anwendung. +2. `SearchBar` (blau) empfängt die Benutzereingaben. +3. `ProductTable` (lavendel) zeigt die Liste an und filtert sie entsprechend der Benutzereingabe. +4. `ProductCategoryRow` (grün) zeigt eine Überschrift für jede Kategorie an. +5. `ProductRow` (gelb) zeigt eine Zeile für jedes Produkt an. -If you look at `ProductTable` (lavender), you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and you could go either way. For this example, it is a part of `ProductTable` because it appears inside the `ProductTable`'s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own `ProductTableHeader` component. +Wenn du dir `ProductTable` (lavender) ansehen, wirst du feststellen, dass der Tabellenkopf (der die Bezeichnungen "Name" und "Preis" enthält) keine eigene Komponente ist. Dies ist eine Frage der Vorliebe, du kannst so oder so vorgehen. In diesem Beispiel ist sie ein Teil von "ProductTable", weil sie innerhalb der Liste von `ProductTable` erscheint. Wenn diese Kopfzeile jedoch zu komplex wird (z.B. wenn du eine Sortierung hinzufügst), kannst du sie in eine eigene Komponente `ProductTableHeader` verschieben. -Now that you've identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy: +Nachdem du nun die Komponenten im Mockup identifiziert hast, ordnen sie in einer Hierarchie an. Komponenten, die innerhalb einer anderen Komponente im Mockup erscheinen, sollten in der Hierarchie als untergeordnete Komponenten erscheinen: * `FilterableProductTable` * `SearchBar` @@ -71,13 +71,13 @@ Now that you've identified the components in the mockup, arrange them into a hie * `ProductCategoryRow` * `ProductRow` -## Step 2: Build a static version in React {/*step-2-build-a-static-version-in-react*/} +## Schritt 2: Erstellen einer statischen Version in React {/*step-2-build-a-static-version-in-react*/} -Now that you have your component hierarchy, it's time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity... yet! It's often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing. +Nun, da du deine Komponentenhierarchie hast, ist es an der Zeit, deine Anwendung zu implementieren. Der einfachste Ansatz besteht darin, eine Version zu erstellen, die die Benutzeroberfläche aus deinem Datenmodell wiedergibt, ohne Interaktivität hinzuzufügen... noch nicht! Oft ist es einfacher, zuerst die statische Version zu erstellen und die Interaktivität später hinzuzufügen. Die Erstellung einer statischen Version erfordert viel Tipparbeit und kein Nachdenken, aber das Hinzufügen von Interaktivität erfordert viel Nachdenken und nicht viel Tipparbeit. -To build a static version of your app that renders your data model, you'll want to build [components](/learn/your-first-component) that reuse other components and pass data using [props.](/learn/passing-props-to-a-component) Props are a way of passing data from parent to child. (If you're familiar with the concept of [state](/learn/state-a-components-memory), don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.) +Um eine statische Version deiner Anwendung zu erstellen, die dein Datenmodell wiedergibt, solltest du [Komponenten](/learn/your-first-component) erstellen, die andere Komponenten wiederverwenden und Daten mithilfe von [props.](/learn/passing-props-to-a-component) weitergeben. (Wenn du mit dem Konzept von [state](/learn/state-a-components-memory) vertraut bist, verwende für die Erstellung dieser statischen Version überhaupt keinen State. State ist nur für Interaktivität reserviert, d.h. für Daten, die sich mit der Zeit ändern. Da es sich um eine statische Version der Anwendung handelt, brauchst du es nicht). -You can either build "top down" by starting with building the components higher up in the hierarchy (like `FilterableProductTable`) or "bottom up" by working from components lower down (like `ProductRow`). In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up. +Man kann entweder "von oben nach unten" bauen, indem man mit den Komponenten beginnt, die in der Hierarchie weiter oben stehen (wie `FilterableProductTable`), oder "von unten nach oben", indem man mit Komponenten arbeitet, die weiter unten stehen (wie `ProductRow`). Bei einfacheren Beispielen ist es in der Regel einfacher, von oben nach unten vorzugehen, und bei größeren Projekten ist es einfacher, von unten nach oben vorzugehen. @@ -195,93 +195,94 @@ td { -(If this code looks intimidating, go through the [Quick Start](/learn/) first!) +(Wenn dieser Code einschüchternd wirkt, solltest du zuerst den [Schnellstart](/learn/) durchgehen!) -After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree. +Nachdem du deine Komponenten erstellt hast, hast du eine Bibliothek mit wiederverwendbaren Komponenten, die dein Datenmodell darstellen. Da es sich um eine statische App handelt, geben die Komponenten nur JSX zurück. Die Komponente an der Spitze der Hierarchie (`FilterableProductTable`) nimmt dein Datenmodell als Props. Das nennt man _Einweg-Datenfluss_, weil die Daten von der obersten Komponente zu den Komponenten am unteren Ende des Baums fließen. -At this point, you should not be using any state values. That’s for the next step! +Zu diesem Zeitpunkt solltest du noch keine State-Werte verwenden. Das ist für den nächsten Schritt! -## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} +## Schritt 3: Finde die minimale, aber vollständige Darstellung des UI-State {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} -To make the UI interactive, you need to let users change your underlying data model. You will use *state* for this. +Um die Benutzeroberfläche interaktiv zu gestalten, musst du den Benutzern die Möglichkeit geben, das zugrunde liegende Datenmodell zu ändern. Dafür verwendest du den *State*. -Think of state as the minimal set of changing data that your app needs to remember. The most important principle for structuring state is to keep it [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Figure out the absolute minimal representation of the state your application needs and compute everything else on-demand. For example, if you're building a shopping list, you can store the items as an array in state. If you want to also display the number of items in the list, don't store the number of items as another state value--instead, read the length of your array. +Der State ist die minimale Menge an sich ändernden Daten, die sich deine App merken muss. Das wichtigste Prinzip für die Strukturierung des States ist [DRY (Don't Repeat Yourself)] (https://de.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself). Überlege dir die absolut minimale Darstellung des States, den deine Anwendung braucht, und berechne alles andere nach Bedarf. Wenn du zum Beispiel eine Einkaufsliste erstellst, kannst du die Artikel als Array in state speichern. Wenn du auch die Anzahl der Artikel in der Liste anzeigen willst, speicherst du die Anzahl der Artikel nicht als weiteren Statewert, sondern liest die Länge deines Arrays. -Now think of all of the pieces of data in this example application: +Denke jetzt an alle Daten in dieser Beispielanwendung: -1. The original list of products -2. The search text the user has entered -3. The value of the checkbox -4. The filtered list of products +1. Die ursprüngliche Liste der Produkte +2. Der Suchtext, den der Benutzer eingegeben hat +3. Der Wert des Kontrollkästchens +4. Die gefilterte Liste der Produkte -Which of these are state? Identify the ones that are not: +Welche davon sind State? Identifiziere die, die es nicht sind: -* Does it **remain unchanged** over time? If so, it isn't state. -* Is it **passed in from a parent** via props? If so, it isn't state. -* **Can you compute it** based on existing state or props in your component? If so, it *definitely* isn't state! +* Bleiben sie im Laufe der Zeit **unverändert**? Wenn ja, handelt es sich nicht um einen State. +* Wird es **von einem Parent** über Props übergeben? Wenn ja, handelt es sich nicht um einen State. +* **Berechnest du ihn** auf der Grundlage von bestehenden States oder Props in deiner Komponente? Wenn ja, handelt es sich *definitiv* nicht um einen State! -What's left is probably state. +Was noch übrig ist, ist wahrscheinlich ein State. -Let's go through them one by one again: +Gehen wir sie noch einmal der Reihe nach durch: -1. The original list of products is **passed in as props, so it's not state.** -2. The search text seems to be state since it changes over time and can't be computed from anything. -3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything. -4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox. +1. Die ursprüngliche Liste der Produkte wird **als Props übergeben, also ist es kein State**. +2. Der Suchtext scheint ein State zu sein, da er sich im Laufe der Zeit ändert und nicht aus irgendetwas errechnet werden kann. +3. Der Wert des Kontrollkästchens scheint ein State zu sein, da er sich im Laufe der Zeit ändert und nicht aus einem Wert berechnet werden kann. +4. Die gefilterte Produktliste **ist kein State, denn sie kann berechnet werden**, indem man die ursprüngliche Produktliste nimmt und sie nach dem Suchtext und dem Wert des Kontrollkästchens filtert. -This means only the search text and the value of the checkbox are state! Nicely done! +Das bedeutet, dass nur der Suchtext und der Wert des Kontrollkästchens State sind! Sehr gut gemacht! -#### Props vs State {/*props-vs-state*/} +#### Props vs. State {/*props-vs-state*/} -There are two types of "model" data in React: props and state. The two are very different: +Es gibt zwei Arten von "Modell"-Daten in React: props und state. Die beiden sind sehr unterschiedlich: -* [**Props** are like arguments you pass](/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`. -* [**State** is like a component’s memory.](/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state. +* [**Props** sind wie Argumente, die du](/learn/passing-props-to-a-component) an eine Funktion übergibst. Mit ihnen kann eine übergeordnete Komponente Daten an eine untergeordnete Komponente weitergeben und ihr Aussehen anpassen. Zum Beispiel kann ein "Formular" die Eigenschaft "Farbe" an einen "Button" weitergeben. +* [**State** ist so etwas wie das Gedächtnis einer Komponente.](/learn/state-a-components-memory) Mit ihm kann eine Komponente bestimmte Informationen speichern und sie als Reaktion auf Interaktionen ändern. Ein "Button" kann zum Beispiel den State "isHovered" speichern. -Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and *pass it down* to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick! +Props und States sind unterschiedlich, aber sie arbeiten zusammen. Eine übergeordnete Komponente speichert oft einige Informationen als State (damit sie sie ändern kann) und *gibt sie als Props an die untergeordneten Komponenten weiter*. Es ist in Ordnung, wenn dir der Unterschied beim ersten Lesen noch unklar ist. Es braucht ein bisschen Übung, um es wirklich zu verstehen! -## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/} +## Schritt 4: Bestimme, wo dein State leben soll {/*step-4-identify-where-your-state-should-live*/} -After identifying your app’s minimal state data, you need to identify which component is responsible for changing this state, or *owns* the state. Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component. It may not be immediately clear which component should own what state. This can be challenging if you’re new to this concept, but you can figure it out by following these steps! +Nachdem du die minimalen State-Daten deiner App identifiziert hast, musst du herausfinden, welche Komponente für die Änderung dieses States verantwortlich ist oder den State *besitzt*. Denke daran: React verwendet einen einseitigen Datenfluss, bei dem die Daten in der Komponentenhierarchie von der Eltern- zur Kindkomponente weitergegeben werden. Es ist vielleicht nicht sofort klar, welche Komponente für welchen State zuständig ist. Das kann eine Herausforderung sein, wenn du dich mit diesem Konzept nicht auskennst, aber du kannst es herausfinden, wenn du diese Schritte befolgst! -For each piece of state in your application: +Für jeden State in deiner Anwendung: -1. Identify *every* component that renders something based on that state. -2. Find their closest common parent component--a component above them all in the hierarchy. -3. Decide where the state should live: - 1. Often, you can put the state directly into their common parent. - 2. You can also put the state into some component above their common parent. - 3. If you can't find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component. +1. Identifiziere *jede* Komponente, die etwas auf der Grundlage dieses States rendert. +2. Finde die nächstgelegene gemeinsame Elternkomponente - eine Komponente, die in der Hierarchie über allen steht. +3. Entscheide, wo der State gespeichert werden soll: + 1. Oft kannst du den State direkt in die gemeinsame übergeordnete Komponente einfügen. + 2. Du kannst den Staat auch in eine Komponente über dem gemeinsamen Elternteil einfügen. + 3. Wenn du keine Komponente findest, in der es sinnvoll ist, den State zu speichern, erstelle eine neue Komponente, die nur den State enthält, und füge sie irgendwo in der Hierarchie über der gemeinsamen übergeordneten Komponente ein. -In the previous step, you found two pieces of state in this application: the search input text, and the value of the checkbox. In this example, they always appear together, so it makes sense to put them into the same place. +Im vorigen Schritt hast du zwei Zustände in dieser Anwendung gefunden: den Sucheingabetext und den Wert des Kontrollkästchens. Da sie in diesem Beispiel immer zusammen vorkommen, ist es sinnvoll, sie an der gleichen Stelle einzufügen. -Now let's run through our strategy for them: +Gehen wir jetzt unsere Strategie für sie durch: -1. **Identify components that use state:** - * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). - * `SearchBar` needs to display that state (search text and checkbox value). -1. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. -2. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. +1. **Identifiziere Komponenten, die einen State verwenden:** + * Die "Produkttabelle" muss die Produktliste nach diesem State filtern (Suchtext und Wert des Kontrollkästchens). + * Die "SearchBar" muss diesen State anzeigen (Suchtext und Wert des Kontrollkästchens). +1. **Finde ihre gemeinsame übergeordnete Komponente:** Die erste übergeordnete Komponente, die beide Komponenten gemeinsam haben, ist `FilterableProductTable`. +2. **Entscheide, wo der State bleibt**: Wir behalten den Filtertext und die geprüften Statewerte in "FilterableProductTable". -So the state values will live in `FilterableProductTable`. +Die Statewerte werden also in "FilterableProductTable" gespeichert. -Add state to the component with the [`useState()` Hook.](/reference/react/useState) Hooks are special functions that let you "hook into" React. Add two state variables at the top of `FilterableProductTable` and specify their initial state: +Füge der Komponente mit dem [`useState()` Hook](/reference/react/useState) Hooks sind spezielle Funktionen, mit denen du dich in React "einhaken" kannst. Füge zwei Statesvariablen am Anfang von "FilterableProductTable" hinzu und gib ihren Anfangs-State an: ```js function FilterableProductTable({ products }) { const [filterText, setFilterText] = useState(''); - const [inStockOnly, setInStockOnly] = useState(false); + const [inStockOnly, setInStockOnly] = useState(false); +} ``` -Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as props: +Dann übergibst du `filterText` und `inStockOnly` an `ProductTable` und `SearchBar` als Props: ```js
    @@ -295,7 +296,7 @@ Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as p
    ``` -You can start seeing how your application will behave. Edit the `filterText` initial value from `useState('')` to `useState('fruit')` in the sandbox code below. You'll see both the search input text and the table update: +Jetzt kannst du sehen, wie sich deine Anwendung verhalten wird. Ändere den Ausgangswert von "filterText" im Sandbox-Code unten von `useState("")` auf `useState("fruit")`. Du wirst sehen, dass sowohl der Sucheingabetext als auch die Tabelle aktualisiert werden: @@ -437,7 +438,7 @@ td { -Notice that editing the form doesn't work yet. There is a console error in the sandbox above explaining why: +Beachte, dass das Bearbeiten des Formulars noch nicht funktioniert. In der Sandbox oben gibt es einen Konsolenfehler, der erklärt, warum das so ist: @@ -445,7 +446,7 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T -In the sandbox above, `ProductTable` and `SearchBar` read the `filterText` and `inStockOnly` props to render the table, the input, and the checkbox. For example, here is how `SearchBar` populates the input value: +In der obigen Sandbox lesen `ProductTable` und `SearchBar` die Props `filterText` und `inStockOnly`, um die Tabelle, die Eingabe und das Kontrollkästchen darzustellen. So füllt zum Beispiel die "SearchBar" den Eingabewert auf: ```js {1,6} function SearchBar({ filterText, inStockOnly }) { @@ -455,18 +456,19 @@ function SearchBar({ filterText, inStockOnly }) { type="text" value={filterText} placeholder="Search..."/> + + )} ``` -However, you haven't added any code to respond to the user actions like typing yet. This will be your final step. +Du hast jedoch noch keinen Code hinzugefügt, um auf die Benutzeraktionen wie das Tippen zu reagieren. Das wird dein letzter Schritt sein. +## Step 5: Inversen Datenfluss hinzufügen {/*step-5-add-inverse-data-flow*/} -## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/} +Derzeit wird deine App korrekt dargestellt, wenn Props und State in der Hierarchie nach unten fließen. Aber um den State entsprechend der Benutzereingabe zu ändern, musst du den Datenfluss in die andere Richtung unterstützen: Die Formularkomponenten tief in der Hierarchie müssen den State in `FilterableProductTable` aktualisieren. -Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. +React macht diesen Datenfluss explizit, aber er erfordert ein wenig mehr Tipparbeit als die Zwei-Wege-Datenbindung. Wenn du versuchst, das Kästchen im obigen Beispiel einzugeben oder anzukreuzen, wirst du feststellen, dass React deine Eingabe ignoriert. Das ist gewollt. Indem du `` schreibst, hast du festgelegt, dass der "Wert" der Eingabe immer gleich dem "FilterText"-State ist, der von "FilterableProductTable" übergeben wird. Da der "filterText"-State nie gesetzt wird, ändert sich auch die Eingabe nicht. -React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing ``, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes. - -You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by `FilterableProductTable`, so only it can call `setFilterText` and `setInStockOnly`. To let `SearchBar` update the `FilterableProductTable`'s state, you need to pass these functions down to `SearchBar`: +Du möchtest, dass der State immer dann aktualisiert wird, wenn der Benutzer die Eingaben des Formulars ändert, um diese Änderungen widerzuspiegeln. Der State gehört zu `FilterableProductTable`, also kann nur sie `setFilterText` und `setInStockOnly` aufrufen. Damit die `SearchBar` den State der `FilterableProductTable` aktualisieren kann, musst du diese Funktionen an die `SearchBar` weitergeben: ```js {2,3,10,11} function FilterableProductTable({ products }) { @@ -480,9 +482,11 @@ function FilterableProductTable({ products }) { inStockOnly={inStockOnly} onFilterTextChange={setFilterText} onInStockOnlyChange={setInStockOnly} /> + + )} ``` -Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them: +Innerhalb der `SearchBar` kannst du den `onChange`-Event-Handler hinzufügen and set the parent state from them: ```js {4,5,13,19} function SearchBar({ @@ -506,7 +510,7 @@ function SearchBar({ onChange={(e) => onInStockOnlyChange(e.target.checked)} ``` -Now the application fully works! +Jetzt funktioniert die Anwendung vollständig! @@ -656,8 +660,8 @@ td { -You can learn all about handling events and updating state in the [Adding Interactivity](/learn/adding-interactivity) section. +Alles über den Umgang mit Ereignissen und die Aktualisierung des States erfährst du im Abschnitt [Interaktivität hinzufügen](/learn/adding-interactivity). -## Where to go from here {/*where-to-go-from-here*/} +## Wo gehts weiter? {/*where-to-go-from-here*/} -This was a very brief introduction to how to think about building components and applications with React. You can [start a React project](/learn/installation) right now or [dive deeper on all the syntax](/learn/describing-the-ui) used in this tutorial. +Dies war eine sehr kurze Einführung in die Erstellung von Komponenten und Anwendungen mit React. Du kannst [gleich ein React-Projekt starten](/learn/installation) oder [tiefer in den Syntax eintauchen](/learn/describing-the-ui), die in diesem Tutorial verwendet wurde. diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 335fc3556..0d7a7b37c 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -15,7 +15,7 @@ "path": "/learn/tutorial-tic-tac-toe" }, { - "title": "Thinking in React", + "title": "Die React-Denkweise", "path": "/learn/thinking-in-react" } ] @@ -29,7 +29,7 @@ "path": "/learn/start-a-new-react-project" }, { - "title": "Add React to an Existing Project", + "title": "React zu einem bestehenden Projekt hinzufügen", "path": "/learn/add-react-to-an-existing-project" }, { diff --git a/src/siteConfig.js b/src/siteConfig.js index 6d37e10fd..8d38c0933 100644 --- a/src/siteConfig.js +++ b/src/siteConfig.js @@ -6,7 +6,7 @@ exports.siteConfig = { version: '18.3.1', // -------------------------------------- // Translations should replace these lines: - languageCode: 'en', + languageCode: 'de', hasLegacySite: true, isRTL: false, // --------------------------------------