Erste Schritte: React-Anwendung optimieren

Sie möchten Ihre React-Website so schnell und einfach wie möglich gestalten? Dann bist du hier genau richtig!

Houssein Djirdeh

React ist eine Open-Source-Bibliothek, die das Erstellen von UIs vereinfacht. Dieser Lernpfad behandelt verschiedene APIs und Tools innerhalb des Ökosystems, die Sie verwenden sollten, um die Leistung und Nutzerfreundlichkeit Ihrer Anwendung zu verbessern.

In dieser Anleitung erfahren Sie, wie Sie eine React-Anwendung einrichten und verwenden. Alle anderen Anleitungen in diesem Abschnitt behandeln Themen zur Optimierung der Geschwindigkeit oder Barrierefreiheit einer React-App.

Welchen Nutzen bieten sie?

Es gibt viele Inhalte, die erklären, wie schnelle und zuverlässige Anwendungen erstellt werden, aber nicht viele zeigen, wie schnelle und zuverlässige React-Anwendungen erstellt werden. In diesen Leitfäden wird all dies aus der Perspektive einer React-Anwendung behandelt, in der nur Bibliotheken, APIs und Funktionen erwähnt werden, die für die React-Umgebung spezifisch sind.

Themen in dieser Anleitung

Die Anleitungen in diesem Lernpfad konzentrieren sich nicht auf:

  • So verwendest du React
  • So funktioniert React im Hintergrund

Obwohl beide Konzepte bei Bedarf noch angeführt werden, konzentrieren sich alle Leitfäden und Codelabs in diesem Abschnitt stattdessen auf das Erstellen schneller und zugänglicher React-Websites. Aus diesem Grund sind Grundkenntnisse in React erforderlich.

React-Anwendung erstellen

React-Anwendung erstellen (CRA) ist die einfachste Möglichkeit, React-Anwendungen zu erstellen. Es bietet eine Standardkonfiguration mit einer Reihe von integrierten Kernfunktionen, einschließlich eines Build-Systems, das einen Module Bundler (Webpack) und einen Transpiler (Babel) enthält.

In einer Befehlszeilen-Shell müssen Sie zum Erstellen einer neuen Anwendung nur Folgendes ausführen:

npx create-react-app app-name

Sobald der Befehl ausgeführt wurde, können Sie mit den folgenden Befehlen zur Anwendung wechseln und sie ausführen:

cd new-app
npm start

Die folgende Einbettung zeigt die Verzeichnisstruktur und die tatsächliche Webseite einer neu mit Bootstrapping-Funktion erstellten CRA-Anwendung.

Es gibt mehrere Konfigurationsdateien und Build-Skripts, mit denen CRA einen Webpack- und Babel-Build-Prozess einrichtet, der eine Jest-Basiskonfiguration für Tests umfasst. Um den Vorgang für den Nutzer zu vereinfachen, sind diese Dateien verborgen und können erst aufgerufen werden, wenn Sie sie aus CRA ausschließen. Ein Ausschluss sollte immer vermieden werden, da dies bedeutet, alle diese Konfigurationsdateien als eigenen Quellcode zu verwenden, was schwierig zu verwalten sein kann.

Die Verzeichnisstruktur einer neuen CRA-Anwendung enthält nur die Dateien, die Sie tatsächlich ändern müssten, um mit Ihrer Anwendung arbeiten zu können. In der CRA-Dokumentation wird dies ausführlich erläutert.

Nächste Schritte

Sie wissen nun, wie Sie eine Create React-App erstellen. Sehen Sie sich nun alle Leitfäden in diesem Lernpfad an, um die Leistung und Barrierefreiheit Ihrer App zu verbessern: