Componentes son los bloques de construcción de la aplicación React y tienen una pieza independiente de alguna funcionalidad que puede reutilizar en su proyecto front-end. El archivo de componentes puede comprender las funciones y clases de JavaScript simples; Sin embargo, puede utilizarlos como elementos HTML personalizados. Los componentes se utilizan para agregar menús, botones o cualquier otro contenido de página a su reaccionamiento.JS Front-end, y también se utiliza para incluir la información de Markdown y State.

Este artículo demostrará cómo crear a componente en Reaccionar.js. Entonces, comencemos!

Cómo crear un componente en React.js

En reaccionar.JS, los componentes muestran lo que queremos ver en nuestra aplicación React. Un componente React puede tomar el "accesorios" o propiedades como parámetros y devolver una jerarquía de vista para mostrar utilizando el método de renderizado. El código agregado en el método Render definirá lo que desea mostrar en la pantalla. Reaccionar.JS toma el cuerpo del método de renderizado y luego muestra los resultados de acuerdo con él. Las aplicaciones react pueden actualizar de manera eficiente y luego volver a renderizar los componentes agregados cuando cambian los datos.

Antes de crear un componente en nuestro React.Aplicación JS, en primer lugar, le mostraremos cómo la interfaz de nuestra reaccionamiento.La aplicación JS parece:

Para este propósito, nos moveremos a nuestro reaccionamiento.Carpeta de aplicación JS ejecutando el siguiente comando en el terminal:

> CD MERN-Emsystem

En este punto, debes asegurarte de que reaccione.La aplicación JS se ejecuta en el puerto especificado. Si no es así, escriba el comando otorgado a continuación para iniciar su servidor web front-end:

> Inicio de NPM

Aquí está la interfaz básica de la aplicación de nuestro sistema de gestión de empleados:

Ahora, abra una nueva ventana de terminal haciendo clic en el botón "+", que se resalta en la imagen dividida a continuación:

Utilizaremos la nueva ventana de terminal para instalar el marco Bootstrap CSS para facilitar el estilo:

> Bootstrap de instalación de NPM

En el siguiente paso, abra el "Aplicación.JS " Archivo JavaScript, ubicado en el "SRC" directorio:

Ahora, importe el "oreja" Archivo CSS agregando las siguientes líneas:

importar "bootstrap/dist/css/bootstrap.mínimo.CSS ";

Prensa "Ctrl+S" Para guardar los cambios adicionales y luego crear un nuevo "Componentes" carpeta en el "SRC" carpeta:

Después de hacerlo, crearemos un nuevo "Instrucciones.JS " Archivo de componentes:

Luego, abra el creado "Instrucciones.JS " Archivo y agregue el código dado a continuación:

Nuestra idea es crear un componente personalizado que muestre un encabezado, alguna descripción y una imagen relacionada con nuestro sistema de gestión de empleados reaccione.aplicación JS. Para este propósito, en primer lugar, importaremos el "Reaccionar" y es "Componente" clase y el "EMS.PNG " Imagen, que queremos agregar a este componente de instrucciones. El "Componente" La clase base puede extenderse para crear los componentes requeridos.

El "Componente" La clase tiene varias funciones que se pueden utilizar para mejorar la funcionalidad del método creado y "prestar()" es uno de esos métodos. "prestar()" se usa para devolver el código JSX que desea ver en el navegador:

importar react, componente de 'react';
importar EMS de './EMS.png ';
Las instrucciones de la clase de exportación extienden el componente
prestar()
devolver(

Proyecto MERN de empleados

Este es un sistema de gestión de empleados

;

)


Exportar instrucciones predeterminadas;

Después de agregar el código en el "Instrucción.JS ", prensa "Ctrl+S" para guardarlo y luego abrir su "Aplicación.JS " archivo:

Tu creado reaccionando.El componente JS no será de uso hasta que lo importe a su "Aplicación.JS " Archivo y envuelva los componentes creados con los soportes de ángulo.

Aquí hemos importado el "Instrucciones" componente y agregado el componente especificado como "" en el "devolver()" función del Aplicación ():

importar reaccionar de 'reaccionar';
importar "bootstrap/dist/css/bootstrap.mínimo.CSS ";
Importar instrucciones de './componentes/instrucciones ';
función app ()
devolver (


);

Exportar aplicación predeterminada;

Después de importar el "Instrucciones" componente, ejecutaremos nuestro reaccionamiento.Aplicación JS:

> Inicio de NPM

Desde la salida, puede ver que nuestro "Instrucciones" El componente muestra correctamente el contenido agregado:

Conclusión

En reaccionar.JS, los componentes son los elementos autónomos que se pueden reutilizar en una página. Muestran lo que queremos ver en nuestra aplicación React. También puede desglosar aplicaciones complejas en secciones más pequeñas que pueden ser más fáciles de diseñar y administrar con la ayuda de componentes. Este artículo demostró cómo crear a componente en el Reaccionar.js solicitud. Además, el procedimiento de crear y usar un componente personalizado también se le proporciona.