Erstelle eine neue React Anwendung

Nutze integrierte Werkzeugketten für die beste Benutzer- und Entwicklererfahrung.

Diese Seite beschreibt einige beliebte Werkzeuge für React, die bei Aufgaben helfen wie:

• Auf viele Dateien und Komponenten skalieren.
• Drittbibliotheken von npm verwenden.
• Häufige Fehler früh erkennen.
• CSS und JS während der Entwicklung live editieren.
• Den Output für die Produktionsumgebung optimieren.

Die auf dieser Seite empfohlenen Werkzeuge benötigen keine Konfiguration um loszulegen.

Du brauchst vielleicht keine Werkzeuge

Falls du die oben beschriebenen Probleme nicht kennst oder dich noch nicht bei der Benutzung von JavaScript Werkzeugen wohlfühlst, überlege, React als einfachen <script> Tag einer HTML Seite hinzuzufügen, optional mit JSX.

Das ist auch der einfachste Weg, um React in eine existierende Webseite zu integrieren. Falls du es hilfreich findest, kannst du immer eine größere Ansammlung von Werkzeugen hinzufügen!

Empfohlene Werkzeuge

Das React Team empfiehlt bevorzugt diese Lösungen:

• Wenn du React lernst oder eine neue Single Page Anwendung erstellst, dann benutze Create React App.
• Wenn du eine vom Server gerenderte Webseite mit Node.js baust, dann probier Next.js.
• Wenn du eine statische auf Inhalt orientierte Webseite baust, dann probier Gatsby.
• Wenn du eine Komponentenbibliothek baust oder mit einer existierenden Codebasis integrierst, dann probiere flexiblere Werkzeuge.

Create React App

Create React App ist eine komfortable Umgebung, um React zu lernen und ist der beste Weg, mit einer neuen Single Page Anwendung in React zu beginnen.

Es richtet deine Entwicklungsumgebung so ein, dass du die neuesten JavaScript-Funktionen nutzen kannst, bietet ein besseres Entwicklungserlebnis und optimiert deine App für die Produktion. Du benötigst dafür Node >= 14.0.0 und npm >= 5.6 auf deinem Computer. Um ein Projekt zu erstellen, führe folgende Befehle aus:

npx create-react-app meine-anwendung
cd meine-anwendung
npm start

Hinweis

npx in der ersten Zeile ist kein Schreibfehler — es ist ein Werkzeug, um Pakete direkt auszuführen (package runner tool), welches seit npm 5.2 mitgeliefert wird

Create React App handhabt weder Backend-Logik noch Datenbanken; es erzeugt einfach nur eine Frontend Build Pipeline, so dass du es mit jedem gewünschten Backend verwenden kannst. Unter der Haube verwendet es Babel und webpack, aber darüber musst du nichts wissen.

Wenn du bereit bist auf die Produktionsumgebung zu deployen, führe npm run build aus. Dies erstellt einen optimierten Build für deine Anwendung im build Ordner. Du kannst mehr über Create React App in der README und dem Benutzerhandbuch erfahren.

Next.js

Next.js ist ein beliebtes und leichtgewichtiges Framework für mit React gebaute, statische und vom Server gerenderte Anwendungen. Es beinhaltet Styling- und Routinglösungen out of the box und nimmt an, dass du als Serverumgebung Node.js verwendest.

Lerne Next.js durch den offiziellen Leitfaden.

Gatsby

Gatsby ist der beste Weg, um mit React statische Webseiten zu erstellen. Es lässt dich React Komponenten benutzen, erzeugt aber vorgerendertes HTML und CSS, um die schnellstmögliche Ladezeit zu garantieren.

Lerne Gatsby durch den offiziellen Leitfaden und einer Galerie mit Starter Kits.

Flexiblere Werkzeuge

Die folgenden Werkzeuge bieten mehr Flexibilität und Freiheiten. Wir empfehlen sie für erfahrenere Benutzer:

• Neutrino kombiniert die Stärke von webpack mit der Einfachheit von Voreinstellungen und bringt eine Voreinstellung für React Anwendungen und React Komponenten mit.
• Nx ist ein Toolkit für Full-Stack Monorepo Entwicklung, mit integrierter Unterstützung für React, Next.js, Express und mehr.
• Parcel ist ein schneller konfigurationsfreier Bundler für Webanwendungen, der mit React funktioniert.
• Razzle ist ein Framework für Server-Rendering. Es benötigt keine Konfiguration, bietet aber mehr Flexibilität als Next.js.

Eine Werkzeugkette von Grund auf erstellen

Typischerweise besteht eine JavaScript Build Werkzeugkette aus:

• Einem Paket Manager wie Yarn oder npm. Dadurch erhältst du Zugriff auf ein breites Ökosystem von Drittbibliotheken, die du einfach installieren oder aktualisieren kannst.
• Einem Bundler wie webpack oder Parcel. Das erlaubt dir modularen Code zu schreiben und ihn in kleine Pakete zu packen, um die Ladezeit zu optimieren.
• Einem Compiler wie Babel. Erlaubt es dir modernen JavaScript Code zu schreiben, der trotzdem in alten Browsern funktioniert.

Falls du es bevorzugst deine eigene JavaScript Werkzeugkette von Grund auf aufzusetzen, schau dir diesen Leitfaden an, der Teile der Funktionalität von Create React App nachbaut.

Vergiss nicht dafür zu sorgen, dass deine eigene Werkzeugkette korrekt für die Produktionsumgebung aufgesetzt ist.