Componenti sono i blocchi di costruzione dell'applicazione React e hanno un pezzo indipendente di alcune funzionalità che puoi riutilizzare nel front-end del progetto. Il file dei componenti può comprendere le semplici funzioni e le classi JavaScript; Tuttavia, puoi utilizzarli come elementi HTML personalizzati. I componenti sono utilizzati per l'aggiunta di menu, pulsanti o qualsiasi altro contenuto di pagina alla tua reazione.JS Front-end, ed è anche utilizzato per includere il markdown e le informazioni sullo stato.

Questo articolo dimostrerà come farlo creare UN componente In Reagire.js. Quindi iniziamo!

Come creare un componente in react.js

In reazione.JS, i componenti mostrano ciò che vogliamo vedere sulla nostra applicazione React. Un componente di reazione può prendere il "Props" o proprietà come parametri e restituire una gerarchia Visualizza per la visualizzazione dell'utilizzo del metodo di rendering. Il codice aggiunto nel metodo di rendering definirà ciò che vuoi mostrare sullo schermo. Reagire.JS prende il corpo del metodo di rendering e quindi visualizza i risultati in base ad esso. Le applicazioni di reazione possono aggiornare in modo efficiente e quindi rifornire i componenti aggiunti quando i dati cambiano.

Prima di creare un componente nella nostra reazione.Applicazione JS, in primo luogo, ti mostreremo come l'interfaccia della nostra reazione.L'applicazione JS sembra:

A tale scopo, ci sposteremo nella nostra reazione.cartella dell'applicazione JS eseguendo il seguente comando nel terminale:

> CD Mern-Emsystem

A questo punto, devi assicurarti che la tua reazione.L'applicazione JS è in esecuzione sulla porta specificata. In caso contrario, scrivi il comando di seguito per l'avvio del server Web front-end:

> NPM Avvia

Ecco l'interfaccia di base della nostra applicazione del sistema di gestione dei dipendenti:

Ora, apri una nuova finestra del terminale facendo clic sul pulsante "+", che è evidenziato nell'immagine di seguito:

Utilizzeremo la nuova finestra del terminale per l'installazione del framework Bootstrap CSS per facilitare lo stile:

> NPM Installa bootstrap

Nel passaggio successivo, apri il “App.JS " File javascript, situato nel "SRC" Directory:

Ora, importa il "Bootstrap" File CSS aggiungendo le seguenti righe:

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

Premere "Ctrl+S" Per salvare le modifiche aggiunte e quindi creare un nuovo "Componenti" cartella in "SRC" cartella:

Dopo averlo fatto, creeremo un nuovo "Istruzioni.JS " File componente:

Quindi, apri il creato "Istruzioni.JS " File e aggiungi il codice di seguito donati in esso:

La nostra idea è quella di creare un componente personalizzato che visualizzerà un'intestazione, qualche descrizione e un'immagine relativa al nostro sistema di gestione dei dipendenti react.Applicazione JS. A tale scopo, in primo luogo, importeremo il "Reagire" e il suo "Componente" classe e la “EMS.PNG " Immagine, che vogliamo aggiungere a questo componente di istruzioni. IL "Componente" La classe base può essere quindi estesa per la creazione dei componenti richiesti.

IL "Componente" la classe ha varie funzioni che possono essere utilizzate per migliorare la funzionalità del metodo creato e "Render ()" è uno di questi metodi. "Render ()" viene utilizzato per restituire il codice JSX che si desidera visualizzare nel browser:

import react, component da 'react';
importare EMS da './EMS.png ';
Le istruzioni della classe di esportazione estendono il componente
render ()
ritorno(

Progetto Mern dipendente

Questo è un sistema di gestione dei dipendenti

;

)


Esporta istruzioni predefinite;

Dopo aver aggiunto il codice in “Istruzioni.JS ", premere "Ctrl+S" per salvarlo e poi aprire il tuo “App.JS " file:

La tua reazione creata.Il componente JS non sarà utile fino a quando non lo importerà nel tuo “App.JS " File e avvolgi i componenti creati con le staffe angolari.

Qui abbiamo importato il "Istruzioni" componente e aggiunto il componente specificato come "" nel "ritorno()" funzione di App ():

L'importazione reagisce da "react";
Importa "bootstrap/dist/css/bootstrap.min.CSS ";
Importa istruzioni da './componenti/istruzioni ';
function app ()
ritorno (


);

Esporta app predefinita;

Dopo aver importato il "Istruzioni" componente, eseguiremo la nostra reazione.Applicazione JS:

> NPM Avvia

Dall'output, puoi vedere che il nostro "Istruzioni" Il componente sta visualizzando correttamente il contenuto aggiunto:

Conclusione

In reazione.JS, i componenti sono gli elementi autonomi che possono essere riutilizzati in una pagina. Mostrano ciò che vogliamo vedere sulla nostra applicazione React. Puoi anche abbattere applicazioni complesse in sezioni più piccole che possono essere più facili da progettare e gestire con l'aiuto dei componenti. Questo articolo ha dimostrato come farlo creare UN componente nel Reagire.js applicazione. Inoltre, è fornita anche la procedura di creazione e utilizzo di un componente personalizzato.