diff --git a/src/content/index.md b/src/content/index.md
index 0ef5df597..ef72515d8 100644
--- a/src/content/index.md
+++ b/src/content/index.md
@@ -1,6 +1,6 @@
 ---
 id: home
-title: React – The library for web and native user interfaces
+title: React – Die Bibliothek für Web- und native Benutzeroberflächen
 permalink: index.html
 ---
 
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index 03f491211..3597f464e 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -1,66 +1,69 @@
 ---
-title: Add React to an Existing Project
+title: React zu einem bestehenden Projekt hinzufügen
 ---
 
 <Intro>
 
-If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere.
+Wenn dein bestehendes Projekt lediglich interaktiver werden soll, ist es nicht nötig es vollständig neu in React zu scheiben. Du kannst React einfach hinzufügen und interaktive Komponenten rendern
 
 </Intro>
 
 <Note>
 
-**You need to install [Node.js](https://nodejs.org/en/) for local development.** Although you can [try React](/learn/installation#try-react) online or with a simple HTML page, realistically most JavaScript tooling you'll want to use for development requires Node.js.
+**Für die lokale Entwicklung muss [Node.js](https://nodejs.org/en/) installiert sein.** Man kann React zwar online oder mit einer einfachen HTML-Seite [testen](/learn/installation#try-react) aber in der Praxis benötigt man für die meisten JavaScript Tools die man zum Entwickeln benutzen wird ohnehin Node.js.
 
 </Note>
 
-## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
+## React für eine ganze Subroute einer bestehenden Webseite nutzen {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
 
-Let's say you have an existing web app at `example.com` built with another server technology (like Rails), and you want to implement all routes starting with `example.com/some-app/` fully with React.
+Lass uns annehmen, du hast eine bestehende Webseite auf `example.com` die mit einer anderen Servertechnologie (z.B. Rails) erstellt wurde und du willst nun alle 
+Routen die mit `example.com/some-app/` beginnen vollständig mit React implementieren
 
-Here's how we recommend to set it up:
+dann würden wir empfehlen, das wie folgt einzurichten:
 
-1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
-2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
-3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
+1. **Erstelle den Teil der in der App mit React umgesetzt weren soll** indem du eines der [auf React basierenden Frameworks](/learn/start-a-new-react-project) benutzt.
+2. **Definiere `/some-app` als *base path*** in der Konfiguration deines Framework's (so geht's: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
+3. **Konfiguriere deinen Server oder Proxy** so, dass alle Anfragen (requests) an `/some-app/` von der React Anwendung behandelt werden.
 
-This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks.
+Damit ist sichergestellt, dass der React Teil der Anwendung von den [best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework), die in diese Frameworks bereits eingebaut sind, profitieren kann.
 
-Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead.
+Viele der auf React basierenden Frameworks sind Fullstack und ermöglichen es deiner Anwendung den Server zu nutzen. Man kann den gleichen Ansatz aber auch dann verwenden, wenn man auf dem Server kein JavaScript ausführen kann oder will. In diesem Fall wird stellt man den HTML/CSS/JS export ([`next export` Output](https://nextjs.org/docs/advanced-features/static-html-export) für Next.js, default für Gatsby) unter `/some-app/` bereit.
 
-## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/}
+## React für Teile einer bestehenden Seite nutzen {/*using-react-for-a-part-of-your-existing-page*/}
 
-Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years!
+Lass uns annehmen du hast eine Seite mit einer anderen technologie erstellt (entweder ein Server wie Rails oder ein Client wie Backbone) und du willst nun eine irgendwo auf der Seite eine interaktive React Komponente einfügen. Das ist eine übliche Methode um React zu integrieren -- tatsächlich ist es die Methode wie React in den meisten Anwendungsfällen über viele Jahre bei META benutzt benutzt wurde. 
 
-You can do this in two steps:
+Du kannst das in zwei Schritten erreichen:
 
-1. **Set up a JavaScript environment** that lets you use the [JSX syntax](/learn/writing-markup-with-jsx), split your code into modules with the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax, and use packages (for example, React) from the [npm](https://www.npmjs.com/) package registry.
-2. **Render your React components** where you want to see them on the page.
+1. **JavaScript Umgebung einrichten** damit man die [JSX syntax](/learn/writing-markup-with-jsx) verwenden kann, um Code mit der [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) Syntax in Module aufzuteilen und um Pakete (wie z.B. React) aus der [npm](https://www.npmjs.com/) Registry zu nutzen
+2. **Rendere deine React Komponenten** irgendwo in der Anwendung um sie auf der Seite sichtbar zu machen.
 
-The exact approach depends on your existing page setup, so let's walk through some details.
+Die genaue Vorgehensweise hängt vom Setup deiner bestehenden Seite ab. Wir müssen uns deshalb noch ein paar Details ansehen
 
-### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/}
+### Schritt 1: Eine modulare JavaScript Umgebung einrichten {/*step-1-set-up-a-modular-javascript-environment*/}
 
-A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/) registry--including React itself! How you do this depends on your existing setup:
+Eine modulare Javascript Umgebung ermöglicht es, jede React Komponente in eine Eigene Datei zu schreiben, anstatt den gesamten Code in eine Datei zu schreiben.
+Sie ermöglicht uns ausserdem, die unzähligen, nützlichen Pakete aus der [npm](https://www.npmjs.com/) Registry zu nutzen die andere Entwickler veröffentlich haben. -- inklusive React selbst!   
+Die Einrichtung hängt vom bestehenden Setup ab:
 
-* **If your app is already split into files that use `import` statements,** try to use the setup you already have. Check whether writing `<div />` in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react) to use JSX.
+* **Wenn die Anwendung bereits in Dateien aufgeteilt ist die `import` Statements benutzen** versuche den Setup zu verwenden den du bereits hast. Schreib in deinen JS Code ein `<div/>` und prüfe ob das einen Syntaxfehler verursacht. Sollte dabei ein Syntaxfehler auftreten musst du [deinen Code vermutlich mit Babel umwandeln](https://babeljs.io/setup) und zudem die [Babel React Voreinstellung](https://babeljs.io/docs/babel-preset-react) einschalten um JSX nutzen zu können
 
-* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vitejs.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vitejs.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
+* **Wenn die Anwendung noch nicht für das kompilieren von JavaScript Modulen eingerichtet ist,** richte es mit [Vite](https://vitejs.dev/) ein. Die Vite Community pfelgt [viele Integrationen mit Backend Frmeworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), darunter Rails, Django und Laravel. Falls dein Backend Framework nich aufgelistet ist [folge dieser Anleitung](https://vitejs.dev/guide/backend-integration.html) um  Vite manuell in dein Backend einzubinden
 
-To check whether your setup works, run this command in your project folder:
+Um zu prüfen ob die Einrichtung erfolgreich war führe im Projektordner folgenden Befehl aus:
 
 <TerminalBlock>
 npm install react react-dom
 </TerminalBlock>
 
-Then add these lines of code at the top of your main JavaScript file (it might be called `index.js` or `main.js`):
+danach füge diese Codezeilen am Beginn deiner main JavaScript Datei aus (die Datei heisst meistens `index.js` oder `main.js`)
 
 <Sandpack>
 
 ```html index.html hidden
 <!DOCTYPE html>
 <html>
-  <head><title>My app</title></head>
+  <head><title>Meine App</title></head>
   <body>
     <!-- Your existing page content (in this example, it gets replaced) -->
   </body>
@@ -70,52 +73,52 @@ Then add these lines of code at the top of your main JavaScript file (it might b
 ```js index.js active
 import { createRoot } from 'react-dom/client';
 
-// Clear the existing HTML content
+// löscht den vorhandenen HTML-Inhalt
 document.body.innerHTML = '<div id="app"></div>';
 
-// Render your React component instead
+// und rendert stattdessen die React Komponente
 const root = createRoot(document.getElementById('app'));
-root.render(<h1>Hello, world</h1>);
+root.render(<h1>Hallo, Welt</h1>);
 ```
 
 </Sandpack>
 
-If the entire content of your page was replaced by a "Hello, world!", everything worked! Keep reading.
+Wenn der komplette Inhalt deiner Seite durch "Hallo, Welt" ersetzt wurde hat alles richtig funktioniert! Lies weiter
 
 <Note>
 
-Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vitejs.dev/).
+Wenn man das erste Mal eine modulare JavaScript Umgebung in ein bestehendes Projekt einbindet, kann das einschüchternd wirken, aber das ist es wert! 
+Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! Falls du dabei nicht weitere kommst, sieh dir unsere [Community Resssourcen](/community) an oder schau im [Vite Chat](https://chat.vitejs.dev/) vorbei.
 
 </Note>
 
-### Step 2: Render React components anywhere on the page {/*step-2-render-react-components-anywhere-on-the-page*/}
+### Schritt 2: React Komponenten an beliebiger Stelle auf der Seite rendern {/*step-2-render-react-components-anywhere-on-the-page*/}
 
-In the previous step, you put this code at the top of your main file:
+Im vorhergehenden Schritt hast du diesen Code ganz oben in der main Datei eingesetzt: 
 
 ```js
 import { createRoot } from 'react-dom/client';
 
-// Clear the existing HTML content
+// löscht den vorhandenen HTML-Inhalt
 document.body.innerHTML = '<div id="app"></div>';
 
-// Render your React component instead
+// und rendert stattdessen die React Komponente
 const root = createRoot(document.getElementById('app'));
 root.render(<h1>Hello, world</h1>);
 ```
 
-Of course, you don't actually want to clear the existing HTML content!
+Natürlich will man den vorhandenen HTML-Inhalt nicht wirklich löschen !
+Lösche diesen Code.
 
-Delete this code.
-
-Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute to any tag, for example:
+Vermutlich willst du stattdessen deine React Komponente an einer bestimmten Stelle in deinem HTML rendern. Öffne dazu die HTML-Seite (oder die Server Templates die diese generieren) und füge ein einzigartiges [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) Attribut zu einem beliebigen Element hinzu, zum Beispiel:  
 
 ```html
-<!-- ... somewhere in your html ... -->
+<!-- ... irgendwo in deinem html ... -->
 <nav id="navigation"></nav>
-<!-- ... more html ... -->
+<!-- ... mehr html ... -->
 ```
 
-This lets you find that HTML element with [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and pass it to [`createRoot`](/reference/react-dom/client/createRoot) so that you can render your own React component inside:
+Dieser Code wählt das HTML Element mit [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) aus und reicht es an [`createRoot`](/reference/react-dom/client/createRoot) weiter. Auf diese Weise kannst du deine React Komponente innerhalb des Elements mit der id rendern: 
 
 <Sandpack>
 
@@ -124,9 +127,9 @@ This lets you find that HTML element with [`document.getElementById`](https://de
 <html>
   <head><title>My app</title></head>
   <body>
-    <p>This paragraph is a part of HTML.</p>
+    <p>Dieser Paragraph ist teil des HTML</p>
     <nav id="navigation"></nav>
-    <p>This paragraph is also a part of HTML.</p>
+    <p>Dieser Paragraph ist auch Teil des HTML.</p>
   </body>
 </html>
 ```
@@ -135,8 +138,8 @@ This lets you find that HTML element with [`document.getElementById`](https://de
 import { createRoot } from 'react-dom/client';
 
 function NavigationBar() {
-  // TODO: Actually implement a navigation bar
-  return <h1>Hello from React!</h1>;
+  // TODO: implementiere eine Navigationsleiste
+  return <h1>Hallo von React!</h1>;
 }
 
 const domNode = document.getElementById('navigation');
@@ -146,10 +149,15 @@ root.render(<NavigationBar />);
 
 </Sandpack>
 
-Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `<nav id="navigation">` from your HTML. Read the [`createRoot` usage documentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) to learn more about rendering React components inside an existing HTML page.
+Beobachte wie hier der ursprüngliche HTML Inhalt aus der `index.html` erhalten bleibt, während deine eigene `NavigationBar` React Komponente jetzt innerhalb des `<nav id="navigation">` Elements deines HTML Markups erscheint. Lies in der [`createRoot` Dokumentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) wenn du mehr über das Rendern von React Komponenten innerhalb bestehender HTML-Seiten lernen willst
+
+Wenn man React in ein bestehendes Projekt übernimmt ist es üblich mit kleinen interaktiven Komponenten (wie Buttons) zu beginnen und sich dann zu komplexeren Komponenten zu steigern bis am Ende eventuell die gesamte Seite aus React besteht. 
+
+
+When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. Sollte dieser Punkt erreicht sein, empfehlen wir direkt danach die Migration zu einem [React Framework](/learn/start-a-new-react-project) vozunehmen um das meiste aus React herauszuholen.
+
+## React Native in einer bestehenden Native Mobile App nutzen {/*using-react-native-in-an-existing-native-mobile-app*/}
 
-When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/start-a-new-react-project) right after to get the most out of React.
+[React Native](https://reactnative.dev/) kann auch schrittweise in bestehende Native Apps integriert werden. Wenn du eine bestehende Native App für Android (JAVA oder Kotlin) oder iOS (Objective-C oder Swift) hast, [folge dieser Anleitung](https://reactnative.dev/docs/integration-with-existing-apps) um einen React Native Screen hinzuzufügen
 
-## Using React Native in an existing native mobile app {/*using-react-native-in-an-existing-native-mobile-app*/}
 
-[React Native](https://reactnative.dev/) can also be integrated into existing native apps incrementally. If you have an existing native app for Android (Java or Kotlin) or iOS (Objective-C or Swift), [follow this guide](https://reactnative.dev/docs/integration-with-existing-apps) to add a React Native screen to it.
diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md
index 94dbbbaef..899b0cef9 100644
--- a/src/content/learn/editor-setup.md
+++ b/src/content/learn/editor-setup.md
@@ -1,62 +1,65 @@
 ---
-title: Editor Setup
+title: Editor einrichten
 ---
 
 <Intro>
 
-A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations.
+Ein richtig konfigurierter Editor kan es einfacher machen Code zu lesen und zu schreiben. Es kann dir helfen Fehler zu finden während man sie schreibt! Wenn du zum ersten Mal einen Editor einrichtest oder deinen aktuellen Editor optimieren willst haben wir ein paar Empfehlungen für dich.
 
 </Intro>
 
 <YouWillLearn>
 
-* What the most popular editors are
-* How to format your code automatically
+* Die populärsten Editoren
+* Code automatisch formatieren
 
 </YouWillLearn>
 
-## Your editor {/*your-editor*/}
+## Dein Editor {/*your-editor*/}
 
-[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable!
+[VS Code](https://code.visualstudio.com/) ist einer der populärsten Editoren die derzeit benutzt werden. Er verfügt über einen riesigen Markplatz mit Erweiterungen und kann populäre Dienste wie GitHub sehr gut integrieren. Die meisten der unten genannten Features können ebenfalls als Erweiterungen zu VS Code hinzugefügt werden und machen ihn dadurch sehr anpassungsfähig
 
-Other popular text editors used in the React community include:
+Weitere populäre Texteditoren die von der React Community benutzt werden: 
 
-* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript.
-* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
-* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
+* [WebStorm](https://www.jetbrains.com/webstorm/) ist eine integrierte Entwicklungsumgebung die speziell für JavaScript entworfen wurde.
+* [Sublime Text](https://www.sublimetext.com/) unterstützt JSX und TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) und Autovervollständigung sind bereits integriert.
+* [Vim](https://www.vim.org/) ist ein sehr flexibel konfigurierbarer Texteditor der entwickelt wurde um das erstellen und ändern von jeder Form von Text möglichst effizient zu machen. Er ist als "vi" in den meisten UNIX-Systemen und in Apple OS X enthalten.
 
-## Recommended text editor features {/*recommended-text-editor-features*/}
+## Empfohlene Features bei Texteditoren {/*recommended-text-editor-features*/}
 
-Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!
+Einige Editoren haben diese Features bereits integriert, während man bei anderen eine Eweiterung hinzufügen muss. 
+Überprüfe sicherheitshalber, welche Features dein Editor unterstützt um
 
 ### Linting {/*linting*/}
 
-Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. 
+Code Linter finden Probleme in deinem Code während du ihn schreibst, das hilft dir sie frühzeitig zu korrigieren. 
+[ESLint](https://eslint.org/) ist ein beliebter, quelloffener Linter für JavaScript
 
-* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/))
-* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+* [ESLint mit den für React empfohlenen Einstellungen installieren](https://www.npmjs.com/package/eslint-config-react-app) (stelle sicher, dass du [Node installiert hast!](https://nodejs.org/en/download/current/))
+* [Integriere ESLint mit der offiziellen Erweiterung in VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
-**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them.
+**Stelle sicher, dass du alle [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) Regeln für dein Projekt eingeschalten hast.** Sie sind unverzichtbar und helfen dabei, die schwerwiegendsten Fehler frühzeitig zu erkennen. 
+Die empfohlenen Voreinstellungen von [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) enthalten diese bereits.
 
-### Formatting {/*formatting*/}
+### Formatierung {/*formatting*/}
 
-The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
+Was man in jedem Fall vermeiden möchte wenn man Code mit anderen Mitwirkenden teilt, ist es, über die Verwendung von [Tabs vs. Spaces](https://www.google.com/search?q=tabs+vs+spaces) zu diskutieren! Glücklicherweise kann  [Prettier](https://prettier.io/) den Code aufräumen indem es ihn gemäß anpassbarer Regeln neu formatiert. Führe Prettier aus und alle deine Tabs werden zu Spaces - und deine Einrückungen, Anführungszeichen, etc. werden ebenfalls geändert damit sie den Vorgaben entsprechen. Idealerweise ist dein Editor so eingestellt, dass Prettier ausgeführt wird sobald die Datei gespeichert wird um die Formatierungen für dich möglichst einfach vorzunehmen. 
 
-You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
+Du kannst die [Prettier Erweiterung in VSCode einrichten](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) indem du die folgenden Schritten ausführst.
 
-1. Launch VS Code
-2. Use Quick Open (press Ctrl/Cmd+P)
-3. Paste in `ext install esbenp.prettier-vscode`
-4. Press Enter
+1. VS Code starten
+2. Benutze den Schnellzugriff (STRG/CMD+P)
+3. Fürge dort `ext install esbenp.prettier-vscode` ein
+4. Drücke Enter
 
-#### Formatting on save {/*formatting-on-save*/}
+#### Formattieren beim speichern {/*formatting-on-save*/}
 
-Ideally, you should format your code on every save. VS Code has settings for this!
+Idealerweise solltest du deinen Code bei jedem speichern formattieren. In VS Code lässt sich das einfach einstellen! 
 
-1. In VS Code, press `CTRL/CMD + SHIFT + P`.
-2. Type "settings"
-3. Hit Enter
-4. In the search bar, type "format on save"
-5. Be sure the "format on save" option is ticked!
+1. In VS Code, drücke `CTRL/CMD + SHIFT + P`.
+2. Tippe "settings" ein
+3. Drücke Enter
+4. In der Suchleiste, "format on save" eintippen
+5. Stelle sicher dass die "format on save" Option markiert ist!
 
 > If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.
diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md
index c5426ea94..a1a2a4d71 100644
--- a/src/content/learn/installation.md
+++ b/src/content/learn/installation.md
@@ -4,54 +4,56 @@ title: Installation
 
 <Intro>
 
-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 für deine ganze Anwendung nutzen oder nur die Teile davon, die du benötigst. React eignet sich sowohl dazu um eine einfache HTML-Seite reaktiv zu machen, als auch ganze Projekte von Grund auf damit zu erstellen
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [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)
 
 </YouWillLearn>
 
-## Try React {/*try-react*/}
+## React testen {/*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. Probier es einfach in dieser Sandbox aus!
 
 <Sandpack>
 
 ```js
 function Greeting({ name }) {
-  return <h1>Hello, {name}</h1>;
+  return <h1>Hallo, {name}</h1>;
 }
 
 export default function App() {
-  return <Greeting name="world" />
+  return <Greeting name="Welt" />
 }
 ```
 
 </Sandpack>
 
-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 in der Box editieren, oder dazu ein neues Browserfenster öffnen indem du den "Fork" Button in der oberen rechten Ecke benutzt
 
-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?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb)
+Die meisten Seiten in der React-Dokumentation haben Sandboxen wie diese.
+Ausserhalb 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)
 
-### Try React locally {/*try-react-locally*/}
+### React lokal testen {/*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!
+Um React lokal auf dem eigenen Computer zu testen, [downloade diese HTML Seite](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) und öffne sie sowohl in deinem Code-Editor als auch in deinem Browser
 
-## Start a new React project {/*start-a-new-react-project*/}
+## Starte ein neues React Projekt {/*start-a-new-react-project*/}
 
-If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project)
+Wenn du eine neue Anwendung oder eine Webseite vollständig mit React erstellen willst, dann [starte ein neues React Projekt.](/learn/start-a-new-react-project)
 
-## Add React to an existing project {/*add-react-to-an-existing-project*/}
+## React zu einem bestehenden Projekt hinzufügen {/*add-react-to-an-existing-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)
+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)
 
-## Next steps {/*next-steps*/}
+## Nächste Schritte {/*next-steps*/}
 
-Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day.
+Sieh dir den [Schnelleinstieg](/learn) an, dort findest du eine kurze Einfuhrung in die wichtigsten React Konzepte, denen man täglich begegnen wird, wenn man mit React arbeitet
 
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md
index 280a1378e..45380c2de 100644
--- a/src/content/learn/start-a-new-react-project.md
+++ b/src/content/learn/start-a-new-react-project.md
@@ -1,121 +1,140 @@
 ---
-title: Start a New React Project
+title: Ein neues React Projekt starten
 ---
 
 <Intro>
 
-If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML.
+Wenn du eine neue Anwendung oder eine neue Webseite vollständig mit React erstellen willst, empfehlen wir eines der auf React aufbauenden Frameworks zu benutzen die in der Community sehr populär sind.  
+Frameworks stellen Features bereit, die man vermutlich in den meisten Webanwendungen benötigt, darunter Routing, Data Fetching und HTML rendern  
 
 </Intro>
 
 <Note>
 
-**You need to install [Node.js](https://nodejs.org/en/) for local development.** You can *also* choose to use Node.js in production, but you don't have to. Many React frameworks support export to a static HTML/CSS/JS folder.
+**Um ein Projekt lokal zu entwickeln musst du [Node.js](https://nodejs.org/en/) installieren**. Du kannst dich *optional* auch dazu entscheiden Node.js im Produktivbetrieb zu nutzen, musst aber nicht, denn viele React Frameworks unterstützen den export in statische HTML/CSS/JS Verzeichnisse
+( für statische Inhalte benötigt man in der Regel keine NodeJs Umgebung )
 
 </Note>
 
-## Production-grade React frameworks {/*production-grade-react-frameworks*/}
+## Für den produktiven Betrieb geeignete React Frameworks {/*production-grade-react-frameworks*/}
 
 ### Next.js {/*nextjs*/}
 
-**[Next.js](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal:
+**[Next.js](https://nextjs.org/) ist ein FullStack React Framework.** Next.js ist sehr vielseitig und ermöglicht es React Apps jeder Größe zu erstellen - von einem überwiegend statischen Blog bis zu einer sehr komplexen und dynamischen Anwendung. Um ein neues Next.js Projekt zu starten führe folgenden Code in deinem Terminal aus:
 
 <TerminalBlock>
 npx create-next-app
 </TerminalBlock>
 
-If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs)
+Falls du Next.js noch nicht kennst sieh dir das [Next.js Tutorial.](https://nextjs.org/learn/foundations/about-nextjs) an
 
-Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. [Fully static Next.js apps](https://nextjs.org/docs/advanced-features/static-html-export) can be deployed to any static hosting.
+Next.js wird von [Vercel](https://vercel.com/) bereitgestellt. Du kannst deine Next.js Anwendung auf jedem Node.js oder serverless Hosting [veröffentlichen](https://nextjs.org/docs/deployment) oder selbst hosten. [Vollständig statische Next.js Anwendungen](https://nextjs.org/docs/advanced-features/static-html-export) können auf jedem statischen Hosting veröffentlicht werden.
 
 ### Remix {/*remix*/}
 
-**[Remix](https://remix.run/) is a full-stack React framework with nested routing.** It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions. To create a new Remix project, run:
+**[Remix](https://remix.run/) ist ein Fullstack React Framework mit verschachteltem Routing.** Mit Remix lässt sich die Anwendung in verschachtelte Einheiten aufteilen, die Daten parallel laden und aktualisieren können, um auf eine Benutzeraktion zu antworten.  
+Um ein neues Remix Projekt zu erstellen führe folgenden Befehl im Terminal aus:
 
 <TerminalBlock>
 npx create-remix
 </TerminalBlock>
 
-If you're new to Remix, check out the Remix [blog tutorial](https://remix.run/docs/en/main/tutorials/blog) (short) and [app tutorial](https://remix.run/docs/en/main/tutorials/jokes) (long).
+Falls du Remix noch nicht kennst, sieh dir das Remix-[Blog-Tutorial](https://remix.run/docs/en/main/tutorials/blog) (kurz) und das [App-Tutorial](https://remix.run/docs/en/main/tutorials/jokes) (lang) an.
 
-Remix is maintained by [Shopify](https://www.shopify.com/). When you create a Remix project, you need to [pick your deployment target](https://remix.run/docs/en/main/guides/deployment). You can deploy a Remix app to any Node.js or serverless hosting by using or writing an [adapter](https://remix.run/docs/en/main/other-api/adapter).
+Remix wird von [Shopify](https://www.shopify.com/) bereitgestellt. Wenn man ein Remix Projekt erstellt, muss man ein [Ziel für die veröffentlichung auswählen](https://remix.run/docs/en/main/guides/deployment). 
+Man kann eine Remix Anwendung auf jedem Node.js oder serverless Hostng veröffentlichen indem man [Adapter](https://remix.run/docs/en/main/other-api/adapter) benutzt oder selbst erstellt.
 
 ### Gatsby {/*gatsby*/}
 
-**[Gatsby](https://www.gatsbyjs.com/) is a React framework for fast CMS-backed websites.** Its rich plugin ecosystem and its GraphQL data layer simplify integrating content, APIs, and services into one website. To create a new Gatsby project, run:
+**[Gatsby](https://www.gatsbyjs.com/) ist ein React Framework für schnelle CMS-backed Webseiten.** Sein umfangreiches Plugin Ökosystem und sein GraphQL Datenlayer erleichtern es, Inhalte, API's und Sevices in eine Webseite zu integrieren.  
+Um ein neues Gatsby Projekt zu erstellen führe foldenden befehl im Terminal aus:
 
 <TerminalBlock>
 npx create-gatsby
 </TerminalBlock>
 
-If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/)
+Falls du Gatsby noch nicht kennst, sieh dir das [Gatsby-Tutorial.](https://www.gatsbyjs.com/docs/tutorial/) an.
 
-Gatsby is maintained by [Netlify](https://www.netlify.com/). You can [deploy a fully static Gatsby site](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) to any static hosting. If you opt into using server-only features, make sure your hosting provider supports them for Gatsby.
+Gatsby wird von [Netlify](https://www.netlify.com/) bereitgestellt. Eine [vollständig statische Gatsby Webseite](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) kann man auf jedem statischen Hostingdienst veröffentlichen. Wenn du dich dazu entscheidest Funktionen zu verwenden, die nur auf dem Server laufen solltest du sicherstellen, dass diese vom Hosting Provider für Gatsby unterstützt werden
 
-### Expo (for native apps) {/*expo*/}
+### Expo (für native Anwendungen) {/*expo*/}
 
-**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run:
+**[Expo](https://expo.dev/) ist ein React Framework das es ermöglicht universelle Android, iOS, oder Web Apps mit native UIs zu erstellen.** 
+Es stellt ein SDK für [React Native](https://reactnative.dev/) bereit das die Nutzung der nativen Bestandteile leicht zu benutzen.  
+Um ein neues Expo Projekt zu erstellen führe folgenden Befehl im Terminal aus:
 
 <TerminalBlock>
 npx create-expo-app
 </TerminalBlock>
 
-If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/).
+Falls du Expo noch nicht kennst, sieh dir das [Expo-Tutorial](https://docs.expo.dev/tutorial/introduction/) an.
 
-Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
+Expo wird von [Expo (dem Unternehmen)](https://expo.dev/about) bereitgestellt. Das erstellen von Anwendungen mit Expo ist kostenlos und man kann diese ohne Beschränkungen an den Google oder den Apple Store übermitteln. Expo bietet optional einen kostenpflichtigen Clouddienst an
 
 <DeepDive>
 
-#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/}
+#### Kann ich React auch ohne Framework verwenden ? {/*can-i-use-react-without-a-framework*/}
 
-You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.**
+Du kannst React natürlich auch ohne ein Framework verwenden - und so gehts [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) 
+**Wenn du jedoch eine neue Anwendung oder eine Website vollständig mit React erstellen willst, empfehlen wir die Verwendung eines Frameworks.**
 
-Here's why.
+Hier ist der Grund dafür
 
-Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.
+Selbst wenn du anfangs vielleicht kein Routing oder Datenfetching benötigst, wirst du wahrscheinlich einige Bibliotheken dafür hinzufügen wollen. Mit jedem neuen Feature, das du in dein React-Projekt einbaust, wächst aber dein JavaScript-Bundle und du könntest dich damit konfrontiert sehen, den Code für jede Route einzeln aufzuteilen.
+Wenn deine Anforderungen an das Datafetchging komplexer werden, könntest du auf Netzwerk-Wasserfälle zwischen Server und Client stoßen, die deine Anwendung sehr langsam wirken lassen. Wenn in deiner Zielgruppe viele Nutzer mit schlechten Netzwerkbedingungen und schwach ausgestatteten Geräten sind, könntest du gezwungen sein, HTML aus deinen React-Komponenten zu generieren, um Inhalte frühzeitig darzustellen - entweder auf dem Server oder während der Build-Zeit. Es kann sehr knifflig sein, deine Konfiguration so anzupassen, dass ein Teil deines Codes auf dem Server oder während des Build-Prozesses ausgeführt wird.
 
-**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.
+**Dieses Problem ist nicht spezifisch für React. Deshalb gibt es SvelteKit für Svelte, Nuxt für Vue uns so weiter.**
+Um diese Probleme selbst zu lösen, musst du deinen Bundler mit deinem Router und deiner Datenfetching-Bibliothek integrieren. Es ist zwar nicht schwer, eine erste Konfiguration zum Laufen zu bringen, aber es gibt viele Feinheiten, die man beachten mus, damit die Anwendung auch schnell bleibt wenn sie mit der Zeit größer wird.
+Du wirst den minimalen Umfang an Anwendungs-Code senden wollen, aber das in einem einzigen Client-Server-Roundtrip und s parallel zu jeglichen anderen Daten die für die Seite benötigt werden. Du möchtest wahrscheinlich, dass deine Seite bereits interaktiv ist bevor dein JavaScript Code überhaupt ausgeführt wird, um stufenweise Verbesserung zu unterstützen. Du möchtest vielleicht einen Ordner mit vollständig statischen HTML-Dateien für deine Marketingseiten generieren, die überall gehostet werden können und auch bei deaktiviertem JavaScript noch funktionieren. All diese Funktionalitäten selbst zu erstellen bedeutet echte Arbeit.
 
-**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed).
+**Die auf dieser Seite erwähnten React Frameworks lösen solche Probleme standardmäßig, ohne das man selbst noch etwas tun muss.** Sie ermöglichen es, sehr einfach anzufangen und anschliessend die Anwendung gemäß den Anforderungen zu skalieren. Jedes der Frameworks hat eine Community, dadurch ist es einfach, Antworten auf Fragen zu finden und Tools zu aktualisieren.
+Frameworks geben dem Code ausseredem eine Struktur, die dir und anderen helfen den Kontext und die Fähigkeiten zwischen verschiedneen Projekten zu behalten. Im Gegensatz dazu kann man mit einer benutzerdefinierten Einrichtung leicht bei nicht unterstützten Abhängigkeitsversionen hängen bleiben, und man endet im Grunde damit, sein eigenes Framework zu erstellen - allerdings eines ohne Community oder Upgrade-Pfad (und wenn es so ist wie die, die wir in der Vergangenheit erstellt haben, eher planlos gestaltet)
+
+Wenn du immer noch nicht überzeugt bist oder deine App ungewöhnliche Einschränkungen aufweist, die von diesen Frameworks nicht gut abgedeckt werden, und du dein eigenes benutzerdefiniertes Setup implementieren möchtest, können wir dich nicht davon abhalten – leg los! Hol dir `react` und `react-dom` von npm, setze deinen eigenen individuellen Build-Prozess mit einem Bundler wie [Vite](https://vitejs.dev/) oder [Parcel](https://parceljs.org/) auf, und füge nach Bedarf weitere Tools für Routing, statische Generierung oder serverseitiges Rendering und mehr hinzu.
 
-If you're still not convinced, or your app has unusual constraints not served well by these frameworks and you'd like to roll your own custom setup, we can't stop you--go for it! Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more.
 </DeepDive>
 
-## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/}
+## Bleeding-Edge React Frameworks {/*bleeding-edge-react-frameworks*/}
+
+Als wir untersucht haben, wie wir React weiter verbessern können, haben wir erkannt, dass eine engere integration von React mit Frameworks ( insbedondere mit Routing-, Bundling-, und Server-Technologien) unsere größte Chance ist. React-Benutzern dabei zu helfen, bessere Anwendungen zu erstellen. Das Next.js Team hat zugestimmt, mit uns bei der Erfoschrung, Entwicklung, Integration und dem testen von Frameworkunabhängigen, bleeding-edge Features von React wie [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)
+zusammenzuarbeiten.
 
-As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)
+Diese Features nähern sich täglich dem Punkt, an dem sie für den produktiven Einsatz geeignet sind. Wir haben zudem Gespräche mit anderen Enwicklern von  Bundlern und Frameworks über deren Integration geführt. 
+Wir hoffen, dass in ein bis zwei Jahren alle auf dieser Seite aufgeführten Frameworks vollständige Unterstützung für diese Funktionen beiten werden
 
-These features are getting closer to being production-ready every day, and we've been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you're a framework author interested in partnering with us to experiment with these features, please let us know!)
+(Wenn du ein Framework-Autor bist und Intersse an einer Kooperation mit uns hast, um diese Funktionen auszuprobieren, melde dich bei uns!)
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
-**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.
+**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) ist ein redesign der Next.js APIs und hat das Ziel die Vision einer Fullstack Architektur des React Team’s zu erfüllen.** Es ermöglicht das fetchen von Daten in asynchronen Komponenten, die auf dem Server laufen oder sogar bereits während des Build Vorgangs.
+
+Next.js wird von [Vercel](https://vercel.com/) betrieben. Du kannst deine Next.js Anwendung auf jedem Node.js oder serverless Hosting [veröffentlichen](https://nextjs.org/docs/deployment) oder selbst hosten. [Vollständig statische Next.js Anwendungen](https://nextjs.org/docs/advanced-features/static-html-export) können auf jedem statischen Hosting veröffentlicht werden, da sie keinen Server benötigen.
 
-Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://beta.nextjs.org/docs/configuring/static-export) which doesn't require a server.
 <Pitfall>
 
-Next.js's App Router is **currently in beta and is not yet recommended for production** (as of Mar 2023). To experiment with it in an existing Next.js project, [follow this incremental migration guide](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
+Next.js's App Router ist **derzeit in Beta und wird noch nicht für den produktiven Betrieb empfohlen** (Stand März 2023). 
+Um damit in einem bestehenden Next.js Projekt zu experimentieren [folge dieser schrittweisen Migrationsanleitung](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
 
 </Pitfall>
 
 <DeepDive>
 
-#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
+#### Welche Funktionen machen die Full-Stack-Architekturvision des React-Teams aus? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
 
-Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree.
+Next.js's App Router Bundler implementiert vollständig die offizielle [React Server Komponenten Spezifikation](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Auf diese Weise kannst du Build-Time-, Server-Only- und interaktive Komponenten in einem einzigen React-Baum kombinieren.
 
-For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components:
+Beispielsweise kannst du eine reine Server-Komponente als `async` Funktion schreiben, die aus einer Datenbank oder einer Datei liest und die Daten anschliessend an eine interaktive Komponente weitergeben
 
 ```js
-// This component runs *only* on the server (or during the build).
+// Diese Komponente wird *nur* auf dem Server ausgeführt (oder während der Build-Zeit)
 async function Talks({ confId }) {
-  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
+  // 1. Du bist auf dem Server, dadurch kannst du mit der Datenebene kommunizieren. Ein API Endpunkt ist nicht erforderlich
   const talks = await db.Talks.findAll({ confId });
 
-  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
+  // 2. Füge eine beliebige Menge von rendering Logik hinzu. Dadurch wird dein JavaScipt bundle nicht größer
   const videos = talks.map(talk => talk.video);
 
-  // 3. Pass the data down to the components that will run in the browser.
+  // 3. Reiche die Daten an die Komponente weiter die im Browser ausgeführt wird
   return <SearchableVideoList videos={videos} />;
 }
 ```