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, in denen erklärt wird, wie Sie schnelle und zuverlässige Anwendungen erstellen, aber nicht viele, die zeigen, wie Sie schnelle und zuverlässige React-Anwendungen erstellen. Diese Leitfäden behandeln all dies aus der Perspektive einer React-App, in der nur Bibliotheken, APIs und Funktionen erwähnt werden, die speziell für das React-Ökosystem entwickelt wurden.
Themen in dieser Anleitung
In den Anleitungen dieses Lernpfads geht es nicht um:
- React verwenden
- Funktionsweise von React
Beide Konzepte werden bei Bedarf kurz erwähnt, aber alle Anleitungen und Codelabs in diesem Abschnitt konzentrieren sich darauf, wie Sie schnelle und barrierefreie React-Websites erstellen. Aus diesem Grund sind grundlegende Kenntnisse von React erforderlich.
Create React App
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-Scripts, mit denen CRA einen Webpack- und Babel-Buildprozess einrichtet, der eine grundlegende Jest-Einrichtung für Tests enthält. Zum Schutz der Nutzer sind diese Dateien ausgeblendet und können erst nach dem Auswerfen aus dem CRA darauf zugegriffen werden. Es ist immer am besten, das Trennen nach Möglichkeit zu vermeiden, da Sie in diesem Fall alle diese Konfigurationsdateien als Ihren eigenen Quellcode übernehmen müssen, was die Verwaltung erschweren 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
Nachdem Sie nun wissen, wie Sie mit Create React App loslegen, können Sie in diesem Lernpfad nachlesen, wie Sie die Leistung und Barrierefreiheit Ihrer App verbessern: