From 7b53456f5881d4e71df4b32aa74b4303077e9966 Mon Sep 17 00:00:00 2001 From: Timon Jurschitsch Date: Wed, 13 Nov 2024 16:26:35 +0100 Subject: [PATCH 1/2] i18n(de): add CRA migration guide --- .../from-create-react-app.mdx | 369 ++++++++++++++++++ 1 file changed, 369 insertions(+) create mode 100644 src/content/docs/de/guides/migrate-to-astro/from-create-react-app.mdx diff --git a/src/content/docs/de/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/de/guides/migrate-to-astro/from-create-react-app.mdx new file mode 100644 index 0000000000000..a13ef6cb67a8a --- /dev/null +++ b/src/content/docs/de/guides/migrate-to-astro/from-create-react-app.mdx @@ -0,0 +1,369 @@ +--- +title: Migrieren von Create React App (CRA) +description: Tipps zum Migrieren eines existierenden Create React App Projekts zu Astro +type: migration +stub: true +framework: Create React App +i18nReady: true +--- +import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { FileTree } from '@astrojs/starlight/components'; +import ReadMore from '~/components/ReadMore.astro'; +import Badge from "~/components/Badge.astro" + +Astros [React-Integration](/de/guides/integrations-guide/react/) ermöglicht dir, [React-Komponenten in Astro-Komponenten zu verwenden](/de/guides/framework-components/), auch komplette React-Projekte wie Create React App (CRA)! + +```astro title="src/pages/index.astro" +--- +// Importiere deine root App-Komponente +import App from '../cra-project/App.jsx'; +--- + + +``` + +Lies in [Build a Single Page Application (SPA) with Astro (englischer Blogpost)](https://logsnag.com/blog/react-spa-with-astro) , wie man React Router in Astro verwendet. + +Viele Apps werden als komplette React-Apps "einfach funktionieren", wenn du sie direkt in dein Astro-Projekt mit der React-Integration installierst. Das ist eine gute Möglichkeit, dein Projekt sofort zum Laufen zu bringen und deine App funktionsfähig zu halten, während du zu Astro migrierst. + +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! + +## 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. + +- Astro verwendet dateienbasierts Routing, und [erlaubt spezielle Dateinamen, um dynamische Routen zu erstellen](/de/guides/routing/#dynamische-routen). + +- 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**. + +- 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. + +## Wesentliche Unterschiede zwischen CRA und Astro + +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. + +- [`.astro`-Komponenten](/de/basics/astro-components/) sind nicht als exportierte Funktionen geschrieben, die Seitenvorlagen zurückgeben. Stattdessen wirst du deinen Code in einen "Code-Zaun" mit deinem JavaScript-Code und einem Body, der ausschließlich deinen generierten HTML-Code enthält, aufteilen. + +- [inhaltsfokussiert](/de/concepts/why-astro/#inhaltsfokussiert): Astro wurde als Auslage für deine Inhalte designed und erlaubt dir, interaktive Elemente nur einzubauen, wenn du sie brauchst. Eine existierende CRA-App könnte für ausgiebige client-seitige Interaktivität ausgelegt sein und benötigt vielleicht fortgeschrittene Astro-Techniken, um komplexere Elemente wie Dashboards durch `.astro`-Komponenten zu ersetzen. + +## Füge deine CRA zu Astro hinzu + +Deine vorhandene App kann direkt in einem neuen Astro-Projekt gerendert werde, oftmals auch ohne Änderungen an deinem Code. + +### Erstelle ein neues Astro-Projekt + +Verwende das `create astro`-Kommando, um Astros CLI Wizard zu starten, und wähle ein neues "leeres" Astro-Projekt. + + + + ```shell + npm create astro@latest + ``` + + + ```shell + pnpm create astro@latest + ``` + + + ```shell + yarn create astro@latest + ``` + + + +### Füge Integrationen und Dependencies hinzu + +Füge die React-Integration mit dem `astro add`-Kommando hinzu. Wenn deine App Tailwind oder MDX verwendet, kannst du mehrere Astro-Integrationen mit einem Kommando hinzufügen: + + + + ```shell + npx astro add react + npx astro add react tailwind mdx + ``` + + + ```shell + pnpm astro add react + pnpm astro add react tailwind mdx + ``` + + + ```shell + yarn astro add react + yarn astro add react tailwind mdx + ``` + + + +Wenn deine CRA-App andere Dependencies (z.B. NPM-Pakete) benötigt, kannst du diese entweder individuell über die Kommandozeile installieren oder durch das Hinzufügen in die `package.json`-Datei deines Astro-Projekts, wenn du danach das Installationskommando laufen lässt. Beachte, dass viele, aber nicht alle, React-Dependencies auch in Astro funktionieren werden. + +### Füge deine vorhanden App-Dateien hinzu + +Kopiere deine vorhanden CRA-Projektdateien und Ordner (z.B. `components`, `hooks`, `styles` etc.) in einen neuen Ordner in `src/`, während du die Struktur aufrecht erhältst, damit deine App weiterhin funktioniert. Beachte, dass alle `.js`-Dateiendungen in `.jsx` oder `.tsx` umbenannt werden müssen. + +Füge keine Konfigurationsdateien hinzu. Du wirst Astros eigene `astro.config.mjs`, `package.json` und `tsconfig.json` bearbeiten können. + +Verschiebe den Inhalt des Ordners `public/` deiner App (z. B. statische Assets) in den Ordner `public/` von Astro. + + +- public/ + - logo.png + - favicon.ico + - ... +- src/ + - cra-project/ + - App.jsx + - ... + - pages/ + - index.astro +- astro.config.mjs +- package.json +- tsconfig.json + + +### Rendere deine App + +Importiere deine Root-Komponenten in das Frontmatter von `index.astro` und rendere die ``-Komponente in deiner Seitenvorlage: + +```astro title="src/pages/index.astro" +--- +import App from '../cra-project/App.jsx'; +--- + +``` + +:::note[Client-Direktiven] +Deine App benötigt eine Client-Direktive für Interaktivität. Astro rendert deine React-App als statisches HTML, bis du zu client-seitigem JavaScript optierst. + +Benutze `client:load`, um sicherzustellen, dass deine App sofort vom Server geladen wird, oder `client:only="react"`, um das server-seitige Rendering zu überspringen und deine App komplett client-seitig laufen zu lassen. +::: + +Schaue dir auch unseren Guide zur [Konfiguration von Astro](/de/guides/configuring-astro/) für mehr Details und mögliche Optionen an. + +## Verwandle deine CRA in Astro + +Nachdem du [deine vorhandene App in Astro hinzugefügt hast](#füge-deine-cra-zu-astro-hinzu), willst du wahrscheinlich die App auch in Astro umwandeln! + +Du replizierst ein ähnliches komponentenbasiertes Design [unter Verwendung von Astro HTML-Vorlagenkomponenten für deine Grundstruktur](/de/basics/astro-components/), während du einzelne React-Komponenten (die selbst ganze Apps sein können!) für Inseln der Interaktivität importierst und einbindest. + +Jede Migration sieht anders aus und kann schrittweise durchgeführt werden, ohne dass die Funktionalität deiner App unterbrochen wird. Konvertiere deine Komponenten in deinem eigenen Tempo, sodass deine App mit der Zeit immer mehr von Astro-Komponenten angetrieben wird. + +Während du deine React-App konvertierst, entscheidest du, welche React-Komponenten du [als Astro-Komponenten umschreibst](#converting-jsx-files-to-astro-files) und welche nicht. Deine einzige Einschränkung besteht darin, dass Astro-Komponenten zwar React-Komponenten importieren können, React-Komponenten jedoch nur andere React-Komponenten importieren dürfen: + +```astro title="src/pages/static-components.astro" ins={2,7} +--- +import MyReactComponent from '../components/MyReactComponent.jsx'; +--- + + +

Use React components directly in Astro!

+ + + +``` + +Anstatt Astro-Komponenten in React-Komponenten zu importieren, kannst du mehrere React-Komponenten in einer einzelnen Astro-Komponente verschachteln: + +```astro title="src/pages/nested-components.astro" {2,3,5,8,10} +--- +import MyReactSidebar from '../components/MyReactSidebar.jsx'; +import MyReactButton from '../components/MyReactButton.jsx'; +--- + +

Here is a sidebar with some text and a button.

+
+ +
+ +``` + +Vielleicht hilft es dir, zuerst über [Astro-Inseln](/de/concepts/islands/) und [Astro-Komponenten](/de/basics/astro-components/) zu lernen, bevor du dein CRA in ein Astro-Projekt umwandelst. + +### Vergleiche: JSX vs Astro + +Vergleiche folgende React-Komponente und die entsprechende Astro-Komponente: + + + + ```jsx title="StarCount.jsx" + import React, { useState, useEffect } from 'react'; +import Header from './Header'; +import Footer from './Footer'; + +const Component = () => { + const [stars, setStars] = useState(0); + const [message, setMessage] = useState(''); + + useEffect(() => { + const fetchData = async () => { + const res = await fetch('https://api.github.com/repos/withastro/astro'); + const json = await res.json(); + + setStars(json.stargazers_count || 0); + setMessage(json.message); + }; + + fetchData(); + }, []); + + return ( + <> +
+

Astro has {stars} 🧑‍🚀

+