Komponenten sind die Bausteine ​​der React-Anwendung und verfügen über ein unabhängiges Stück von Funktionen, die Sie in Ihrem Projekt Front-End wiederverwenden können. Die Komponentendatei kann die einfachen JavaScript -Funktionen und Klassen umfassen. Sie können sie jedoch als angepasste HTML -Elemente verwenden. Komponenten werden zum Hinzufügen von Menüs, Schaltflächen oder anderen Seiteninhalten zu Ihrem React verwendet.JS Front-End und es wird auch verwendet, um die Markdown- und Statusinformationen aufzunehmen.

Diese Beschreibung zeigt, wie es geht erstellen A Komponente In Reagieren.JS. So lass uns anfangen!

So erstellen Sie eine Komponente in React.JS

In React.JS, Komponenten zeigen an, was wir in unserer Reaktionsanwendung sehen möchten. Eine React -Komponente kann die nehmen "Requisiten" oder Eigenschaften als Parameter und senden Sie eine Ansichtshierarchie zum Anzeigen mit der Render -Methode zurück. Der hinzugefügte Code in der Render -Methode definiert, was Sie auf dem Bildschirm anzeigen möchten. Reagieren.JS nimmt den Körper der Render -Methode an und zeigt dann die Ergebnisse darauf an. React-Anwendungen können die hinzugefügten Komponenten effizient aktualisieren und dann erneut übertragen, wenn sich die Daten ändern.

Vor dem Erstellen einer Komponente in unserem Reaktieren.JS -Anwendung zeigen Ihnen zunächst, wie die Schnittstelle unseres React.JS -Anwendung sieht aus wie:

Zu diesem Zweck werden wir in unser Reaktieren einsteigen.JS -Anwendungsordner durch Ausführung des folgenden Befehls im Terminal:

> CD Mern-Em-System

Zu diesem Zeitpunkt müssen Sie sicherstellen, dass Ihr Reagieren reagiert.Die JS -Anwendung wird auf dem angegebenen Port ausgeführt. Wenn dies nicht der Fall ist, schreiben Sie den folgenden Befehl zum Starten Ihres Front-End-Webservers auf:

> NPM Start

Hier ist die grundlegende Schnittstelle unserer Mitarbeiterverwaltungssystemanwendung:

Öffnen Sie nun ein neues Terminalfenster, indem Sie auf die Schaltfläche „+“ klicken, die im folgenden Bild hervorgehoben ist:

Wir werden das neue Terminalfenster verwenden, um das Bootstrap CSS -Framework zu installieren, um das Styling zu vereinfachen:

> NPM Bootstrap installieren

Öffnen Sie im nächsten Schritt die „App.JS ” JavaScript -Datei, befindet sich in der "SRC" Verzeichnis:

Importieren Sie nun die "Bootstrap" CSS -Datei durch Hinzufügen der folgenden Zeilen:

Importieren Sie "Bootstrap/Dist/CSS/Bootstrap.Mindest.CSS ";

Drücken Sie "Strg+S" Um die hinzugefügten Änderungen zu speichern und dann eine neue zu erstellen "Komponenten" Ordner in der "SRC" Ordner:

Danach werden wir eine neue erstellen "Anweisungen.JS ” Komponentendatei:

Öffnen Sie dann die Erstellten "Anweisungen.JS ” Datei und fügen Sie den untergegebenen Code hinzu:

Unsere Idee ist es, eine benutzerdefinierte Komponente zu erstellen, die eine Überschrift, eine Beschreibung und ein Bild in Bezug auf unser Mitarbeiterverwaltungssystem anzeigt.JS -Anwendung. Zu diesem Zweck werden wir zunächst die importieren "Reagieren" und sein "Komponente" Klasse und die „EMS.PNG ” Bild, das wir dieser Anweisungskomponente hinzufügen möchten. Der "Komponente" Die Basisklasse kann dann erweitert werden, um die erforderlichen Komponenten zu erstellen.

Der "Komponente" Die Klasse hat verschiedene Funktionen, die verwendet werden können, um die Funktionalität der erstellten Methode zu verbessern und "machen()" ist eine solche Methode. "machen()" Wird verwendet, um den JSX -Code zurückzugeben, den Sie im Browser anzeigen möchten:

reag import, component aus 'react';
EMS aus 'importieren'./EMS.png ';
Anweisungen der Exportklasse erweitern die Komponente
render ()
zurückkehren(

Angestellter Mern -Projekt

Dies ist ein Mitarbeiterverwaltungssystem

;

)


Standardanweisungen exportieren;

Nach dem Hinzufügen des Code in die "Anweisung.JS ”, Drücken Sie "Strg+S" um es zu speichern und dann Ihre zu öffnen „App.JS ” Datei:

Ihr erstellter React.Die JS -Komponente wird nicht nützlich, bis Sie es in Ihre importieren „App.JS ” Datei und wickeln Sie die erstellten Komponenten mit den Winkelklammern ein und wickeln Sie die erstellten Komponenten ein.

Hier haben wir das importiert "Anweisungen" Komponente und fügte die angegebene Komponente als hinzu "" im "zurückkehren()" Funktion der App ():

Import reagieren aus "reagieren";
Importieren Sie "Bootstrap/Dist/CSS/Bootstrap.Mindest.CSS ";
Anweisungen von 'importieren'./Komponenten/Anweisungen ';
Funktion App ()
zurückkehren (


);

Standard -Standard -App exportieren;

Nach dem Import der "Anweisungen" Komponente, wir werden unseren React ausführen.JS -Anwendung:

> NPM Start

Aus der Ausgabe können Sie sehen, dass unsere "Anweisungen" Die Komponente zeigt erfolgreich den hinzugefügten Inhalt an:

Abschluss

In React.JS, Komponenten sind die in sich geschlossenen Elemente, die über eine Seite wiederverwendet werden können. Sie zeigen, was wir in unserer Reaktionsanwendung sehen möchten. Sie können auch komplexe Anwendungen in kleinere Abschnitte unterteilen, die mit Hilfe von Komponenten einfacher zu entwerfen und verwalten zu werden können. Dieser Artikel zeigte, wie es geht erstellen A Komponente im Reagieren.JS Anwendung. Darüber hinaus wird Ihnen auch das Erstellen und Verwenden einer benutzerdefinierten Komponente zur Verfügung gestellt.