My First Component
+Meine Erste Komponente
-
-
- Components: UI Building Blocks -
- Defining a Component -
- Using a Component +
- Komponenten: UI Bausteine +
- Eine Komponente Definieren +
- Eine Komponente Nutzen
`, and an (abbreviated) table of contents as an ordered list ``. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+Dieses Markup repräsentiert diesen Artikel ``, seine Überschrift ``, und ein (abgekürztes) Inhaltsverzeichnis als eine geordnete Liste ``. Kombiniert mit CSS für das Styling und JavaScript für die Interaktivität, liegt Markup wie dieses hinter jeder Sidebar, jedem Avatar, jedes Modals, jedes Dropdown - jedes Stück UI, das du im Web siehst.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+React lässt dich Markup, CSS, und JavaScript in benutzerdefinierte "Komponenten", **wiederverwendbare UI Elemente für deine Anwendung** kombinieren. Der Code für das Inhaltsverzeichnis, das du oben gesehen hast, könnte in eine ``, ``, etc. verwendet.
+
+Genau wie mit HTML Tags, kannst du Komponenten kombinieren, ordnen und verschachteln um ganze Seiten zu designen. Zum Beispiel ist die Dokumentationsseite, die du gerade liest, aus React Komponenten aufgebaut:
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
```js
@@ -51,16 +52,16 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
```js
-export default function Profile() {
+export default function Profil() {
return (
-And here's how to build a component:
+Und so erstellst du eine Komponente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Schritt 1: Exportiere die Komponente {/*step-1-export-the-component*/}
The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Das `export default` Präfix ist eine [Standard JavaScript Syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nicht spezifisch für React). Es lässt dich die Hauptfunktion in einer Datei markieren, damit du sie später von anderen Dateien importieren kannst. (Mehr über das Importieren in [Importieren und Exportieren von Komponenten](/learn/importing-and-exporting-components)!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Schritt 2: Definiere die Funktion {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Mit `function Profil() { }` definierst du eine JavaScript Funktion mit dem Namen `Profil`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+React Komponenten sind normale JavaScript Funktionen, aber **ihre Namen müssen mit einem Großbuchstaben beginnen** oder sie funktionieren nicht!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Schritt 3: Markup hinzufügen {/*step-3-add-markup*/}
+
+Die Komponente gibt ein `![]()
` Tag mit `src` und `alt` Attributen zurück. `![]()
` ist wie HTML geschrieben, aber unter der Haube handelt es sich eigentlich um JavaScript. Diese Syntax wird [JSX](/learn/writing-markup-with-jsx) genannt und sie erlaubt es dir Markup in JavaScript einzubetten.
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Return Statements können in einer Zeile geschrieben werden, wie in dieser Komponente:
-Return statements can be written all on one line, as in this component:
```js
return 
;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Aber falls nicht dein gesamtes Markup in der gleichen Zeile wie das `return` keyword ist, musst du das Markup in ein Paar Klammern einschließen:
```js
return (
@@ -114,18 +117,18 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Ohne Klammern wird jeglicher Code nach dem `return` [ignoriert](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Eine Komponente nutzen {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Da du nun deine `Profil` Komponente definiert hast, kannst du sie in anderen Komponenten nutzen. Zum Beispiel kannst du eine `Galerie` Komponente exportieren, die mehrere `Profil` Komponenten nutzt:
```js
-function Profile() {
+function Profil() {
return (
- Amazing scientists
- Großartige Wissenschaftlerinnen
+
-### What the browser sees {/*what-the-browser-sees*/}
+### Was der Browser sieht {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Beachte den Unterschied in der Groß- und Kleinschreibung:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` wird klein geschrieben, damit React weiß, dass wir uns auf einen HTML Tag beziehen.
+* `![]()
`. In the end, this is what the browser sees:
+Und `Profil` enthält sogar noch mehr HTML: `![]()
`. Am Ende sieht der Browser das:
```html
- Amazing scientists
+ Großartige Wissenschaftlerinnen
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Verschachteln und Organisieren von Komponenten {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Komponenten sind normale JavaScript Funktionen, also kannst du mehrere Komponenten in der gleicen Datei haben. Das ist praktisch, wenn Komponenten relativ klein sind oder eng miteinander verbunden sind. Falls diese Datei zu voll wird, kannst du `Profil` immer in eine separate Datei verschieben. Du wirst gleich auf [der Seite über das Importieren](/learn/importing-and-exporting-components) lernen wie das geht.
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Weil die `Profil` Komponenten - sogar mehrmals! - innerhalb der `Galerie` Komponente gerendert werden, können wir sagen, dass `Galerie` eine **Übergeordnete Komponente** ist, die jede `Profil` Komponente als "untergeordnete Komponente" rendert. Das ist ein Teil der Magie von React: du kannst eine Komponente einmal definieren und sie dann so oft und an so vielen Stellen nutzen wie du möchtest.
-Components can render other components, but **you must never nest their definitions:**
+Komponten können andere Komponenten rendern, aber **du darfst ihre Definitionen niemals verschachteln:**
```js {2-5}
-export default function Gallery() {
- // 🔴 Never define a component inside another component!
- function Profile() {
+export default function Galerie() {
+ // 🔴 Definiere niemals eine Komponente innerhalb einer anderen!
+ function Profil() {
// ...
}
// ...
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Der Code-Schnipsel oben ist [sehr langsam und verursacht Fehler.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Definiere stattdessen jede Komponente in der obersten Ebene:
```js {5-8}
-export default function Gallery() {
+export default function Galerie() {
// ...
}
-// ✅ Declare components at the top level
-function Profile() {
+// ✅ Definiere Komponenten in der obersten Ebene
+function Profil() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Wenn eine untergeordnete Komponente Daten von einer übergeordneten Komponente benötigt, [übergebe sie als Parameter](/learn/passing-props-to-a-component) anstatt die Definitionen zu verschachteln.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Komponenten bis zum Ende {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Deine React Anwendung startet bei einer "root" Komponente. Normalerweise wird sie automatisch erstellt, wenn du ein neues Projekt startest. Zum Beispiel, wenn du [CodeSandbox](https://codesandbox.io/) nutzt oder das Framework [Next.js](https://nextjs.org/), wird die root Komponente in `pages/index.js` definiert. In diesen Beispielen hast du root Komponenten exportiert.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Die meisten React Anwendungn nutzen Komponenten bis zum Ende. Das bedeutet, dass du nicht nur Komponenten für wiederverwendbare Teile wie Buttons nutzt, sondern auch für größere Teile wie Sidebars, Listen und letztendlich komplette Seiten! Komponenten sind ein praktischer Weg um UI Code und Markup zu organisieren, selbst wenn einige von ihnen nur einmal genutzt werden.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[React basierte frameworks](/learn/start-a-new-react-project) gehen noch einen Schritt weiter. Anstatt eine leere HTML Datei zu nutzen und React "übernehmen" zu lassen, generieren sie *auch* das HTML automatisch aus deinen React Komponenten. Das erlaubt deiner Anwendung etwas Inhalt anzuzeigen bevor der JavaScript Code geladen wird.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Weiterhin nutzen viele Webseiten nur React um [Interaktivität zu bestehenden HTML Seiten hinzuzufügen.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Sie haben viele root Komponenten anstatt einer einzigen für die gesamte Seite. Du kannst so viel - oder so wenig - React nutzen wie du brauchst.
-You've just gotten your first taste of React! Let's recap some key points.
+Du hast gerade deine erste Komponente erstellt! Lass uns nochmal die wichtigsten Punkte zusammenfassen.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React lässt dich Komponenten erstellen, **wiederverwendbare UI Elemente für deine Anwendung.**
+* In einer React Anwendung ist jedes Stück UI eine Komponente.
+* React Komponenten sind normale JavaScript Funktionen, abgesehen davon:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Sie müssen mit einem Großbuchstaben beginnen.
+ 2. Sie geben JSX-Markup zurück
@@ -238,14 +241,14 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Exportiere die Komponente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Dieser Sandkasten funktioniert nicht, weil die root Komponente nicht exportiert ist:
```js
-function Profile() {
+function Profil() {
return (
-Try to fix it yourself before looking at the solution!
+Probiere es selbst zu korrigieren bevor du dir die Lösung ansiehst!
-Add `export default` before the function definition like so:
+Füge `export default` vor der Funktionsdefinition hinzu:
```js
-export default function Profile() {
+export default function Profil() {
return (
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vielleicht fragst du dich, warum es nicht reicht nur `export` zu schreiben. Den Unterschied zwischen `export` und `export default` lernst du in [Importieren und Exportieren von Komponenten.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Korrigiere das return Statement {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Irgendetwas stimmt mit diesem `return` Statement nicht. Kannst du es korrigieren?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Eventuell bekommst du einen "Unexpected token" Fehler während du versuchst das zu korrigieren. In diesem Fall, überprüfe, dass das Semikolon *nach* der schließenden Klammer steht. Ein Semikolon innerhalb von `return ( )` zu lassen wird einen Fehler verursachen.
@@ -304,7 +307,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
```js
-export default function Profile() {
+export default function Profil() {
return
;
}
@@ -318,12 +321,12 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Korrigiere diese Komponente, indem du das return Statement in eine Zeile schreibst:
```js
-export default function Profile() {
+export default function Profil() {
return ;
}
```
@@ -334,12 +337,12 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Oder indem du das zurückgegebene JSX markup in KLaammern einschließt, die direkt nach `return` geöffnet werden:
```js
-export default function Profile() {
+export default function Profil() {
return (
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Finde den Fehler {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Irgendetwas stimmt mit der Deklaration und Nutzung der `Profil` Komponente nicht. Kannst du den Fehler finden? (Versuche dich daran zu erinnern, wie sich React Komponenten von regulären HTML Tags unterscheidet!)
```js
-function profile() {
+function profil() {
return (
- Amazing scientists
- Großartige Wissenschaftler
+
);
}
@@ -393,14 +396,14 @@ img { margin: 0 10px 10px 0; height: 90px; }
-React component names must start with a capital letter.
+React Komponenten müssen mit einem Großbuchstaben beginnen.
-Change `function profile()` to `function Profile()`, and then change every `
```js
-function Profile() {
+function profil() {
return (
- Amazing scientists
- Großartige Wissenschaftler
+
);
}
@@ -429,14 +432,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### Deine eigene Komponente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Schreibe deine eigene Komponente von Grund auf. Du kannst ihr irgendeinen zulässigen Namen geben und irgendwelches Markup zurückgeben. Wenn du keine Idee hast, kannst du eine `Gratulation` Kompontente schreiben, die `Gute Arbeit!
` anzeigt. Vergiss nicht sie zu exportieren!
```js
-// Write your component below!
+// Schreibe deine Komponente hier unten!
```
@@ -447,9 +450,9 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
-export default function Congratulations() {
+export default function Gratulation() {
return (
- Good job!
+ Gute Arbeit!
);
}
```
`, und ein (abgekürztes) Inhaltsverzeichnis als eine geordnete Liste ``. Kombiniert mit CSS für das Styling und JavaScript für die Interaktivität, liegt Markup wie dieses hinter jeder Sidebar, jedem Avatar, jedes Modals, jedes Dropdown - jedes Stück UI, das du im Web siehst.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+React lässt dich Markup, CSS, und JavaScript in benutzerdefinierte "Komponenten", **wiederverwendbare UI Elemente für deine Anwendung** kombinieren. Der Code für das Inhaltsverzeichnis, das du oben gesehen hast, könnte in eine ``, ``, etc. verwendet.
+
+Genau wie mit HTML Tags, kannst du Komponenten kombinieren, ordnen und verschachteln um ganze Seiten zu designen. Zum Beispiel ist die Dokumentationsseite, die du gerade liest, aus React Komponenten aufgebaut:
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
```js
@@ -51,16 +52,16 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
```js
-export default function Profile() {
+export default function Profil() {
return (
-And here's how to build a component:
+Und so erstellst du eine Komponente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Schritt 1: Exportiere die Komponente {/*step-1-export-the-component*/}
The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Das `export default` Präfix ist eine [Standard JavaScript Syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nicht spezifisch für React). Es lässt dich die Hauptfunktion in einer Datei markieren, damit du sie später von anderen Dateien importieren kannst. (Mehr über das Importieren in [Importieren und Exportieren von Komponenten](/learn/importing-and-exporting-components)!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Schritt 2: Definiere die Funktion {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Mit `function Profil() { }` definierst du eine JavaScript Funktion mit dem Namen `Profil`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+React Komponenten sind normale JavaScript Funktionen, aber **ihre Namen müssen mit einem Großbuchstaben beginnen** oder sie funktionieren nicht!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Schritt 3: Markup hinzufügen {/*step-3-add-markup*/}
+
+Die Komponente gibt ein `![]()
` Tag mit `src` und `alt` Attributen zurück. `![]()
` ist wie HTML geschrieben, aber unter der Haube handelt es sich eigentlich um JavaScript. Diese Syntax wird [JSX](/learn/writing-markup-with-jsx) genannt und sie erlaubt es dir Markup in JavaScript einzubetten.
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Return Statements können in einer Zeile geschrieben werden, wie in dieser Komponente:
-Return statements can be written all on one line, as in this component:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Aber falls nicht dein gesamtes Markup in der gleichen Zeile wie das `return` keyword ist, musst du das Markup in ein Paar Klammern einschließen:
```js
return (
@@ -114,18 +117,18 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Ohne Klammern wird jeglicher Code nach dem `return` [ignoriert](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Eine Komponente nutzen {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Da du nun deine `Profil` Komponente definiert hast, kannst du sie in anderen Komponenten nutzen. Zum Beispiel kannst du eine `Galerie` Komponente exportieren, die mehrere `Profil` Komponenten nutzt:
```js
-function Profile() {
+function Profil() {
return (
- Amazing scientists
- Großartige Wissenschaftlerinnen
+
-### What the browser sees {/*what-the-browser-sees*/}
+### Was der Browser sieht {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Beachte den Unterschied in der Groß- und Kleinschreibung:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` wird klein geschrieben, damit React weiß, dass wir uns auf einen HTML Tag beziehen.
+* `![]()
`. In the end, this is what the browser sees:
+Und `Profil` enthält sogar noch mehr HTML: `![]()
`. Am Ende sieht der Browser das:
```html
- Amazing scientists
+ Großartige Wissenschaftlerinnen
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Verschachteln und Organisieren von Komponenten {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Komponenten sind normale JavaScript Funktionen, also kannst du mehrere Komponenten in der gleicen Datei haben. Das ist praktisch, wenn Komponenten relativ klein sind oder eng miteinander verbunden sind. Falls diese Datei zu voll wird, kannst du `Profil` immer in eine separate Datei verschieben. Du wirst gleich auf [der Seite über das Importieren](/learn/importing-and-exporting-components) lernen wie das geht.
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Weil die `Profil` Komponenten - sogar mehrmals! - innerhalb der `Galerie` Komponente gerendert werden, können wir sagen, dass `Galerie` eine **Übergeordnete Komponente** ist, die jede `Profil` Komponente als "untergeordnete Komponente" rendert. Das ist ein Teil der Magie von React: du kannst eine Komponente einmal definieren und sie dann so oft und an so vielen Stellen nutzen wie du möchtest.
-Components can render other components, but **you must never nest their definitions:**
+Komponten können andere Komponenten rendern, aber **du darfst ihre Definitionen niemals verschachteln:**
```js {2-5}
-export default function Gallery() {
- // 🔴 Never define a component inside another component!
- function Profile() {
+export default function Galerie() {
+ // 🔴 Definiere niemals eine Komponente innerhalb einer anderen!
+ function Profil() {
// ...
}
// ...
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Der Code-Schnipsel oben ist [sehr langsam und verursacht Fehler.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Definiere stattdessen jede Komponente in der obersten Ebene:
```js {5-8}
-export default function Gallery() {
+export default function Galerie() {
// ...
}
-// ✅ Declare components at the top level
-function Profile() {
+// ✅ Definiere Komponenten in der obersten Ebene
+function Profil() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Wenn eine untergeordnete Komponente Daten von einer übergeordneten Komponente benötigt, [übergebe sie als Parameter](/learn/passing-props-to-a-component) anstatt die Definitionen zu verschachteln.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Komponenten bis zum Ende {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Deine React Anwendung startet bei einer "root" Komponente. Normalerweise wird sie automatisch erstellt, wenn du ein neues Projekt startest. Zum Beispiel, wenn du [CodeSandbox](https://codesandbox.io/) nutzt oder das Framework [Next.js](https://nextjs.org/), wird die root Komponente in `pages/index.js` definiert. In diesen Beispielen hast du root Komponenten exportiert.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Die meisten React Anwendungn nutzen Komponenten bis zum Ende. Das bedeutet, dass du nicht nur Komponenten für wiederverwendbare Teile wie Buttons nutzt, sondern auch für größere Teile wie Sidebars, Listen und letztendlich komplette Seiten! Komponenten sind ein praktischer Weg um UI Code und Markup zu organisieren, selbst wenn einige von ihnen nur einmal genutzt werden.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[React basierte frameworks](/learn/start-a-new-react-project) gehen noch einen Schritt weiter. Anstatt eine leere HTML Datei zu nutzen und React "übernehmen" zu lassen, generieren sie *auch* das HTML automatisch aus deinen React Komponenten. Das erlaubt deiner Anwendung etwas Inhalt anzuzeigen bevor der JavaScript Code geladen wird.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Weiterhin nutzen viele Webseiten nur React um [Interaktivität zu bestehenden HTML Seiten hinzuzufügen.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Sie haben viele root Komponenten anstatt einer einzigen für die gesamte Seite. Du kannst so viel - oder so wenig - React nutzen wie du brauchst.
-You've just gotten your first taste of React! Let's recap some key points.
+Du hast gerade deine erste Komponente erstellt! Lass uns nochmal die wichtigsten Punkte zusammenfassen.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React lässt dich Komponenten erstellen, **wiederverwendbare UI Elemente für deine Anwendung.**
+* In einer React Anwendung ist jedes Stück UI eine Komponente.
+* React Komponenten sind normale JavaScript Funktionen, abgesehen davon:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Sie müssen mit einem Großbuchstaben beginnen.
+ 2. Sie geben JSX-Markup zurück
@@ -238,14 +241,14 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Exportiere die Komponente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Dieser Sandkasten funktioniert nicht, weil die root Komponente nicht exportiert ist:
```js
-function Profile() {
+function Profil() {
return (
-Try to fix it yourself before looking at the solution!
+Probiere es selbst zu korrigieren bevor du dir die Lösung ansiehst!
-Add `export default` before the function definition like so:
+Füge `export default` vor der Funktionsdefinition hinzu:
```js
-export default function Profile() {
+export default function Profil() {
return (
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vielleicht fragst du dich, warum es nicht reicht nur `export` zu schreiben. Den Unterschied zwischen `export` und `export default` lernst du in [Importieren und Exportieren von Komponenten.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Korrigiere das return Statement {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Irgendetwas stimmt mit diesem `return` Statement nicht. Kannst du es korrigieren?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Eventuell bekommst du einen "Unexpected token" Fehler während du versuchst das zu korrigieren. In diesem Fall, überprüfe, dass das Semikolon *nach* der schließenden Klammer steht. Ein Semikolon innerhalb von `return ( )` zu lassen wird einen Fehler verursachen.
@@ -304,7 +307,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
```js
-export default function Profile() {
+export default function Profil() {
return
;
}
@@ -318,12 +321,12 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Korrigiere diese Komponente, indem du das return Statement in eine Zeile schreibst:
```js
-export default function Profile() {
+export default function Profil() {
return ;
}
```
@@ -334,12 +337,12 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Oder indem du das zurückgegebene JSX markup in KLaammern einschließt, die direkt nach `return` geöffnet werden:
```js
-export default function Profile() {
+export default function Profil() {
return (
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Finde den Fehler {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Irgendetwas stimmt mit der Deklaration und Nutzung der `Profil` Komponente nicht. Kannst du den Fehler finden? (Versuche dich daran zu erinnern, wie sich React Komponenten von regulären HTML Tags unterscheidet!)
```js
-function profile() {
+function profil() {
return (
- Amazing scientists
- Großartige Wissenschaftler
+
);
}
@@ -393,14 +396,14 @@ img { margin: 0 10px 10px 0; height: 90px; }
-React component names must start with a capital letter.
+React Komponenten müssen mit einem Großbuchstaben beginnen.
-Change `function profile()` to `function Profile()`, and then change every `
```js
-function Profile() {
+function profil() {
return (
- Amazing scientists
- Großartige Wissenschaftler
+
);
}
@@ -429,14 +432,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### Deine eigene Komponente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Schreibe deine eigene Komponente von Grund auf. Du kannst ihr irgendeinen zulässigen Namen geben und irgendwelches Markup zurückgeben. Wenn du keine Idee hast, kannst du eine `Gratulation` Kompontente schreiben, die `Gute Arbeit!
` anzeigt. Vergiss nicht sie zu exportieren!
```js
-// Write your component below!
+// Schreibe deine Komponente hier unten!
```
@@ -447,9 +450,9 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
-export default function Congratulations() {
+export default function Gratulation() {
return (
- Good job!
+ Gute Arbeit!
);
}
```
`, etc.
+React lässt dich Markup, CSS, und JavaScript in benutzerdefinierte "Komponenten", **wiederverwendbare UI Elemente für deine Anwendung** kombinieren. Der Code für das Inhaltsverzeichnis, das du oben gesehen hast, könnte in eine ``, ``, etc. verwendet.
+
+Genau wie mit HTML Tags, kannst du Komponenten kombinieren, ordnen und verschachteln um ganze Seiten zu designen. Zum Beispiel ist die Dokumentationsseite, die du gerade liest, aus React Komponenten aufgebaut:
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
```js
@@ -51,16 +52,16 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
```js
-export default function Profile() {
+export default function Profil() {
return (
-And here's how to build a component:
+Und so erstellst du eine Komponente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Schritt 1: Exportiere die Komponente {/*step-1-export-the-component*/}
The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Das `export default` Präfix ist eine [Standard JavaScript Syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nicht spezifisch für React). Es lässt dich die Hauptfunktion in einer Datei markieren, damit du sie später von anderen Dateien importieren kannst. (Mehr über das Importieren in [Importieren und Exportieren von Komponenten](/learn/importing-and-exporting-components)!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Schritt 2: Definiere die Funktion {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Mit `function Profil() { }` definierst du eine JavaScript Funktion mit dem Namen `Profil`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+React Komponenten sind normale JavaScript Funktionen, aber **ihre Namen müssen mit einem Großbuchstaben beginnen** oder sie funktionieren nicht!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Schritt 3: Markup hinzufügen {/*step-3-add-markup*/}
+
+Die Komponente gibt ein `![]()
` Tag mit `src` und `alt` Attributen zurück. `![]()
` ist wie HTML geschrieben, aber unter der Haube handelt es sich eigentlich um JavaScript. Diese Syntax wird [JSX](/learn/writing-markup-with-jsx) genannt und sie erlaubt es dir Markup in JavaScript einzubetten.
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Return Statements können in einer Zeile geschrieben werden, wie in dieser Komponente:
-Return statements can be written all on one line, as in this component:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Aber falls nicht dein gesamtes Markup in der gleichen Zeile wie das `return` keyword ist, musst du das Markup in ein Paar Klammern einschließen:
```js
return (
@@ -114,18 +117,18 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Ohne Klammern wird jeglicher Code nach dem `return` [ignoriert](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Eine Komponente nutzen {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Da du nun deine `Profil` Komponente definiert hast, kannst du sie in anderen Komponenten nutzen. Zum Beispiel kannst du eine `Galerie` Komponente exportieren, die mehrere `Profil` Komponenten nutzt:
```js
-function Profile() {
+function Profil() {
return (
- Amazing scientists
- Großartige Wissenschaftlerinnen
+
-### What the browser sees {/*what-the-browser-sees*/}
+### Was der Browser sieht {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Beachte den Unterschied in der Groß- und Kleinschreibung:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` wird klein geschrieben, damit React weiß, dass wir uns auf einen HTML Tag beziehen.
+* `![]()
`. In the end, this is what the browser sees:
+Und `Profil` enthält sogar noch mehr HTML: `![]()
`. Am Ende sieht der Browser das:
```html
- Amazing scientists
+ Großartige Wissenschaftlerinnen
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Verschachteln und Organisieren von Komponenten {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Komponenten sind normale JavaScript Funktionen, also kannst du mehrere Komponenten in der gleicen Datei haben. Das ist praktisch, wenn Komponenten relativ klein sind oder eng miteinander verbunden sind. Falls diese Datei zu voll wird, kannst du `Profil` immer in eine separate Datei verschieben. Du wirst gleich auf [der Seite über das Importieren](/learn/importing-and-exporting-components) lernen wie das geht.
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Weil die `Profil` Komponenten - sogar mehrmals! - innerhalb der `Galerie` Komponente gerendert werden, können wir sagen, dass `Galerie` eine **Übergeordnete Komponente** ist, die jede `Profil` Komponente als "untergeordnete Komponente" rendert. Das ist ein Teil der Magie von React: du kannst eine Komponente einmal definieren und sie dann so oft und an so vielen Stellen nutzen wie du möchtest.
-Components can render other components, but **you must never nest their definitions:**
+Komponten können andere Komponenten rendern, aber **du darfst ihre Definitionen niemals verschachteln:**
```js {2-5}
-export default function Gallery() {
- // 🔴 Never define a component inside another component!
- function Profile() {
+export default function Galerie() {
+ // 🔴 Definiere niemals eine Komponente innerhalb einer anderen!
+ function Profil() {
// ...
}
// ...
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Der Code-Schnipsel oben ist [sehr langsam und verursacht Fehler.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Definiere stattdessen jede Komponente in der obersten Ebene:
```js {5-8}
-export default function Gallery() {
+export default function Galerie() {
// ...
}
-// ✅ Declare components at the top level
-function Profile() {
+// ✅ Definiere Komponenten in der obersten Ebene
+function Profil() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Wenn eine untergeordnete Komponente Daten von einer übergeordneten Komponente benötigt, [übergebe sie als Parameter](/learn/passing-props-to-a-component) anstatt die Definitionen zu verschachteln.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Komponenten bis zum Ende {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Deine React Anwendung startet bei einer "root" Komponente. Normalerweise wird sie automatisch erstellt, wenn du ein neues Projekt startest. Zum Beispiel, wenn du [CodeSandbox](https://codesandbox.io/) nutzt oder das Framework [Next.js](https://nextjs.org/), wird die root Komponente in `pages/index.js` definiert. In diesen Beispielen hast du root Komponenten exportiert.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Die meisten React Anwendungn nutzen Komponenten bis zum Ende. Das bedeutet, dass du nicht nur Komponenten für wiederverwendbare Teile wie Buttons nutzt, sondern auch für größere Teile wie Sidebars, Listen und letztendlich komplette Seiten! Komponenten sind ein praktischer Weg um UI Code und Markup zu organisieren, selbst wenn einige von ihnen nur einmal genutzt werden.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[React basierte frameworks](/learn/start-a-new-react-project) gehen noch einen Schritt weiter. Anstatt eine leere HTML Datei zu nutzen und React "übernehmen" zu lassen, generieren sie *auch* das HTML automatisch aus deinen React Komponenten. Das erlaubt deiner Anwendung etwas Inhalt anzuzeigen bevor der JavaScript Code geladen wird.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Weiterhin nutzen viele Webseiten nur React um [Interaktivität zu bestehenden HTML Seiten hinzuzufügen.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Sie haben viele root Komponenten anstatt einer einzigen für die gesamte Seite. Du kannst so viel - oder so wenig - React nutzen wie du brauchst.
-You've just gotten your first taste of React! Let's recap some key points.
+Du hast gerade deine erste Komponente erstellt! Lass uns nochmal die wichtigsten Punkte zusammenfassen.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React lässt dich Komponenten erstellen, **wiederverwendbare UI Elemente für deine Anwendung.**
+* In einer React Anwendung ist jedes Stück UI eine Komponente.
+* React Komponenten sind normale JavaScript Funktionen, abgesehen davon:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Sie müssen mit einem Großbuchstaben beginnen.
+ 2. Sie geben JSX-Markup zurück
@@ -238,14 +241,14 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Exportiere die Komponente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Dieser Sandkasten funktioniert nicht, weil die root Komponente nicht exportiert ist:
```js
-function Profile() {
+function Profil() {
return (
-Try to fix it yourself before looking at the solution!
+Probiere es selbst zu korrigieren bevor du dir die Lösung ansiehst!
-Add `export default` before the function definition like so:
+Füge `export default` vor der Funktionsdefinition hinzu:
```js
-export default function Profile() {
+export default function Profil() {
return (
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vielleicht fragst du dich, warum es nicht reicht nur `export` zu schreiben. Den Unterschied zwischen `export` und `export default` lernst du in [Importieren und Exportieren von Komponenten.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Korrigiere das return Statement {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Irgendetwas stimmt mit diesem `return` Statement nicht. Kannst du es korrigieren?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Eventuell bekommst du einen "Unexpected token" Fehler während du versuchst das zu korrigieren. In diesem Fall, überprüfe, dass das Semikolon *nach* der schließenden Klammer steht. Ein Semikolon innerhalb von `return ( )` zu lassen wird einen Fehler verursachen.
@@ -304,7 +307,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
```js
-export default function Profile() {
+export default function Profil() {
return
;
}
@@ -318,12 +321,12 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Korrigiere diese Komponente, indem du das return Statement in eine Zeile schreibst:
```js
-export default function Profile() {
+export default function Profil() {
return ;
}
```
@@ -334,12 +337,12 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Oder indem du das zurückgegebene JSX markup in KLaammern einschließt, die direkt nach `return` geöffnet werden:
```js
-export default function Profile() {
+export default function Profil() {
return (
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Finde den Fehler {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Irgendetwas stimmt mit der Deklaration und Nutzung der `Profil` Komponente nicht. Kannst du den Fehler finden? (Versuche dich daran zu erinnern, wie sich React Komponenten von regulären HTML Tags unterscheidet!)
```js
-function profile() {
+function profil() {
return (
- Amazing scientists
- Großartige Wissenschaftler
+
);
}
@@ -393,14 +396,14 @@ img { margin: 0 10px 10px 0; height: 90px; }
-React component names must start with a capital letter.
+React Komponenten müssen mit einem Großbuchstaben beginnen.
-Change `function profile()` to `function Profile()`, and then change every `
```js
-function Profile() {
+function profil() {
return (
- Amazing scientists
- Großartige Wissenschaftler
+
);
}
@@ -429,14 +432,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### Deine eigene Komponente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Schreibe deine eigene Komponente von Grund auf. Du kannst ihr irgendeinen zulässigen Namen geben und irgendwelches Markup zurückgeben. Wenn du keine Idee hast, kannst du eine `Gratulation` Kompontente schreiben, die `Gute Arbeit!
` anzeigt. Vergiss nicht sie zu exportieren!
```js
-// Write your component below!
+// Schreibe deine Komponente hier unten!
```
@@ -447,9 +450,9 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
-export default function Congratulations() {
+export default function Gratulation() {
return (
- Good job!
+ Gute Arbeit!
);
}
```
`, etc. verwendet.
+
+Genau wie mit HTML Tags, kannst du Komponenten kombinieren, ordnen und verschachteln um ganze Seiten zu designen. Zum Beispiel ist die Dokumentationsseite, die du gerade liest, aus React Komponenten aufgebaut:
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
```js
@@ -51,16 +52,16 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
```js
-export default function Profile() {
+export default function Profil() {
return (
-And here's how to build a component:
+Und so erstellst du eine Komponente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Schritt 1: Exportiere die Komponente {/*step-1-export-the-component*/}
The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Das `export default` Präfix ist eine [Standard JavaScript Syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nicht spezifisch für React). Es lässt dich die Hauptfunktion in einer Datei markieren, damit du sie später von anderen Dateien importieren kannst. (Mehr über das Importieren in [Importieren und Exportieren von Komponenten](/learn/importing-and-exporting-components)!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Schritt 2: Definiere die Funktion {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Mit `function Profil() { }` definierst du eine JavaScript Funktion mit dem Namen `Profil`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+React Komponenten sind normale JavaScript Funktionen, aber **ihre Namen müssen mit einem Großbuchstaben beginnen** oder sie funktionieren nicht!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Schritt 3: Markup hinzufügen {/*step-3-add-markup*/}
+
+Die Komponente gibt ein `![]()
` Tag mit `src` und `alt` Attributen zurück. `![]()
` ist wie HTML geschrieben, aber unter der Haube handelt es sich eigentlich um JavaScript. Diese Syntax wird [JSX](/learn/writing-markup-with-jsx) genannt und sie erlaubt es dir Markup in JavaScript einzubetten.
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Return Statements können in einer Zeile geschrieben werden, wie in dieser Komponente:
-Return statements can be written all on one line, as in this component:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Aber falls nicht dein gesamtes Markup in der gleichen Zeile wie das `return` keyword ist, musst du das Markup in ein Paar Klammern einschließen:
```js
return (
@@ -114,18 +117,18 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Ohne Klammern wird jeglicher Code nach dem `return` [ignoriert](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Eine Komponente nutzen {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Da du nun deine `Profil` Komponente definiert hast, kannst du sie in anderen Komponenten nutzen. Zum Beispiel kannst du eine `Galerie` Komponente exportieren, die mehrere `Profil` Komponenten nutzt:
```js
-function Profile() {
+function Profil() {
return (
- Amazing scientists
- Großartige Wissenschaftlerinnen
+
-### What the browser sees {/*what-the-browser-sees*/}
+### Was der Browser sieht {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Beachte den Unterschied in der Groß- und Kleinschreibung:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` wird klein geschrieben, damit React weiß, dass wir uns auf einen HTML Tag beziehen.
+* `![]()
`. In the end, this is what the browser sees:
+Und `Profil` enthält sogar noch mehr HTML: `![]()
`. Am Ende sieht der Browser das:
```html
- Amazing scientists
+ Großartige Wissenschaftlerinnen
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Verschachteln und Organisieren von Komponenten {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Komponenten sind normale JavaScript Funktionen, also kannst du mehrere Komponenten in der gleicen Datei haben. Das ist praktisch, wenn Komponenten relativ klein sind oder eng miteinander verbunden sind. Falls diese Datei zu voll wird, kannst du `Profil` immer in eine separate Datei verschieben. Du wirst gleich auf [der Seite über das Importieren](/learn/importing-and-exporting-components) lernen wie das geht.
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Weil die `Profil` Komponenten - sogar mehrmals! - innerhalb der `Galerie` Komponente gerendert werden, können wir sagen, dass `Galerie` eine **Übergeordnete Komponente** ist, die jede `Profil` Komponente als "untergeordnete Komponente" rendert. Das ist ein Teil der Magie von React: du kannst eine Komponente einmal definieren und sie dann so oft und an so vielen Stellen nutzen wie du möchtest.
-Components can render other components, but **you must never nest their definitions:**
+Komponten können andere Komponenten rendern, aber **du darfst ihre Definitionen niemals verschachteln:**
```js {2-5}
-export default function Gallery() {
- // 🔴 Never define a component inside another component!
- function Profile() {
+export default function Galerie() {
+ // 🔴 Definiere niemals eine Komponente innerhalb einer anderen!
+ function Profil() {
// ...
}
// ...
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Der Code-Schnipsel oben ist [sehr langsam und verursacht Fehler.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Definiere stattdessen jede Komponente in der obersten Ebene:
```js {5-8}
-export default function Gallery() {
+export default function Galerie() {
// ...
}
-// ✅ Declare components at the top level
-function Profile() {
+// ✅ Definiere Komponenten in der obersten Ebene
+function Profil() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Wenn eine untergeordnete Komponente Daten von einer übergeordneten Komponente benötigt, [übergebe sie als Parameter](/learn/passing-props-to-a-component) anstatt die Definitionen zu verschachteln.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Komponenten bis zum Ende {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Deine React Anwendung startet bei einer "root" Komponente. Normalerweise wird sie automatisch erstellt, wenn du ein neues Projekt startest. Zum Beispiel, wenn du [CodeSandbox](https://codesandbox.io/) nutzt oder das Framework [Next.js](https://nextjs.org/), wird die root Komponente in `pages/index.js` definiert. In diesen Beispielen hast du root Komponenten exportiert.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Die meisten React Anwendungn nutzen Komponenten bis zum Ende. Das bedeutet, dass du nicht nur Komponenten für wiederverwendbare Teile wie Buttons nutzt, sondern auch für größere Teile wie Sidebars, Listen und letztendlich komplette Seiten! Komponenten sind ein praktischer Weg um UI Code und Markup zu organisieren, selbst wenn einige von ihnen nur einmal genutzt werden.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[React basierte frameworks](/learn/start-a-new-react-project) gehen noch einen Schritt weiter. Anstatt eine leere HTML Datei zu nutzen und React "übernehmen" zu lassen, generieren sie *auch* das HTML automatisch aus deinen React Komponenten. Das erlaubt deiner Anwendung etwas Inhalt anzuzeigen bevor der JavaScript Code geladen wird.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Weiterhin nutzen viele Webseiten nur React um [Interaktivität zu bestehenden HTML Seiten hinzuzufügen.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Sie haben viele root Komponenten anstatt einer einzigen für die gesamte Seite. Du kannst so viel - oder so wenig - React nutzen wie du brauchst.
-You've just gotten your first taste of React! Let's recap some key points.
+Du hast gerade deine erste Komponente erstellt! Lass uns nochmal die wichtigsten Punkte zusammenfassen.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React lässt dich Komponenten erstellen, **wiederverwendbare UI Elemente für deine Anwendung.**
+* In einer React Anwendung ist jedes Stück UI eine Komponente.
+* React Komponenten sind normale JavaScript Funktionen, abgesehen davon:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Sie müssen mit einem Großbuchstaben beginnen.
+ 2. Sie geben JSX-Markup zurück
@@ -238,14 +241,14 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Exportiere die Komponente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Dieser Sandkasten funktioniert nicht, weil die root Komponente nicht exportiert ist:
```js
-function Profile() {
+function Profil() {
return (
-Try to fix it yourself before looking at the solution!
+Probiere es selbst zu korrigieren bevor du dir die Lösung ansiehst!
-Add `export default` before the function definition like so:
+Füge `export default` vor der Funktionsdefinition hinzu:
```js
-export default function Profile() {
+export default function Profil() {
return (
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vielleicht fragst du dich, warum es nicht reicht nur `export` zu schreiben. Den Unterschied zwischen `export` und `export default` lernst du in [Importieren und Exportieren von Komponenten.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Korrigiere das return Statement {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Irgendetwas stimmt mit diesem `return` Statement nicht. Kannst du es korrigieren?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Eventuell bekommst du einen "Unexpected token" Fehler während du versuchst das zu korrigieren. In diesem Fall, überprüfe, dass das Semikolon *nach* der schließenden Klammer steht. Ein Semikolon innerhalb von `return ( )` zu lassen wird einen Fehler verursachen.
@@ -304,7 +307,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
```js
-export default function Profile() {
+export default function Profil() {
return
;
}
@@ -318,12 +321,12 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Korrigiere diese Komponente, indem du das return Statement in eine Zeile schreibst:
```js
-export default function Profile() {
+export default function Profil() {
return ;
}
```
@@ -334,12 +337,12 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Oder indem du das zurückgegebene JSX markup in KLaammern einschließt, die direkt nach `return` geöffnet werden:
```js
-export default function Profile() {
+export default function Profil() {
return (
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Finde den Fehler {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Irgendetwas stimmt mit der Deklaration und Nutzung der `Profil` Komponente nicht. Kannst du den Fehler finden? (Versuche dich daran zu erinnern, wie sich React Komponenten von regulären HTML Tags unterscheidet!)
```js
-function profile() {
+function profil() {
return (
- Amazing scientists
- Großartige Wissenschaftler
+
);
}
@@ -393,14 +396,14 @@ img { margin: 0 10px 10px 0; height: 90px; }
-React component names must start with a capital letter.
+React Komponenten müssen mit einem Großbuchstaben beginnen.
-Change `function profile()` to `function Profile()`, and then change every `
```js
-function Profile() {
+function profil() {
return (
- Amazing scientists
- Großartige Wissenschaftler
+
);
}
@@ -429,14 +432,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### Deine eigene Komponente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Schreibe deine eigene Komponente von Grund auf. Du kannst ihr irgendeinen zulässigen Namen geben und irgendwelches Markup zurückgeben. Wenn du keine Idee hast, kannst du eine `Gratulation` Kompontente schreiben, die `Gute Arbeit!
` anzeigt. Vergiss nicht sie zu exportieren!
```js
-// Write your component below!
+// Schreibe deine Komponente hier unten!
```
@@ -447,9 +450,9 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
-export default function Congratulations() {
+export default function Gratulation() {
return (
- Good job!
+ Gute Arbeit!
);
}
```
-And here's how to build a component:
+Und so erstellst du eine Komponente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Schritt 1: Exportiere die Komponente {/*step-1-export-the-component*/}
The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Das `export default` Präfix ist eine [Standard JavaScript Syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nicht spezifisch für React). Es lässt dich die Hauptfunktion in einer Datei markieren, damit du sie später von anderen Dateien importieren kannst. (Mehr über das Importieren in [Importieren und Exportieren von Komponenten](/learn/importing-and-exporting-components)!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Schritt 2: Definiere die Funktion {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Mit `function Profil() { }` definierst du eine JavaScript Funktion mit dem Namen `Profil`.
;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Aber falls nicht dein gesamtes Markup in der gleichen Zeile wie das `return` keyword ist, musst du das Markup in ein Paar Klammern einschließen:
```js
return (
@@ -114,18 +117,18 @@ return (
- Amazing scientists
-Großartige Wissenschaftlerinnen
+Amazing scientists
+Großartige Wissenschaftlerinnen
-Try to fix it yourself before looking at the solution!
+Probiere es selbst zu korrigieren bevor du dir die Lösung ansiehst!
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vielleicht fragst du dich, warum es nicht reicht nur `export` zu schreiben. Den Unterschied zwischen `export` und `export default` lernst du in [Importieren und Exportieren von Komponenten.](/learn/importing-and-exporting-components)
;
}
@@ -318,12 +321,12 @@ img { height: 180px; }
;
}
```
@@ -334,12 +337,12 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Finde den Fehler {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Irgendetwas stimmt mit der Deklaration und Nutzung der `Profil` Komponente nicht. Kannst du den Fehler finden? (Versuche dich daran zu erinnern, wie sich React Komponenten von regulären HTML Tags unterscheidet!)
- Amazing scientists
-Großartige Wissenschaftler
+
-