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!

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 setzt deine Entwicklungsumgebung so auf, dass du die neuesten JavaScript Features benutzen kannst, eine angenehme Entwicklererfahrung zur Verfügung hast und deine Anwendung für die Produktionsumgebung optimiert ist. Du benötigst dafür Node >= 6 und npm >= 5.2 auf deinem Computer. Um ein Projekt zu erstellen, führen diese 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 offizielen 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:

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.