Guía para Reaccionar Componente

Un componente es probablemente el concepto más importante para entender en React. Es uno de los componentes básicos de React que nos permite dividir una interfaz de usuario en ind...

Introducción

Un componente es probablemente el concepto más importante para entender en React. Es uno de los bloques de construcción básicos de React que nos permite dividir una interfaz de usuario en piezas independientes y reutilizables, lo que facilita mucho la tarea de crear interfaces de usuario. Todos estos componentes independientes luego se combinan en un componente principal, que servirá como nuestra interfaz de usuario final.

En esta guía, veremos los componentes y cómo funcionan en React, también veremos cómo pasar datos de un componente a otro usando accesorios.

¿Qué es un componente?

Un componente es un bloque de código reutilizable e independiente que divide la interfaz de usuario en partes más pequeñas en lugar de crear toda la interfaz de usuario en un solo archivo. Los botones, formularios, cuadros de diálogo, etc., pueden expresarse como componentes. Los componentes de React aceptan entradas arbitrarias ("props") y devuelven elementos de React o código JSX que indica lo que se debe representar en la pantalla.

Para demostrar cómo funcionan los componentes, hemos desglosado la interfaz de usuario de una Aplicación Todo de ejemplo en componentes individuales:

Esta aplicación Todo se compone de cuatro componentes diferentes que ayudan a que el código sea más fácil de entender y mantener. Cuando creamos aplicaciones más grandes, podemos terminar con muchos componentes, por lo que es crucial tener un código legible y bien estructurado.

{.icon aria-hidden=“true”}

Nota: La convención ampliamente aceptada establece que todos los nombres de los componentes deben comenzar con una letra mayúscula.

Tipos de componentes en React

En React, existen principalmente dos tipos de componentes: componentes Funcionales y Clase.

Componentes funcionales

Esta es la forma más sencilla de crear un componente, es el primer tipo de componente recomendado en React. Un componente funcional es básicamente una función JavaScript/ES6 que devuelve una sintaxis JavaScript especial llamada JSX o elemento React. La siguiente función es un componente funcional válido que recibe un objeto de propiedades, generalmente llamado props.

1
2
3
function Introduction(props) {
    return <h1>Hello, I am {props.name}</h1>;
}

Alternativamente, también podemos crear un componente funcional usando la notación * función de flecha *:

1
2
3
const Introduction = (props) => {
    return <h1>Hello, I am {props.name}</h1>;
}

{.icon aria-hidden=“true”}

Nota: Esencialmente, esta es solo otra función de JavaScript. Lo que lo diferencia de otras funciones habituales es su valor de retorno: el código con formato JSX (JavaScript XML).

Componentes de clase

La clase de componente es una clase de ES6 que extiende la clase de componente React y debe tener un método render() que devuelva JSX. Acepta accesorios en el constructor si es necesario.

Es el segundo tipo de componente y se usó principalmente porque "state" no se podía usar dentro de componentes funcionales en versiones anteriores de React (anteriores a 16.8). Como resultado, los componentes funcionales solo se usaron para la representación de la interfaz de usuario, mientras que los componentes de clase se usaron para la gestión de datos y algunas operaciones adicionales, como los métodos de ciclo de vida, etc. Sin embargo, con la introducción de React hooks, esto ha cambiado y ahora también podemos usar estados en componentes funcionales.

A continuación, se muestra el mismo componente ‘Introducción’, pero esta vez creado como un componente de clase:

1
2
3
4
5
class Introduction extends React.Component {
    render() {
        return <h1>Hello, I am {this.props.name}</h1>;
    }
}

{.icon aria-hidden=“true”}

Nota: Ahora que hemos creado componentes funcionales y de clase, compare los dos; puede ver que el contenido es esencialmente el mismo.

Uso de componentes en React

Hasta ahora, hemos visto cómo crear un componente funcional o de clase. Ahora, echemos un vistazo a cómo podemos usar estos componentes en un componente principal. Para poder usar un componente más tarde (o en un componente principal), primero debemos exportarlo para poder importarlo en otro lugar:

1
2
3
4
5
const Introduction = (props) => {
    return <h1>Hello, I am {props.name}</h1>;
}

export default Introduction;

