ReactJS | Componentes – Juego 2

En nuestro artículo anterior sobre ReactJS | Componentes Tuvimos que discutir componentes, tipos de componentes y cómo renderizar componentes. En este artículo, veremos algunas propiedades más de los componentes.
 

Composición de componentes: ¿Recuerda en nuestro artículo anterior, nuestro primer ejemplo de la página de inicio de GeeksforGeeks que usamos para explicar los componentes? Recordemos lo que hemos dicho, «podemos fusionar todos estos componentes individuales para hacer un componente principal». Esto es lo que llamamos componentes de composición. Ahora crearemos componentes individuales llamados Navbar , Sidebar , ArticleList y los fusionaremos para crear un componente principal llamado App y luego renderizaremos este componente App.
El siguiente código en el archivo index.js explica cómo hacer esto: 

Nombre de archivo- App.js:

import React from 'react';
import ReactDOM from 'react-dom';
 
// Navbar Component
const Navbar=()=>
{
    return <h1>This is Navbar.< /h1>
}
 
// Sidebar Component
const Sidebar=()=> {
    return <h1>This is Sidebar.</h1>
}
 
// Article list Component
const ArticleList=()=>
{
    return <h1>This is Articles List.</h1>
}
 
// App Component
const App=()=>
{
    return(
            <div>
                <Navbar />
                <Sidebar />
                <ArticleList />
            </div>
        );
}
 
ReactDOM.render(
    <App />,
    document.getElementById("root")
);

Producción: 

Puede ver en el resultado anterior que todo funcionó bien y logramos fusionar todos los componentes en una aplicación de un solo componente. 
 

Descomposición de componentes: Descomponer un componente significa descomponer el componente en componentes más pequeños. Hemos hablado de la composición de componentes más pequeños para construir un componente principal desde el principio cuando comenzamos a discutir los componentes repetidamente. Veamos por qué es necesario hacerlo. Supongamos que queremos hacer un componente para un formulario HTML. Digamos que nuestro formulario tendrá dos campos de entrada y un botón de envío. Podemos crear un componente de formulario como se muestra a continuación: 

Nombre de archivo- App.js:

import React from 'react';
import ReactDOM from 'react-dom';
 
const Form=()=>
{
    return (
        <div>
            <input type = "text" placeholder = "Enter Text.." />
            <br />
            <br />
            <input type = "text" placeholder = "Enter Text.." />
            <br />
            <br />
            <button type = "submit">Submit</button>
        </div>
    );
}
 
ReactDOM.render(
    <Form />,
    document.getElementById("root")
);

Producción: 

El código anterior funciona bien para crear un formulario. Pero digamos que ahora necesitamos algún otro formulario con tres campos de entrada. Para hacer esto tendremos que volver a escribir el código completo con tres campos de entrada ahora. Pero, ¿y si hemos desglosado el componente Formulario en dos componentes más pequeños, uno para el campo de entrada y otro para el botón? Esto podría haber aumentado en gran medida la reutilización de nuestro código. Es por eso que se recomienda que React divida un componente en las unidades más pequeñas posibles y luego las fusione para crear un componente principal para aumentar la modularidad y la reutilización del código. En el siguiente código, el componente Formulario se divide en componentes más pequeños Entrada y Botón. 

Nombre de archivo- App.js:

import React from 'react';
import ReactDOM from 'react-dom';
 
// Input field component
const Input=()=>
{
    return(
        <div>
            <input type="text" placeholder="Enter Text.." />
            <br />
            <br />   
        </div>
    );
}
 
// Button Component
const Button=()=>
{
    return <button type = "submit">Submit</button>;   
}
 
// Form component
const Form=()=>
{
    return (
        <div>
            <Input />
            <Input />
            <Button />           
        </div>
    );
}
 
ReactDOM.render(
    <Form />,
    document.getElementById("root")
);

Producción: 

Hasta ahora, hemos trabajado con componentes con solo datos estáticos. Es decir, estamos escribiendo datos directamente dentro de un Componente. ¿Qué pasa si queremos pasar algunos datos a nuestros componentes? React nos permite hacerlo con la ayuda de otra propiedad llamada props . Aprenderemos sobre accesorios en detalle en nuestro próximo artículo.