From 3fdc552c04a5424c0ceb90f7d550fd42d45e78f0 Mon Sep 17 00:00:00 2001
From: Samuel <159447270+Tharg0r@users.noreply.github.com>
Date: Sun, 19 Oct 2025 16:54:43 +0200
Subject: [PATCH] Translate Importing and Exporting Components page and svg
illustrations to German
---
.../docs/illustrations/i_import-export.svg | 6 +-
.../importing-and-exporting-components.md | 136 +++++++++---------
2 files changed, 71 insertions(+), 71 deletions(-)
diff --git a/public/images/docs/illustrations/i_import-export.svg b/public/images/docs/illustrations/i_import-export.svg
index eb62e2b8c..a5b9be957 100644
--- a/public/images/docs/illustrations/i_import-export.svg
+++ b/public/images/docs/illustrations/i_import-export.svg
@@ -69,10 +69,10 @@
Component.js
- one default export
+ Ein Standardexport
- multiple named exports
+ Mehrere benannte Exporte
@@ -95,6 +95,6 @@
export default function FriendsList() { ... }
- named export(s)and one default export
+ Benannte Export(e)und ein Standardexport
diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index b458ef402..a46c9ae72 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -1,26 +1,26 @@
---
-title: Importing and Exporting Components
+title: Komponenten importieren und exportieren
---
-The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
+Der Zauber von Komponenten liegt in ihrer Wiederverwendbarkeit: Du kannst Komponenten erstellen, die aus anderen Komponenten zusammengesetzt sind. Wenn du jedoch immer mehr Komponenten verschachtelst, ist es oft sinnvoll, sie in verschiedene Dateien aufzuteilen. So bleiben deine Dateien übersichtlich und du kannst Komponenten an mehreren Stellen wiederverwenden.
-* What a root component file is
-* How to import and export a component
-* When to use default and named imports and exports
-* How to import and export multiple components from one file
-* How to split components into multiple files
+* Was eine Root-Komponentendatei ist
+* Wie man eine Komponente importiert und exportiert
+* Wann man Standard- und benannte Importe und Exporte verwendet
+* Wie man mehrere Komponenten aus einer Datei importiert und exportiert
+* Wie man Komponenten in mehrere Dateien aufteilt
-## The root component file {/*the-root-component-file*/}
+## Die Root-Komponentendatei {/*the-root-component-file*/}
-In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+In [Deine erste Komponente](/learn/your-first-component) hast du eine `Profile`-Komponente und eine `Gallery`-Komponente erstellt, die sie rendert:
@@ -37,7 +37,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Wunderbare Wissenschaftler
@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; }
-These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+Diese befinden sich derzeit in einer **Root-Komponentendatei**, in diesem Beispiel `App.js` genannt. Je nach deiner Konfiguration könnte sich deine Root-Komponente in einer anderen Datei befinden. Wenn du ein Framework mit dateibasiertem Routing verwendest, wie Next.js, wird deine Root-Komponente für jede Seite unterschiedlich sein.
-## Exporting and importing a component {/*exporting-and-importing-a-component*/}
+## Eine Komponente exportieren und importieren {/*exporting-and-importing-a-component*/}
-What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
+Was wäre, wenn du in Zukunft die Startseite ändern und eine Liste von Wissenschaftsbüchern dort platzieren möchtest? Oder alle Profile an einer anderen Stelle unterbringen möchtest? Es macht Sinn, `Gallery` und `Profile` aus der Root-Komponentendatei herauszubewegen. Das macht sie modularer und in anderen Dateien wiederverwendbar. Du kannst eine Komponente in drei Schritten verschieben:
-1. **Make** a new JS file to put the components in.
-2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+1. **Erstelle** eine neue JS-Datei, um die Komponenten dort hineinzulegen.
+2. **Exportiere** deine Funktionskomponente aus dieser Datei (mit [Standard-](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) oder [benannten](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) Exporten).
+3. **Importiere** sie in der Datei, in der du die Komponente verwenden wirst (mit der entsprechenden Technik zum Importieren von [Standard-](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) oder [benannten](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) Exporten).
-Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+Hier wurden sowohl `Profile` als auch `Gallery` aus `App.js` in eine neue Datei namens `Gallery.js` verschoben. Jetzt kannst du `App.js` ändern, um `Gallery` aus `Gallery.js` zu importieren:
@@ -89,7 +89,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Wunderbare Wissenschaftler
@@ -104,60 +104,60 @@ img { margin: 0 10px 10px 0; height: 90px; }
-Notice how this example is broken down into two component files now:
+Beachte, wie dieses Beispiel jetzt in zwei Komponenten-Dateien aufgeteilt ist:
1. `Gallery.js`:
- - Defines the `Profile` component which is only used within the same file and is not exported.
- - Exports the `Gallery` component as a **default export.**
+ - Definiert die `Profile`-Komponente, die nur innerhalb derselben Datei verwendet und nicht exportiert wird.
+ - Exportiert die `Gallery`-Komponente als **Standardexport.**
2. `App.js`:
- - Imports `Gallery` as a **default import** from `Gallery.js`.
- - Exports the root `App` component as a **default export.**
+ - Importiert `Gallery` als **Standardimport** aus `Gallery.js`.
+ - Exportiert die Root-`App`-Komponente als **Standardexport.**
-You may encounter files that leave off the `.js` file extension like so:
+Du könntest auf Dateien stoßen, die die `.js`-Dateiendung weglassen, etwa so:
```js
import Gallery from './Gallery';
```
-Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+Sowohl `'./Gallery.js'` als auch `'./Gallery'` funktionieren mit React, wobei ersteres näher an der Funktionsweise von [nativen ES-Modulen](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) liegt.
-#### Default vs named exports {/*default-vs-named-exports*/}
+#### Standard- vs. benannte Exporte {/*default-vs-named-exports*/}
-There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+Es gibt zwei Hauptwege, um Werte mit JavaScript zu exportieren: Standardexporte und benannte Exporte. Bisher haben unsere Beispiele nur Standardexporte verwendet. Du kannst aber einen oder beide davon in derselben Datei verwenden. **Eine Datei kann nicht mehr als einen Standardexport haben, aber sie kann so viele _benannte_ Exporte haben, wie du möchtest.**
-
+
-How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+Wie du deine Komponente exportierst, bestimmt, wie du sie importieren musst. Du erhältst einen Fehler, wenn du versuchst, einen Standardexport auf dieselbe Weise zu importieren wie einen benannten Export! Diese Tabelle kann dir helfen, den Überblick zu behalten:
-| Syntax | Export statement | Import statement |
+| Syntax | Export-Anweisung | Import-Anweisung |
| ----------- | ----------- | ----------- |
-| Default | `export default function Button() {}` | `import Button from './Button.js';` |
-| Named | `export function Button() {}` | `import { Button } from './Button.js';` |
+| Standard | `export default function Button() {}` | `import Button from './Button.js';` |
+| Benannt | `export function Button() {}` | `import { Button } from './Button.js';` |
-When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
+Wenn du einen Standardimport verwendest, kannst du nach `import` jeden Namen verwenden, den du möchtest. Du könntest zum Beispiel `import Banana from './Button.js'` schreiben und würdest trotzdem denselben Standardexport erhalten. Im Gegensatz dazu muss bei benannten Importen der Name auf beiden Seiten übereinstimmen. Deshalb heißen sie _benannte_ Importe!
-**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
+**Oft werden Standardexporte verwendet, wenn die Datei nur eine Komponente exportiert, und benannte Exporte, wenn sie mehrere Komponenten und Werte exportiert.** Unabhängig davon, welchen Programmierstil du bevorzugst, gib deinen Komponentenfunktionen und den Dateien, die sie enthalten, immer aussagekräftige Namen. Komponenten ohne Namen wie `export default () => {}` werden nicht empfohlen, da sie das Debugging erschweren.
-## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## Mehrere Komponenten aus derselben Datei exportieren und importieren {/*exporting-and-importing-multiple-components-from-the-same-file*/}
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+Was wäre, wenn du nur ein `Profile` anstatt einer Galerie anzeigen möchtest? Du kannst auch die `Profile`-Komponente exportieren. Aber `Gallery.js` hat bereits einen *Standard*export, und du kannst nicht _zwei_ Standardexporte haben. Du könntest eine neue Datei mit einem Standardexport erstellen, oder du könntest einen *benannten* Export für `Profile` hinzufügen. **Eine Datei kann nur einen Standardexport haben, aber sie kann zahlreiche benannte Exporte haben!**
-To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you!
+Um Verwechslungen zwischen Standard- und benannten Exporten zu vermeiden, legen sich manche Teams auf einen Stil fest, oder vermeiden, beide in derselben Datei zu verwenden. Mach, was für dich am besten funktioniert!
-First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+Zuerst **exportiere** `Profile` aus `Gallery.js` mit einem benannten Export (ohne `default`-Schlüsselwort):
```js
export function Profile() {
@@ -165,13 +165,13 @@ export function Profile() {
}
```
-Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+Dann **importiere** `Profile` aus `Gallery.js` nach `App.js` mit einem benannten Import (mit den geschweiften Klammern):
```js
import { Profile } from './Gallery.js';
```
-Finally, **render** `` from the `App` component:
+Schließlich **rendere** `` aus der `App`-Komponente:
```js
export default function App() {
@@ -179,7 +179,7 @@ export default function App() {
}
```
-Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `` to `` and back in this example:
+Jetzt enthält `Gallery.js` zwei Exports: einen Standard-`Gallery`-Export und einen benannten `Profile`-Export. `App.js` importiert beide. Probiere in diesem Beispiel, `` durch `` zu ersetzen und anschließend wieder zurückzuändern:
@@ -207,7 +207,7 @@ export function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Wunderbare Wissenschaftler
@@ -222,24 +222,24 @@ img { margin: 0 10px 10px 0; height: 90px; }
-Now you're using a mix of default and named exports:
+Jetzt verwendest du eine Mischung aus Standard- und benannten Exporten:
* `Gallery.js`:
- - Exports the `Profile` component as a **named export called `Profile`.**
- - Exports the `Gallery` component as a **default export.**
+ - Exportiert die `Profile`-Komponente als **benannten Export namens `Profile`.**
+ - Exportiert die `Gallery`-Komponente als **Standardexport.**
* `App.js`:
- - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
- - Imports `Gallery` as a **default import** from `Gallery.js`.
- - Exports the root `App` component as a **default export.**
+ - Importiert `Profile` als **benannten Import namens `Profile`** aus `Gallery.js`.
+ - Importiert `Gallery` als **Standardimport** aus `Gallery.js`.
+ - Exportiert die Root-`App`-Komponente als **Standardexport.**
-On this page you learned:
+Auf dieser Seite hast du gelernt:
-* What a root component file is
-* How to import and export a component
-* When and how to use default and named imports and exports
-* How to export multiple components from the same file
+* Was eine Root-Komponentendatei ist
+* Wie man eine Komponente importiert und exportiert
+* Wann und wie man Standard- und benannte Importe und Exporte verwendet
+* Wie man mehrere Komponenten aus derselben Datei exportiert
@@ -247,22 +247,22 @@ On this page you learned:
-#### Split the components further {/*split-the-components-further*/}
+#### Teile die Komponenten weiter auf {/*split-the-components-further*/}
-Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+Derzeit exportiert `Gallery.js` sowohl `Profile` als auch `Gallery`, was etwas verwirrend ist.
-Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `` and `` one after another.
+Verschiebe die `Profile`-Komponente in ihre eigene `Profile.js`-Datei und ändere dann die `App`-Komponente so, dass sie sowohl `` als auch `` nacheinander rendert.
-You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+Du kannst entweder einen Standard- oder einen benannten Export für `Profile` verwenden, aber stelle sicher, dass du die entsprechende Import-Syntax sowohl in `App.js` als auch in `Gallery.js` verwendest! Du kannst dich auf die Tabelle aus dem obigen Eintauchen-Abschnitt beziehen:
-| Syntax | Export statement | Import statement |
+| Syntax | Export-Anweisung | Import-Anweisung |
| ----------- | ----------- | ----------- |
-| Default | `export default function Button() {}` | `import Button from './Button.js';` |
-| Named | `export function Button() {}` | `import { Button } from './Button.js';` |
+| Standard | `export default function Button() {}` | `import Button from './Button.js';` |
+| Benannt | `export function Button() {}` | `import { Button } from './Button.js';` |
-Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+Vergiss nicht, deine Komponenten dort zu importieren, wo sie aufgerufen werden. Verwendet nicht auch `Gallery` die `Profile`-Komponente?
@@ -282,7 +282,7 @@ export default function App() {
```
```js src/Gallery.js active
-// Move me to Profile.js!
+// Verschiebe mich nach Profile.js!
export function Profile() {
return (
![]()
- Amazing scientists
+ Wunderbare Wissenschaftler
@@ -313,11 +313,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
-After you get it working with one kind of exports, make it work with the other kind.
+Wenn es mit einer Exportart funktioniert, bring es anschließend auch mit der anderen zum Laufen.
-This is the solution with named exports:
+Das ist die Lösung mit benannten Exporten:
@@ -341,7 +341,7 @@ import { Profile } from './Profile.js';
export default function Gallery() {
return (
- Amazing scientists
+ Wunderbare Wissenschaftler
@@ -367,7 +367,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
-This is the solution with default exports:
+Das ist die Lösung mit Standardexporten:
@@ -391,7 +391,7 @@ import Profile from './Profile.js';
export default function Gallery() {
return (
- Amazing scientists
+ Wunderbare Wissenschaftler