Zum Hauptinhalt springen

Ausführliche Anleitung - Wie man ein React-Skeleton richtig erstellt

Recommended banner

React ist eines der beliebtesten Frameworks für die Entwicklung von Webanwendungen. Es ermöglicht Ihnen, leistungsstarke und effiziente Benutzeroberflächen zu erstellen, die eine gute Benutzererfahrung bieten. Wenn unsere App jedoch geladen wird oder Anfragen an den Server gestellt werden, können Benutzer eine Verzögerung oder einen leeren Platz auf dem Bildschirm sehen. Dies kann einen schlechten Eindruck hinterlassen und die Benutzererfahrung beeinträchtigen.

Um dieses Problem zu vermeiden und das Laden und Aussehen unserer React-Anwendungen zu verbessern, können wir eine Technik namens "Skeleton-Download" verwenden. Dies ist ein Ansatz, bei dem ein temporärer Stub auf dem Bildschirm dargestellt wird, der die erwartete Benutzeroberfläche visuell darstellt, während die Anwendung geladen oder Daten verarbeitet.

In diesem ausführlichen Leitfaden werden wir uns ansehen, wie wir einen Skeleton-Download für unsere React-Anwendungen erstellen. Wir werden uns verschiedene Möglichkeiten zur Implementierung von Skeleton-Booten mit verschiedenen Bibliotheken und Werkzeugen ansehen. Wir werden uns auch die effektivsten Praktiken und Ansätze zum Erstellen von Skeletten ansehen, die uns helfen, unsere Apps für Benutzer ansprechender und ansprechender zu gestalten.

Wenn Sie die Benutzererfahrung Ihrer React-App verbessern und das Laden Ihrer App reibungsloser und attraktiver gestalten möchten, ist dieser Leitfaden für Sie. Lesen Sie weiter, um zu erfahren, wie Sie ein React-Skeleton erstellen und auf Ihre Projekte anwenden können!

Was ist React?

Die Hauptidee von React besteht darin, dass jede Komponente in der Anwendung ein unabhängiges und wiederverwendbares Element ist. Komponenten können zusammengesetzt werden, um komplexe Benutzeroberflächen zu erstellen.

React verwendet das virtuelle DOM (die Objektstruktur des Dokumentmodells), um nur den erforderlichen Teil der Benutzeroberfläche effizient zu aktualisieren, ohne die gesamte Seite neu zu zeichnen. Auf diese Weise können Sie reaktionsschnelle und schnelle Webanwendungen erstellen.

Eines der Hauptmerkmale von React ist der unidirektionale Datenfluss. Die Daten werden über Props in der Komponentenhierarchie nach unten übertragen, und die Daten werden über den Status der Komponente aktualisiert. Dies macht den React-Code vorhersehbarer und leicht zu wartender.

React verfügt auch über ein großes Ökosystem von Tools und Bibliotheken, die seine Funktionalität erweitern und die Entwicklung vereinfachen. Zusammen mit JavaScript verwendet React die JSX-Syntax, mit der Sie die Struktur der Benutzeroberfläche innerhalb des JavaScript-Codes beschreiben können.

Schritt 1: Installieren von React

Um mit dem React-Skeleton zu beginnen, müssen Sie das Framework selbst und alle erforderlichen Abhängigkeiten installieren. Hier sind die Schritte, die Sie befolgen müssen, um React zu installieren:

  1. Stellen Sie sicher, dass Sie Node installiert haben.js. Sie können die Installation überprüfen, indem Sie einfach den Befehl node -v an der Eingabeaufforderung eingeben. Wenn Sie die Node-Version sehen.js bedeutet, dass es installiert ist. Wenn nicht, müssen Sie den Node installieren.js vor dem Fortfahren.
  2. Erstellen Sie einen neuen Ordner für Ihr React-Projekt.
  3. Öffnen Sie eine Eingabeaufforderung und navigieren Sie mit dem Befehl cd zum erstellten Ordner.
  4. Initialisieren Sie das neue Projekt mit dem Befehl npx create-react-app . Ein Punkt am Ende des Befehls gibt an, dass das Projekt im aktuellen Ordner erstellt wird.
  5. Warten Sie, bis die Installation der Pakete und Vorlagen abgeschlossen ist. Dies kann einige Zeit dauern.

