składniki są elementami składowymi aplikacji React i mają niezależną funkcję, którą można ponownie wykorzystać w swoim projekcie. Plik komponentu może zawierać proste funkcje i klasy JavaScript; Możesz jednak wykorzystać je jako dostosowane elementy HTML. Komponenty są wykorzystywane do dodawania menu, przycisków lub dowolnej innej zawartości strony do React.JS Front-end, a także jest używany do włączenia informacji o znaczniku i stanu.

Ten zapis pokaże, jak to zrobić tworzyć A część W Reagować.JS. A więc zacznijmy!

Jak utworzyć komponent w React.JS

W React.JS, komponenty wyświetlają to, co chcemy zobaczyć w naszej aplikacji React. Komponent reagujący może wziąć „Rekwizyty” lub właściwości jako parametry i zwróć hierarchię widoku do wyświetlania za pomocą metody render. Dodany kod w metodzie render określi, co chcesz pokazać na ekranie. Reagować.JS przyjmuje ciało metody renderowania, a następnie wyświetla wyniki zgodnie z nią. Aplikacje React mogą wydajnie aktualizować, a następnie ponownie renderować dodane komponenty, gdy dane zmieniają się.

Przed utworzeniem komponentu w naszym React.Aplikacja JS, po pierwsze, pokażemy Ci, w jaki sposób interfejs naszej React.Aplikacja JS wygląda jak:

W tym celu przejdziemy do naszej reakcji.Folder aplikacji JS poprzez wykonanie następującego polecenia w terminalu:

> CD Mern-Imsystem

W tym momencie musisz się upewnić, że reaguje.Aplikacja JS działa na określonym porcie. Jeśli tak nie jest, napisz do uruchomienia serwera WWW na front-end: zapisz poniżej serwera WWW:

> start npm

Oto podstawowy interfejs naszej aplikacji systemu zarządzania pracownikami:

Teraz otwórz nowe okno terminala, klikając przycisk „+”, który jest podświetlony na poniższym obrazie:

Wykorzystamy nowe okno terminala do instalacji frameworka Bootstrap CSS do ułatwienia stylizacji:

> NPM instalacja bootstrap

W następnym kroku otwórz „Aplikacja.JS ” Plik JavaScript, znajdujący się w „SRC” informator:

Teraz zaimportuj „Bootstrap” Plik CSS, dodając następujące wiersze:

import ”bootstrap/dist/css/bootstrap.min.CSS ”;

Naciskać „Ctrl+S” Aby zapisać dodane zmiany, a następnie utworzyć nowy "Składniki" folder w „SRC” teczka:

Po zrobieniu tego stworzymy nowy "Instrukcje.JS ” plik komponentu:

Następnie otwórz stworzenie "Instrukcje.JS ” Plik i dodaj do niego kod poniżej:

Naszym pomysłem jest utworzenie niestandardowego komponentu, który wyświetli nagłówek, pewien opis i obraz związany z naszym systemem zarządzania pracownikami.Aplikacja JS. W tym celu po pierwsze, zaimportujemy "Reagować" i jego "Część" klasa i „EMS.PNG ” obraz, który chcemy dodać do tego komponentu instrukcji. "Część" Klasa podstawowa można następnie rozszerzyć do tworzenia wymaganych komponentów.

"Część" klasa ma różne funkcje, które można wykorzystać w celu zwiększenia funkcjonalności stworzonej metody i "renderowanie()" jest jedną z takich metod. "renderowanie()" służy do zwracania kodu JSX, który chcesz wyświetlić w przeglądarce:

import React, komponent z „react”;
importować EMS z './EMS.png ';
Instrukcje klasy eksportu rozszerza komponent
renderowanie()
powrót(

Pracownik Mern Project

To jest system zarządzania pracownikami

;

)


Domyślne instrukcje eksportu;

Po dodaniu kodu w "Instrukcja.JS ”, naciskać „Ctrl+S” Aby go zapisać, a następnie otwórz „Aplikacja.JS ” plik:

Twoja utworzona reakcja.Komponent JS nie będzie przydatny, dopóki nie zaimportujesz go do swojego „Aplikacja.JS ” Złóż i opakuj utworzone komponenty za pomocą nawiasów kątowych.

Tutaj zaimportowaliśmy "Instrukcje" komponent i dodano określony komponent jako „” w "powrót()" funkcja App ():

Import reaguje z „React”;
import ”bootstrap/dist/css/bootstrap.min.CSS ”;
importować instrukcje z './komponenty/instrukcje ”;
funkcja app ()
powrót (


);

Domyślna aplikacja eksportu;

Po zaimportowaniu "Instrukcje" komponent, uruchomimy naszą React.Aplikacja JS:

> start npm

Z wyjścia widać, że nasz "Instrukcje" Komponent z powodzeniem wyświetla dodaną treść:

Wniosek

W React.JS, komponenty to samodzielne elementy, które można ponownie wykorzystać na stronie. Wyświetlają to, co chcemy zobaczyć w naszej aplikacji React. Możesz także rozbić złożone aplikacje na mniejsze sekcje, które mogą być łatwiejsze do projektowania i zarządzania za pomocą komponentów. W tym artykule pokazano, jak to zrobić tworzyć A część w Reagować.JS aplikacja. Ponadto dostarczana jest również procedura tworzenia i używania niestandardowego komponentu.