Komponenter er byggesteinene i React-applikasjonen og har et uavhengig stykke av en viss funksjonalitet som du kan gjenbruke i prosjektet Front-End. Komponentfilen kan omfatte de enkle JavaScript -funksjonene og klassene; Du kan imidlertid bruke dem som tilpassede HTML -elementer. Komponenter brukes til å legge til menyer, knapper eller annet sideinnhold for å reagere.JS frontend, og den brukes også til å inkludere markdown og statsinformasjon.

Denne oppskrivningen vil demonstrere hvordan skape en komponent i Reagere.JS. Så la oss starte!

Hvordan lage en komponent i React.JS

I reagerer.JS, komponenter viser det vi vil se på React -applikasjonen vår. En reagert komponent kan ta "Rekvisitter" eller egenskaper som parametere og returner et visningshierarki for å vise ved hjelp av gjengivelsesmetoden. Den ekstra koden i gjengivelsesmetoden vil definere hva du vil vise på skjermen. Reagere.JS tar kroppen til gjengivelsesmetoden og viser deretter resultatene i henhold til den. React-applikasjoner kan oppdatere effektivt og deretter gjengi de ekstra komponentene når dataene endres.

Før du oppretter en komponent i React.JS -applikasjonen, for det første vil vi vise deg hvordan grensesnittet til react.JS -applikasjonen ser ut som:

For dette formålet vil vi bevege oss inn i React.JS -applikasjonsmappe ved å utføre følgende kommando i terminalen:

> CD Mern-Emsystem

På dette tidspunktet må du sørge for at du reagerer.JS -applikasjonen kjører på den spesifiserte porten. Hvis det ikke er det, så skriv ut den undergitte kommandoen for å starte front-end webserver:

> NPM Start

Her er det grunnleggende grensesnittet til vår ansattesystemsapplikasjon:

Åpne nå et nytt terminalvindu ved å klikke på "+" -knappen, som er uthevet i det undergitte bildet under:

Vi bruker det nye terminalvinduet for å installere Bootstrap CSS -rammeverket for å gjøre stylingen enklere:

> npm installer bootstrap

I neste trinn, åpne opp “App.JS ” JavaScript -fil, som ligger i “SRC” Katalog:

Importer nå "Støvelhempe" CSS -fil ved å legge til følgende linjer:

Importer "bootstrap/dist/css/bootstrap.min.CSS ";

trykk “Ctrl+s” For å lagre de ekstra endringene og deretter opprette en ny “Komponenter” mappe i “SRC” mappe:

Etter å ha gjort det, vil vi lage en ny "Bruksanvisning.JS ” Komponentfil:

Åpne deretter den opprettet opp "Bruksanvisning.JS ” fil og legg til den undergitte koden i den:

Vår ide er å lage en tilpasset komponent som vil vise en overskrift, noen beskrivelse og et bilde relatert til vårt ansattes styringssystem React.JS -applikasjon. For dette formålet vil vi for det første importere "Reagere" og dets "Komponent" klasse og “EMS.PNG ” Bilde, som vi vil legge til denne instruksjonskomponenten. De "Komponent" Baseklasse kan deretter utvides for å lage de nødvendige komponentene.

De "Komponent" Klasse har forskjellige funksjoner som kan brukes til å forbedre funksjonaliteten til den opprettede metoden og “Render ()” er en slik metode. “Render ()” brukes til å returnere JSX -koden du vil se i nettleseren:

Importreact, komponent fra 'React';
Importer ems fra './EMS.png ';
Eksportklasseinstruksjoner utvider komponenten
render ()
komme tilbake(

Ansatt Mern -prosjekt

Dette er et ansattes styringssystem

;

)


eksportere standardinstruksjoner;

Etter å ha lagt til koden i "Instruksjon.JS ”, trykk “Ctrl+s” for å lagre den og deretter åpne opp din “App.JS ” fil:

Din opprettede reagerer.JS -komponent vil ikke være til nytte før du importerer den til din “App.JS ” fil og pakk de opprettede komponentene med vinkelbrakettene.

Her har vi importert "Bruksanvisning" komponent og lagt til den spesifiserte komponenten som "" i "komme tilbake()" funksjon av App ():

Importreakt fra 'React';
Importer "bootstrap/dist/css/bootstrap.min.CSS ";
Importer instruksjoner fra './komponenter/instruksjoner ';
funksjon app ()
komme tilbake (


);

Eksporter standardapp;

Etter å ha importert "Bruksanvisning" komponent, vi vil kjøre react.JS -applikasjon:

> NPM Start

Fra utgangen kan du se at vår "Bruksanvisning" Komponenten viser vellykket innholdet:

Konklusjon

I reagerer.JS, komponenter er de selvstendige elementene som kan brukes på nytt på en side. De viser det vi vil se på React -applikasjonen vår. Du kan også dele opp komplekse applikasjoner i mindre seksjoner som kan være lettere å designe og administrere ved hjelp av komponenter. Denne artikkelen demonstrerte hvordan skape en komponent i Reagere.JS applikasjon. Videre er prosedyren for å opprette og bruke en tilpasset komponent også gitt deg.