Glückwunsch! Sie haben React erfolgreich installiert und ein neues Projekt erstellt. Jetzt sind Sie bereit, mit Ihrem React-Skeleton zu beginnen.

Installieren von Node.js

Um Node zu installieren.js, folgen Sie den folgenden Schritten:

  1. Besuchen Sie die offizielle Website von Node.js - https://nodejs.org/.
  2. Die Schaltfläche "LTS herunterladen" wird auf der Hauptseite der Website verfügbar sein. Klicken Sie darauf.
  3. Eine Download-Seite wird geöffnet, auf der Sie die Node-Version auswählen können.js, das Ihrem Betriebssystem entspricht. Wählen Sie beispielsweise für Windows "Windows Installer" aus.
  4. Laden Sie die Node-Installationsdatei herunter.js.
  5. Führen Sie die Installationsdatei aus, und folgen Sie den Anweisungen des Installationsassistenten. Während des Installationsprozesses müssen Sie möglicherweise den Pfad für die Node-Installation angeben.js.

Jetzt, da Sie Node installiert haben.js, Sie sind bereit, mit dem Erstellen eines React-Skelettprojekts zu beginnen.

Erstellen eines neuen Projekts

Um ein neues Projekt auf React zu erstellen, müssen Sie einige einfache Schritte ausführen:

Recommended banner
  1. Installiere Node.js, wenn es noch nicht installiert ist. Node.js kann von der offiziellen Website heruntergeladen werden: https://nodejs.org.
  2. Öffnen Sie eine Eingabeaufforderung oder ein Terminal und überprüfen Sie die Node-Installation.js mit Befehl:

node -v (stellen Sie sicher, dass Sie die Node-Version erhalten haben.js)

  1. Installieren Sie die Create React App mit dem folgenden Befehl:

npx create-react-app my-app (wo my-app - name Ihres Projekts)

  1. Wechseln Sie mit dem Befehl zum Ordner mit dem neuen Projekt:

cd my-app (wo my-app - name Ihres Projekts)

  1. Starten Sie die Anwendung mit dem Befehl:

Nach diesen Schritten sollte der Browser mit der ersten Anwendungsvorlage auf React geöffnet werden. Sie können mit der Entwicklung Ihres Projekts beginnen, indem Sie die Dateien in einem Ordner bearbeiten src.

Schritt 2: Erstellen von Komponenten

Sie können Komponenten in React mit Klassen oder Funktionen erstellen. Der Standardansatz besteht darin, Komponentenklassen zu verwenden. Hier ist ein Beispiel für eine einfache Klassenkomponente:

class MyComponent extends React.Component 
Привет, мир!
Это мой компонент.
);>>

Im obigen Beispiel erstellen wir eine Klassenkomponente mit dem Namen "MyComponent". Es erbt von der "React" -Basisklasse.Component" und hat eine "render" -Methode, die bestimmt, was genau auf dem Bildschirm angezeigt wird.

Sie können eine Funktion verwenden, um eine Funktionskomponente zu erstellen, anstatt eine Klasse zu verwenden. Hier ist ein Beispiel:

function MyComponent() 
Привет, мир!
Это мой компонент.
);>

Funktionskomponenten sind einfacher und kleiner, aber sie können den Komponentenstatus oder die React-Lebenszyklusmethoden nicht verwenden. Wenn Ihre Komponente diese Funktionalität nicht benötigt, ist eine funktionale Komponente eine gute Wahl.

