Möchten Sie Ihre React-Website so schnell und barrierefrei wie möglich gestalten? Dann bist du hier genau richtig.
React ist eine Open-Source-Bibliothek, mit der sich Benutzeroberflächen einfacher erstellen lassen. In diesem Lernpfad werden verschiedene APIs und Tools im Ökosystem behandelt, die Sie verwenden sollten, um die Leistung und Nutzerfreundlichkeit Ihrer Anwendung zu verbessern.
In diesem Leitfaden erfahren Sie, wie Sie eine React-Anwendung einrichten und ausführen. In den anderen Leitfäden 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 man schnelle und zuverlässige Anwendungen erstellt, aber nur wenige, die zeigen, wie man schnelle und zuverlässige React-Anwendungen erstellt. In diesen Leitfäden wird all das aus der Perspektive einer React-App behandelt, in der nur Bibliotheken, APIs und Funktionen erwähnt werden, die für das React-Ökosystem spezifisch sind.
Themen in dieser Anleitung
In den Anleitungen in diesem Lernpfad geht es nicht um:
- React verwenden
- So funktioniert React
Obwohl beide Konzepte bei Bedarf angesprochen werden, konzentrieren sich alle Anleitungen und Codelabs in diesem Abschnitt stattdessen darauf, wie Sie schnelle und barrierefreie React-Websites erstellen. Aus diesem Grund sind grundlegende React-Kenntnisse erforderlich.
React-App erstellen
Create React App (CRA) ist die einfachste Möglichkeit, mit der Entwicklung 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 Transpiler (Babel).
In einer Befehlszeile müssen Sie nur Folgendes ausführen, um eine neue Anwendung zu erstellen:
npx create-react-app app-name
Nachdem der Befehl ausgeführt wurde, können Sie mit den folgenden Befehlen zur Anwendung navigieren und sie ausführen:
cd new-app
npm start
Das folgende eingebettete Element zeigt die Verzeichnisstruktur und die tatsächliche Webseite einer neu erstellten CRA-Anwendung.
CRA verwendet mehrere Konfigurationsdateien und Build-Skripts, um einen Webpack- und Babel-Build-Prozess einzurichten, der eine grundlegende Jest-Einrichtung für Tests enthält. Um die Nutzung zu vereinfachen, werden diese Dateien ausgeblendet und können erst nach dem Auswerfen aus CRA aufgerufen werden. Es ist immer am besten, das Auswerfen nach Möglichkeit zu vermeiden, da Sie dadurch alle diese Konfigurationsdateien als eigenen Quellcode übernehmen, 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. Dies wird in der CRA-Dokumentation ausführlich beschrieben.
Nächste Schritte
Nachdem Sie nun wissen, wie Sie mit der Entwicklung einer Create React App beginnen, erfahren Sie in den Anleitungen in diesem Lernpfad, wie Sie die Leistung und Barrierefreiheit Ihrer App verbessern können: