Erste Schritte: React-Anwendung optimieren

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

Houssein Djirdeh

React ist eine Open-Source-Bibliothek zum Erstellen von UIs. einfacher zu machen. In diesem Lernpfad werden verschiedene APIs und Tools im die Sie nutzen sollten, um die Leistung und Usability Ihrer Anwendung.

In diesem Leitfaden erfahren Sie, wie Sie eine React-Anwendung einrichten und verwenden. Alle anderen Anleitungen in diesem Abschnitt behandeln Themen zur Optimierung der Geschwindigkeit oder Barrierefreiheit einer React-App.

Welchen Nutzen bieten sie?

Es gibt viele Inhalte, die erklären, wie man schnelle und zuverlässige aber nicht viele, die zeigen, wie schnelle und zuverlässige React-Funktionen erstellt werden können. Anwendungen. In diesen Leitfäden wird dies alles aus der Perspektive von Reacts behandelt. in der nur Bibliotheken, APIs und Funktionen speziell für das React-Ökosystem.

Themen in dieser Anleitung

Die Anleitungen in diesem Lernpfad konzentrieren sich nicht auf:

  • So verwendest du React
  • So funktioniert React im Hintergrund

Beide Konzepte werden bei Bedarf noch einmal angegangen, alle Leitfäden In den Codelabs in diesem Abschnitt geht es stattdessen um React-Websites zugänglich zu machen. Daher ist eine Grundkenntnisse in React erforderlich.

React-Anwendung erstellen

Create React App (CRA) ist die ist die einfachste Möglichkeit, React-Anwendungen zu erstellen. Es wird ein Standard- Einrichtung mit einer Reihe von integrierten Kernfunktionen, einschließlich eines Build-Systems mit einem Module Bundler (Webpack) und einem Transpiler (Babel).

In einer Befehlszeilen-Shell müssen Sie nur folgenden Befehl ausführen, um ein neues Anwendung:

npx create-react-app app-name

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

cd new-app
npm start

Die folgende Einbettung zeigt die Verzeichnisstruktur und die eigentliche Webseite einer neuen mit Bootstrap eine CRA-Anwendung.

Es gibt mehrere Konfigurationsdateien und Build-Skripts, die CRA zum Einrichten verwendet. Webpack und Babel-Erstellungsprozess, der eine Basis Jest-Einrichtung für Testzwecke Um es für die sind diese Dateien verborgen und können erst aufgerufen werden, wenn Sie sie über CRA entfernen. Es sollte nach Möglichkeit immer nicht ausgeworfen werden, da dies bedeutet, Konfigurationsdateien als eigenen Quellcode verwenden, was schwierig zu verwalten.

Die Verzeichnisstruktur einer neuen CRA-Anwendung enthält nur die Dateien, die Sie anpassen müssen, um an Ihrer Anwendung zu arbeiten. Die CRA-Dokumentation wird dies ausführlich erläutert.

Nächste Schritte

Jetzt wissen Sie, wie Sie eine Create React-App erstellen. um die Leistung und Barrierefreiheit deiner App zu verbessern. diesem Lernpfad: