Erste Schritte: React-Anwendung optimieren

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

Houssein-Djirdeh

React ist eine Open-Source-Bibliothek, die das Erstellen von UIs vereinfacht. In diesem Lernpfad werden verschiedene APIs und Tools innerhalb des Systems behandelt, mit denen Sie die Leistung und Nutzerfreundlichkeit Ihrer Anwendung verbessern können.

In diesem Leitfaden erfahren Sie, wie Sie eine React-Anwendung einrichten und ausführen. In allen anderen Anleitungen in diesem Abschnitt wird beschrieben, wie du die Geschwindigkeit oder Barrierefreiheit einer React-App optimieren kannst.

Welchen Nutzen bieten sie?

Es gibt eine Menge Inhalte, in denen das Erstellen schneller und zuverlässiger Anwendungen erklärt wird, aber nicht viele, die zeigen, wie schnelle und zuverlässige React-Anwendungen erstellt werden. Diese Leitfäden behandeln all dies aus der Perspektive einer React-Anwendung, in der nur Bibliotheken, APIs und Funktionen speziell für die React-Umgebung erwähnt werden.

Themen in dieser Anleitung

Die Anleitungen in diesem Lernpfad konzentrieren sich nicht auf:

  • React verwenden
  • Funktionsweise von React

Obwohl beide Konzepte bei Bedarf angesprochen werden, konzentrieren sich alle Leitfäden und Codelabs in diesem Abschnitt stattdessen auf das Erstellen schneller und barrierefreier 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 Standardeinrichtung mit einer Reihe von Kernfunktionen, darunter ein Build-System, das einen Modul-Bundler (Webpack) und einen Transpiler (Babel) enthält.

In einer Befehlszeilen-Shell müssen Sie nur folgenden Befehl ausführen, um eine neue Anwendung zu erstellen:

npx create-react-app app-name

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

cd new-app
npm start

Die folgende Einbettung zeigt die Verzeichnisstruktur und die eigentliche Webseite einer neu Bootstrapping-CRA-Anwendung.

CRA verwendet mehrere Konfigurationsdateien und Build-Skripts, um einen Webpack- und Babel-Build-Prozess einzurichten, der eine Jest-Basiseinrichtung zum Testen umfasst. Zur Vereinfachung für den Nutzer sind diese Dateien verborgen und können erst aufgerufen werden, wenn Sie sie aus CRA ausschließen. Ausschlüsse sollten nach Möglichkeit immer vermieden werden, da dies bedeutet, dass alle diese Konfigurationsdateien als eigenen Quellcode übernommen werden und deren Verwaltung schwierig werden kann.

Die Verzeichnisstruktur einer neuen CRA-Anwendung enthält nur die Dateien, die Sie tatsächlich ändern müssen, um mit Ihrer Anwendung zu arbeiten. In der CRA-Dokumentation wird dies im Detail erläutert.

Nächste Schritte

Sie wissen nun, wie Sie eine Create React App erstellen. In den Anleitungen in diesem Lernpfad erfahren Sie, wie Sie die Leistung und Barrierefreiheit Ihrer App verbessern können: