Sie möchten Ihre React-Website so schnell und barrierefrei wie möglich gestalten? Dann bist du hier genau richtig.
React ist eine Open-Source-Bibliothek, die das Erstellen von UIs erleichtert. In diesem Lernpfad werden verschiedene APIs und Tools im Ökosystem behandelt, die Sie zur Verbesserung der Leistung und Nutzerfreundlichkeit Ihrer Anwendung verwenden sollten.
In dieser Anleitung erfahren Sie, wie Sie eine React-Anwendung einrichten. In allen anderen Anleitungen in diesem Abschnitt werden Themen zur Optimierung der Geschwindigkeit oder Barrierefreiheit einer React-App behandelt.
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
In den Anleitungen dieses Lernpfads geht es nicht um:
- React verwenden
- Funktionsweise von React
Beide Konzepte werden bei Bedarf noch einmal angegangen. In den Leitfäden und Codelabs in diesem Abschnitt geht es aber um das Erstellen schneller und zugänglicher React-Websites. Aus diesem Grund sind Grundkenntnisse in React erforderlich.
React-Anwendung erstellen
Create React App (CRA) ist die einfachste Möglichkeit, mit dem Erstellen von React-Anwendungen zu beginnen. Es bietet eine Standardeinrichtung mit einer Reihe von integrierten Kernfunktionen, darunter ein Build-System mit einem Modul-Bundler (Webpack) und einem Transformer (Babel).
In einer Befehlszeilen-Shell müssen Sie nur Folgendes ausführen, um eine neue Anwendung zu erstellen:
npx create-react-app app-name
Sobald die Ausführung des Befehls abgeschlossen ist, können Sie die Anwendung mit den folgenden Befehlen aufrufen und ausführen:
cd new-app
npm start
Das folgende eingebettete Element zeigt die Verzeichnisstruktur und die tatsächliche Webseite einer neu gestarteten 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 die Nutzung zu vereinfachen, sind diese Dateien ausgeblendet und können erst nach dem Auswerfen aus dem CRA darauf zugegriffen werden. Ein Ausschluss sollte immer vermieden werden, da dies bedeutet, all 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üssen, um an Ihrer Anwendung zu arbeiten. In der CRA-Dokumentation wird dies ausführlich erläutert.
Nächste Schritte
Sie wissen jetzt, wie Sie mit Create React App loslegen. In diesem Lernpfad erfahren Sie, wie Sie die Leistung und Barrierefreiheit Ihrer App verbessern: