En React, los componentes son la base del desarrollo de aplicaciones. Permiten dividir la interfaz de usuario en piezas independientes, reutilizables y organizadas. Cada componente se encarga de una parte específica de la UI, lo que facilita el mantenimiento y la ampliación de la aplicación.

¿Qué es un componente?

Un componente en React es una pieza de código que describe qué debe renderizarse en la pantalla. Es como una función que toma entradas (llamadas props) y devuelve elementos React que describen la apariencia de la UI.

Ventajas de usar componentes

• Reutilización: Los componentes pueden ser utilizados múltiples veces en diferentes partes de la aplicación.
• Organización: Dividen la aplicación en piezas pequeñas y manejables.
• Modularidad: Facilitan la separación de responsabilidades y el trabajo en equipo.

Tipos de componentes

React admite dos tipos principales de componentes: funcionales y de clase. En proyectos modernos, los componentes funcionales son la norma gracias a los hooks.

Componentes funcionales

Son funciones de JavaScript que devuelven elementos React. Se utilizan para componentes simples y modernos.

Ejemplo:

import React from 'react';

function Greeting(props) {
  return <h1>Hola, {props.name}</h1>;
}

export default Greeting;

Características:

• Son más sencillos y fáciles de leer.
• Utilizan hooks para manejar estado y efectos secundarios.

Uso:

import Greeting from './Greeting';

function App() {
  return <Greeting name="Juan" />;
}

Componentes de clase