Después de importarlo, podemos referirnos a él en el componente principal (en este caso, el componente App):

1
2
3
4
5
6
7
8
9
import Introduction from './Introduction';

const App = () => {
    return (
        <div className="App">
            <Introduction name="John Doe" />
        </div>
    );
}

Pasar datos a través de accesorios a componentes {#pasar datos a través de accesorios a componentes}

Cuando instalamos React usando el comando create-react-app, obtenemos automáticamente un componente funcional en nuestro archivo App.js que sirve como punto de partida para nuestra aplicación. Lo más probable es que la mayoría de nuestros datos residan en el archivo App.js cuando construimos nuestras aplicaciones y, sin duda, querremos pasar estos datos a los nuevos componentes (componentes secundarios). Props, que significa "propiedades", se utilizan para lograr esto.

Este es un concepto importante en React que permite que los componentes se comuniquen entre sí. Los accesorios son de solo lectura, por lo que solo pueden transportar datos en una dirección (de los componentes principales a los secundarios). Los accesorios no permiten que los datos pasen de un elemento secundario a uno principal o de un componente a otro en el mismo nivel.

Ahora vamos a crear un componente Button y luego pasar los nombres de los diferentes botones como accesorios:

1
2
3
4
5
6
7
8
9
const Button = (props) => {
    return (
        <div>
            <button class="btn">{props.name}</button>
        </div>
    );
};

export default Button;

Volvamos al archivo App.js y veamos cómo podemos pasar datos al componente de botón usando accesorios. Todo lo que tenemos que hacer es definir un accesorio en el Componente Botón y asignarle un valor:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import Button from './Button';

const App = () => {
    return (
        <div className="App">
            <h1>Hello World</h1>
            <Button name="Login" />
            <Button name="Logout" />
            <Button name="Sign Up" />
        </div>
    );
};

export default App;

{.icon aria-hidden=“true”}

Nota: Tenemos que importar el componente para que podamos usarlo en el componente principal.

Los accesorios se pueden usar para pasar cualquier tipo de datos, incluidas matrices y objetos, por lo que no hay límite para lo que se pueden usar.

División de una aplicación en componentes

Antes de resumir esta guía, echemos un vistazo a un ejemplo de un componente StudentInfo que comprende los detalles de los estudiantes y los detalles de la puntuación.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const StudentInfo = (props) => {
    return (
        <div className="student">
            <div className="student-info">
                <img
                    className="Avatar"
                    src={props.student.image}
                    alt={props.student.name}
                />
                <div className="student-name-info">
                    <p>{props.student.name}</p>
                    <p>{props.student.userName}</p>
                </div>
            </div>
            <div className="score-details">
                <div className="Comment-text">{props.score}</div>
                <div className="Comment-date">{props.remark}</div>
            </div>
        </div>
    );
};

export default StudentInfo;

Esto toma un objeto estudiante con mucha información (como accesorios) y describe una tarjeta de estudiante para mostrar los detalles del estudiante junto con el puntaje y el comentario del estudiante. Debido al anidamiento, este componente puede ser difícil de cambiar y también es difícil reutilizar partes individuales del mismo.

Extraigamos un componente de él, y esa es la sección StudentInfo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const StudentInfo = (props) => {
    return (
        <div className="student-info">
            <img
                className="Avatar"
                src={props.student.image}
                alt={props.student.name}
            />
            <div className="student-name-info">
                <p>{props.student.name}</p>
                <p>{props.student.userName}</p>
            </div>
        </div>
    );
};

export default StudentInfo;

Ahora podemos simplificar el componente principal para que se vea así:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import StudentInfo from './StudentInfo';

const StudentInfo = (props) => {
    return (
        <div className="student">
            <StudentInfo student="props.student" />
            <div className="score-details">
                <div className="Comment-text">{props.score}</div>
                <div className="Comment-date">{props.remark}</div>
            </div>
        </div>
    );
};

export default StudentInfo;

La extracción de componentes puede parecer aburrida al principio, pero tener una colección de componentes reutilizables nos beneficia en aplicaciones más grandes.

Conclusión

En esta guía hemos podido aprender cómo funcionan los componentes en React, los dos tipos de componentes y cómo pasar datos de un componente a otro usando props.