Nachdem Sie eine Komponente erstellt haben, können Sie sie in anderen Komponenten oder innerhalb der Stammkomponente Ihrer Anwendung verwenden. Beispiel für die Verwendung einer Komponente:

class App extends React.Component 
Мое React приложение
);>>

In diesem Beispiel erstellen wir eine Stammkomponente mit dem Namen "App" und fügen unsere zuvor erstellte Komponente "MyComponent" mit einem Tag ein.

Jetzt, da Sie über einen grundlegenden Satz von Komponenten verfügen, können Sie mit der Weiterentwicklung Ihrer React-Anwendung beginnen, indem Sie neue Komponenten hinzufügen und die von React bereitgestellten Funktionen nutzen.

Erstellen einer Funktionskomponente

Um eine Funktionskomponente in React zu erstellen, verwenden Sie eine Funktion, die JSX-Markup zurückgibt.

Im Folgenden finden Sie ein Beispiel zum Erstellen einer einfachen Funktionskomponente:


function MyComponent()

return (





Hallo, Welt!






);


>
export default MyComponent;

In diesem Beispiel ist die MyComponent-Komponente eine Funktion, die JSX-Markup zurückgibt - ein div-Element mit dem Titel h3 - "Hallo Welt!". Die Komponente wird mit export default exportiert , sodass sie in anderen Dateien verwendet werden kann.

Die Funktionskomponente in React ist also eine einfache Funktion, die JSX-Markup zurückgibt,

verwendet, um die Daten auf dem Bildschirm anzuzeigen.

Erstellen einer Klassenkomponente

Um eine Klassenkomponente in React zu erstellen, müssen Sie eine Klasse deklarieren, die von der Basisklasse erbt React.Component. In dieser Klasse definieren wir eine Methode render(), das JSX-Markup zurückgibt.

Beispiel zum Erstellen einer Klassenkomponente:

import React from 'react';class MyComponent extends React.Component

Meine Klassenkomponente

Dies ist ein einfaches Beispiel für eine Klassenkomponente.

);>>export default MyComponent;

In diesem Beispiel ist die Klasse MyComponent erbt von React.Component und enthält eine Methode render(). Innerhalb der Methode render() wir geben das JSX-Markup zurück, das auf der Seite angezeigt wird.

Die Klassenkomponente wird dann mit exportiert export default damit es importiert und in anderen Dateien verwendet werden kann.

Schritt 3: Rendern von Komponenten

Dazu muss die Methode verwendet werden ReactDOM.render().

Die Stammkomponente und das Element werden als Parameter für diese Methode übergeben,

auf dem diese Komponente angezeigt werden soll.

Recommended banner

Das Element zum Anzeigen von Komponenten kann mithilfe der Methode abgerufen werden document.getElementById(),

an das die ID des Elements im HTML-Markup übergeben wird.

Wenn Sie beispielsweise im HTML-Markup ein Element mit einer ID haben "root",

sie können es abrufen und an eine Methode übergeben ReactDOM.render() wie folgt:

const rootElement = document.getElementById('root');

In diesem Beispiel App - dies ist die Stammkomponente, die im Element mit der ID angezeigt wird "root".

Dann nimmt React die Stammkomponente und rendert alle untergeordneten Komponenten rekursiv,

bis Sie den vollständigen Komponentenbaum erstellt haben.

Jede Komponente definiert einen Rückgabewert, der das beschreibt,

was wird auf der Seite angezeigt? Dies kann einfacher Text, HTML-Elemente oder andere Komponenten sein.

Nach dem Rendern der Komponenten zeigt der Browser das Ergebnis im entsprechenden Markupelement an,

den Sie beim Aufruf der Methode angegeben haben ReactDOM.render().

Recommended banner

Lesen Sie auch

Heute im Trend

Gruselgeschichten mit Puppen

Puppen, diese so unschuldigen Spielzeuge, können Macht über unsere Ängste und Phantasien erlangen. Es gibt…