i18n(de): add CRA migration guide #10006
Open
+369
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
i18n
✅ Deploy Preview for astro-docs-2 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
trueberryless
suggested changes
Nov 13, 2024
|
|
||
| Mit der Zeit kannst du deine Struktur stückweise in eine Kombination aus `.astro`- und `.jsx`- Komponenten umbauen. Dabei wirst du merken, dass du weniger React-Komponenten brauchst als du vielleicht denkst! | ||
|
|
||
| Hier sind ein paar grundliegende Konzepte und Migrationsstrategien, die dir helfen werden loszulegen. Nutze den Rest unserer Dokumente und unsere [Discord-Community](https://astro.build/chat), um weiterzumachen! |
There was a problem hiding this comment.
Suggested change
| Hier sind ein paar grundliegende Konzepte und Migrationsstrategien, die dir helfen werden loszulegen. Nutze den Rest unserer Dokumente und unsere [Discord-Community](https://astro.build/chat), um weiterzumachen! | |
| Hier sind ein paar grundlegende Konzepte und Migrationsstrategien, die dir den Einstieg erleichtern. Nutze den Rest unserer Dokumente und unsere [Discord-Community](https://astro.build/chat), um weiterzumachen! |
|
|
||
| ## Wesentliche Gemeinsamkeiten zwischen CRA und Astro | ||
|
|
||
| - Der [Syntax von `.astro`-Dateien ist ähnlich zu JSX](/de/basics/astro-syntax/#unterschiede-zwischen-astro-und-jsx). Astro zu schreiben sollte sich also gewohnt anfühlen. |
There was a problem hiding this comment.
Suggested change
| - Der [Syntax von `.astro`-Dateien ist ähnlich zu JSX](/de/basics/astro-syntax/#unterschiede-zwischen-astro-und-jsx). Astro zu schreiben sollte sich also gewohnt anfühlen. | |
| - Die [Syntax von `.astro`-Dateien ist ähnlich zu JSX](/de/basics/astro-syntax/#unterschiede-zwischen-astro-und-jsx). Astro zu schreiben sollte sich also gewohnt anfühlen. |
|
|
||
| - Astro ist [komponenten-basiert](/de/basics/astro-components/), und deine Markupstruktur wird vor und nach der Migration ähnlich sein. | ||
|
|
||
| - Astro hat [offizielle Integrationen für React, Preact und Solid](/de/guides/integrations-guide/react/), damit kannst du deine vorhandenen JSX-Komponenten verwenden. Beachte, dass in diese Files in Astro eine `.jsx`/`.tsx` oder `.astro` Endung haben **müssen**. |
There was a problem hiding this comment.
Suggested change
| - Astro hat [offizielle Integrationen für React, Preact und Solid](/de/guides/integrations-guide/react/), damit kannst du deine vorhandenen JSX-Komponenten verwenden. Beachte, dass in diese Files in Astro eine `.jsx`/`.tsx` oder `.astro` Endung haben **müssen**. | |
| - Astro hat [offizielle Integrationen für React, Preact und Solid](/de/guides/integrations-guide/react/), damit kannst du deine vorhandenen JSX-Komponenten verwenden. Beachte, dass in diese Dateien in Astro eine `.jsx`/`.tsx` oder `.astro` Endung haben **müssen**. |
|
|
||
| - Astro hat [offizielle Integrationen für React, Preact und Solid](/de/guides/integrations-guide/react/), damit kannst du deine vorhandenen JSX-Komponenten verwenden. Beachte, dass in diese Files in Astro eine `.jsx`/`.tsx` oder `.astro` Endung haben **müssen**. | ||
|
|
||
| - Astro unterstützt die [Installation von NPM-Paketen](/de/guides/imports/#npm-pakete), inklusive React-Bibliotheken. Viele deiner vorhandenen Dependencies werden auch in Astro funktionieren. |
There was a problem hiding this comment.
Suggested change
| - Astro unterstützt die [Installation von NPM-Paketen](/de/guides/imports/#npm-pakete), inklusive React-Bibliotheken. Viele deiner vorhandenen Dependencies werden auch in Astro funktionieren. | |
| - Astro unterstützt die [Installation von NPM-Paketen](/de/guides/imports/#npm-pakete), inklusive React-Bibliotheken. Viele deiner vorhandenen Abhängigkeiten werden auch in Astro funktionieren. |
|
|
||
| Wenn du deine CRA-Webseite in Astro nachbilden willst, werden dir einige wichtige Unterschiede auffallen: | ||
|
|
||
| - CRA ist eine "single-page"-Applikation, das eine `index.js`-Datei als den Root des Projekts verwendet. Astro ist eine "multi-page"-Applikation, und `index.astro` ist deine Startseite. |
There was a problem hiding this comment.
Suggested change
| - CRA ist eine "single-page"-Applikation, das eine `index.js`-Datei als den Root des Projekts verwendet. Astro ist eine "multi-page"-Applikation, und `index.astro` ist deine Startseite. | |
| - CRA ist eine Single Page Application (App mit einer einzigen Seite), welche eine `index.js`-Datei als das Stammverzeichnis deines Projekts verwendet. Astro ist eine Multiple Page Application (App mit mehreren Seiten), und `index.astro` ist deine Startseite. |
|
|
||
| 3. Verschiebe sämtliches JavaScript, inklusive `import`-Statements, in einen ["Code-Zaun" (`---`)](/de/basics/astro-components/#das-komponentenskript). Beachte: JavaScript, das für das [bedingte Rendering von Inhalten](/de/basics/astro-syntax/#dynamisches-html) benötigt wird, wird oftmals in der HTML-Vorlage direkt in Astro geschrieben. | ||
|
|
||
| 4. Verwende [`Astro.props`](/de/reference/api-reference/#astroprops), um auf die Komponentenattribute, die davor deiner CRA-Komponentenfunktionen weitergegeben worden sind, zuzugreifen. |
There was a problem hiding this comment.
Suggested change
| 4. Verwende [`Astro.props`](/de/reference/api-reference/#astroprops), um auf die Komponentenattribute, die davor deiner CRA-Komponentenfunktionen weitergegeben worden sind, zuzugreifen. | |
| 4. Verwende [`Astro.props`](/de/reference/api-reference/#astroprops), um auf die Komponentenattribute, die zuvor deiner CRA-Komponentenfunktionen weitergegeben worden sind, zuzugreifen. |
|
|
||
| 4. Verwende [`Astro.props`](/de/reference/api-reference/#astroprops), um auf die Komponentenattribute, die davor deiner CRA-Komponentenfunktionen weitergegeben worden sind, zuzugreifen. | ||
|
|
||
| 5. Entscheide, ob du deine importierten Komponenten auch in Astro umgewandelt werden müssen. Du kannst sie als React-Komponenten behalten, egal ob kurzfristig oder für immer. Aber vielleicht willst du sie ja doch in `.astro`-Komponenten umwandeln, vor allem, wenn sie nicht interaktiv sind. |
There was a problem hiding this comment.
Suggested change
| 5. Entscheide, ob du deine importierten Komponenten auch in Astro umgewandelt werden müssen. Du kannst sie als React-Komponenten behalten, egal ob kurzfristig oder für immer. Aber vielleicht willst du sie ja doch in `.astro`-Komponenten umwandeln, vor allem, wenn sie nicht interaktiv sind. | |
| 5. Entscheide, ob deine importierten Komponenten auch in Astro umgewandelt werden müssen. Du kannst sie als React-Komponenten behalten, egal ob kurzfristig oder für immer. Aber vielleicht willst du sie ja doch in `.astro`-Komponenten umwandeln, vor allem, wenn sie nicht interaktiv sind. |
|
|
||
| ### Tests migrieren | ||
|
|
||
| Da Astro reines HTML ausgibt, kannst du deine end-to-end Tests gegen die Ausgabe des Erzeugungsvorgangs schreiben. Bereits bestehende Tests funktionieren vielleicht auch sofort, wenn du die Markupstruktur deiner CRA-Webseite übernehmen konntest. Testbibliotheken wie Jest oder React Testing Library können importiert und für das Testen deiner React-Komponenten in Astro verwendet werden. |
There was a problem hiding this comment.
Suggested change
| Da Astro reines HTML ausgibt, kannst du deine end-to-end Tests gegen die Ausgabe des Erzeugungsvorgangs schreiben. Bereits bestehende Tests funktionieren vielleicht auch sofort, wenn du die Markupstruktur deiner CRA-Webseite übernehmen konntest. Testbibliotheken wie Jest oder React Testing Library können importiert und für das Testen deiner React-Komponenten in Astro verwendet werden. | |
| Da Astro reines HTML ausgibt, kannst du deine End-zu-End Tests gegen die Ausgabe des Erzeugungsvorgangs schreiben. Bereits bestehende Tests funktionieren vielleicht auch sofort, wenn du die Markupstruktur deiner CRA-Webseite übernehmen konntest. Testbibliotheken wie Jest oder React Testing Library können importiert und für das Testen deiner React-Komponenten in Astro verwendet werden. |
|
|
||
| ### CRA Imports in Astro | ||
|
|
||
| Aktualisiere alle [Dateiimports](/de/guides/imports/), um die relativen Dateipfade exakt zu referenzieren. Das kannst du mit einem [Importalias](/de/guides/typescript/#import-aliase) erreichen oder indem du den relativen Pfad komplett ausschreibst. |
There was a problem hiding this comment.
Suggested change
| Aktualisiere alle [Dateiimports](/de/guides/imports/), um die relativen Dateipfade exakt zu referenzieren. Das kannst du mit einem [Importalias](/de/guides/typescript/#import-aliase) erreichen oder indem du den relativen Pfad komplett ausschreibst. | |
| Aktualisiere alle [Dateiimporte](/de/guides/imports/), um die relativen Dateipfade exakt zu referenzieren. Das kannst du mit einem [Importalias](/de/guides/typescript/#import-aliase) erreichen oder indem du den relativen Pfad komplett ausschreibst. |
|
|
||
| ### CRA Children in Astro | ||
|
|
||
| Schreibe jede `{children}`-Instanz in ein Astro `<slot />`. Astro benötigt keine `{children}` als Komponentenattribut und kann automatisch verschaltelte Inhalte in einem `<slot />` rendern. |
There was a problem hiding this comment.
Suggested change
| Schreibe jede `{children}`-Instanz in ein Astro `<slot />`. Astro benötigt keine `{children}` als Komponentenattribut und kann automatisch verschaltelte Inhalte in einem `<slot />` rendern. | |
| Schreibe jede `{children}`-Instanz in einen Astro `<slot />`. Astro benötigt keine `{children}` als Komponentenattribut und kann automatisch verschaltelte Inhalte in einem `<slot />` rendern. |
nicht ganz sicher
trueberryless
suggested changes
Nov 13, 2024
There was a problem hiding this comment.
so, github mobile carried
these are now all the remaining mistakes i found when quickly looking over it...
btw, i know the feeling when you submit a pr that took several weeks of work and then some guy requests 25+ changes. don't let you get down, it's important and beautiful to have such nice teamwork on github! 🎉
great job for taking such a huge page for translation!
|
|
||
| Daten abzurufen ist in Astro-Komponenten im Vergleich zu React-Komponenten recht ähnlich, wenn auch mit kleinen Unterschieden. | ||
|
|
||
| Um Daten von anderen Dateien in deinem Projekt zu importieren, kannst du alle Instanzen von `useEffect` gegen entweder `Astro.glob()` oder `getCollection()`/`getEntryBySlug()` austauschen. |
There was a problem hiding this comment.
Suggested change
| Um Daten von anderen Dateien in deinem Projekt zu importieren, kannst du alle Instanzen von `useEffect` gegen entweder `Astro.glob()` oder `getCollection()`/`getEntryBySlug()` austauschen. | |
| Um Daten von anderen Dateien in deinem Projekt zu importieren, kannst du alle Instanzen von `useEffect` entweder gegen `Astro.glob()` oder `getCollection()`/`getEntryBySlug()` austauschen. |
|
|
||
| ### CRA Styling in Astro | ||
|
|
||
| Eventuell musst du `CSS-in-JS-Bibliotheken` (z.B. styled-components) gegen andere, in Astro verfügbaren CSS-Optionen austauschen. |
There was a problem hiding this comment.
Suggested change
| Eventuell musst du `CSS-in-JS-Bibliotheken` (z.B. styled-components) gegen andere, in Astro verfügbaren CSS-Optionen austauschen. | |
| Eventuell musst du `CSS-in-JS-Bibliotheken` (z.B. gestylte Komponenten) gegen andere, in Astro verfügbaren CSS-Optionen austauschen. |
| Falls nötig, ändere etwaige *inline style* Objekte (`style={{ fontWeight: "bold" }}`) zu inline HTML-`style`-Attributen(`style="font-weight:bold;"`). Oder verwenden Astros `<style>`-Tag für gescopte CSS-Styles. | ||
|
|
||
| ```astro title="src/components/Card.astro" del={1} ins={2} | ||
| <div style={{backgroundColor: `#f4f4f4`, padding: `1em`}}>{message}</div> |
There was a problem hiding this comment.
Suggested change
| <div style={{backgroundColor: `#f4f4f4`, padding: `1em`}}>{message}</div> | |
| <div style={{backgroundColor: `#f4f4f4`, padding: `1em`}}>{nachricht}</div> |
Variablennamen kann man mitübersetzen, um zu zeigen, dass sie variabel sind
|
|
||
| ```astro title="src/components/Card.astro" del={1} ins={2} | ||
| <div style={{backgroundColor: `#f4f4f4`, padding: `1em`}}>{message}</div> | ||
| <div style="background-color: #f4f4f4; padding: 1em;">{message}</div> |
There was a problem hiding this comment.
Suggested change
| <div style="background-color: #f4f4f4; padding: 1em;">{message}</div> | |
| <div style="background-color: #f4f4f4; padding: 1em;">{nachricht}</div> |
| <div style="background-color: #f4f4f4; padding: 1em;">{message}</div> | ||
| ``` | ||
|
|
||
| Tailwind wird unterstützt, wenn du die [Tailwind-Integration](/de/guides/integrations-guide/tailwind/) installiert hast. Keine weitere Änderungen in deinem bestehenden Tailwind-Code nötig! |
There was a problem hiding this comment.
Suggested change
| Tailwind wird unterstützt, wenn du die [Tailwind-Integration](/de/guides/integrations-guide/tailwind/) installiert hast. Keine weitere Änderungen in deinem bestehenden Tailwind-Code nötig! | |
| Tailwind wird unterstützt, wenn du die [Tailwind-Integration](/de/guides/integrations-guide/tailwind/) installiert hast. Keine weiteren Änderungen in deinem bestehenden Tailwind-Code notwendig! |
| Tailwind wird unterstützt, wenn du die [Tailwind-Integration](/de/guides/integrations-guide/tailwind/) installiert hast. Keine weitere Änderungen in deinem bestehenden Tailwind-Code nötig! | ||
| Lerne mehr über [Styling in Astro](/de/guides/styling/). | ||
|
|
||
| ## Troubleshooting |
There was a problem hiding this comment.
Suggested change
| ## Troubleshooting | |
| ## Fehlerbehebung |
|
|
||
| Deine CRA-App kann in Astro "einfach funktionieren"! Allerdings ist es auch möglich, dass du kleine Anpassungen vornehmen musst, um die Funktionalität und/oder Styles deiner App zu duplizieren. | ||
|
|
||
| Wenn du in den Docs nicht die Fragen auf deine Antworten findest, bitte besuche den [Astro Discord](https://astro.build/chat) und stelle deine Frage im Support-Forum! |
There was a problem hiding this comment.
Suggested change
| Wenn du in den Docs nicht die Fragen auf deine Antworten findest, bitte besuche den [Astro Discord](https://astro.build/chat) und stelle deine Frage im Support-Forum! | |
| Wenn du in der Dokumentation nicht die Fragen auf deine Antworten findest, bitte besuche den [Astro Discord](https://astro.build/chat) und stelle deine Frage im Support-Forum! |
trueberryless
suggested changes
Nov 14, 2024
|
|
||
| ### Erstelle ein neues Astro-Projekt | ||
|
|
||
| Verwende das `create astro`-Kommando, um Astros CLI Wizard zu starten, und wähle ein neues "leeres" Astro-Projekt. |
There was a problem hiding this comment.
Suggested change
| Verwende das `create astro`-Kommando, um Astros CLI Wizard zu starten, und wähle ein neues "leeres" Astro-Projekt. | |
| Verwende den `create astro`-Befehl, um Astros CLI Wizard zu starten, und wähle ein neues "leeres" Astro-Projekt. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description (required)
This PR adds the missing german translation for the CRA migration guide. I should have looked at the length of the doc first, this took way longer than expected 😄
Discord: DerTimonius