Möchten Sie Ihre React-Website so schnell und barrierefrei wie möglich machen? Dann bist du hier richtig.
React ist eine Open-Source-Bibliothek, die das Erstellen von Benutzeroberflächen erleichtert. 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 allen anderen Leitfäden in diesem Abschnitt werden Themen zur Optimierung der Geschwindigkeit oder Barrierefreiheit einer React-Anwendung behandelt.
Welchen Nutzen bieten sie?
Es gibt viele Inhalte, in denen erklärt wird, wie man schnelle und zuverlässige Anwendungen erstellt, aber nicht viele, in denen gezeigt wird, wie man schnelle und zuverlässige React-Anwendungen erstellt. In diesen Leitfäden wird all dies aus der Perspektive einer React-Anwendung behandelt, wobei nur Bibliotheken, APIs und Funktionen erwähnt werden, die für das React-Ökosystem spezifisch sind.
Themen in dieser Anleitung
Die Anleitungen in diesem Lernpfad konzentrieren sich nicht auf Folgendes:
- React verwenden
- So funktioniert React im Hintergrund
Beide Konzepte werden bei Bedarf angesprochen. Alle Leitfäden und Codelabs in diesem Abschnitt konzentrieren sich jedoch darauf, wie schnelle und barrierefreie React-Websites erstellt werden. Aus diesem Grund sind Grundkenntnisse in React erforderlich.
React-App erstellen
Create React App (CRA) ist die einfachste Möglichkeit, mit der Erstellung von React-Anwendungen zu beginnen. Es bietet eine Standardeinrichtung mit einer Reihe von Hauptfunktionen, darunter ein Build-System mit einem Modul-Bundler (webpack) und einem Transpiler (Babel).
In einer Befehlszeilen-Shell 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 die Anwendung mit den folgenden Befehlen aufrufen und ausführen:
cd new-app
npm start
Die folgende Einbettung zeigt die Verzeichnisstruktur und die eigentliche Webseite einer neu erstellten CRA-Anwendung.
Es gibt mehrere Konfigurationsdateien und Build-Skripts, die von CRA verwendet werden, um einen Webpack- und Babel-Build-Prozess einzurichten, der eine grundlegende Jest-Einrichtung für Tests enthält. Um die Dinge für den Nutzer zu vereinfachen, werden diese Dateien ausgeblendet und können erst aufgerufen werden, wenn Sie CRA auswerfen. Es ist immer am besten, das Auswerfen nach Möglichkeit zu vermeiden, da dies bedeutet, dass Sie alle diese Konfigurationsdateien als Ihren eigenen Quellcode übernehmen, 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 dem Erstellen einer Create React App beginnen, erfahren Sie in den Leitfäden dieses Lernpfads, wie Sie die Leistung und Barrierefreiheit Ihrer App verbessern können: