Componentes en react: desarrollando los bloques del edificio.

¿Qué es un componente?

Los componentes en React son bloques de construcción fundamentales que permiten organizar y reutilizar el código de interfaz de usuario. Los componentes pueden representar cualquier parte de la interfaz de usuario, desde botones y formularios hasta elementos más complejos como barras de navegación o incluso páginas completas. React utiliza una sintaxis similar a HTML llamada JSX (JavaScript XML) para definir la estructura de los componentes.

Creación de un Componente en React

Para crear un componente en React, puedes utilizar una de dos sintaxis: funciones o clases. A continuación, te mostraré cómo crear un componente funcional, que es la forma más moderna y preferida (puedes ver la diferencia entre componentes de clase y componentes funcionales en este post):

import React from 'react';

function MiComponente() {
  return (
    <div>
      <h1>Hola, soy un componente de React</h1>
      <p>Este es un ejemplo de un componente funcional.</p>
    </div>
  );
}

export default MiComponente;

En el código anterior, hemos creado un componente funcional llamado MiComponente. Utilizamos la función function y devolvemos una estructura JSX que representa la interfaz de usuario del componente.

Uso de Componentes en React

Una vez que has creado un componente, puedes usarlo en otras partes de tu aplicación. Por ejemplo, puedes renderizarlo en otro componente o en el punto de entrada de tu aplicación. Aquí tienes un ejemplo de cómo usar MiComponente:

import React from 'react';
import ReactDOM from 'react-dom';
import MiComponente from './MiComponente';

function App() {
  return (
    <div>
      <h1>¡Mi Aplicación con React!</h1>
      <MiComponente />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

En este ejemplo, hemos importado MiComponente y lo hemos utilizado dentro de un componente superior llamado App. Luego, utilizamos ReactDOM para renderizar App en el elemento con el ID ‘root’ en el DOM.

Props en Componentes

Los componentes de React pueden recibir propiedades llamadas «props» que les permiten ser configurados dinámicamente. Por ejemplo, puedes pasar datos o funciones como props a tus componentes para personalizar su comportamiento. Aquí tienes un ejemplo de cómo pasar props a un componente funcional (saber más acerca de props):

function Saludo(props) {
  return <p>Hola, {props.nombre}.</p>;
}

// Uso del componente Saludo
<Saludo nombre="Tecnitium" />

Conclusión:

Los componentes son la base de React y te permiten construir aplicaciones web interactivas y reactivas de manera eficiente. Puedes crear componentes funcionales o de clase, usar props para personalizar su comportamiento y reutilizarlos en toda tu aplicación.

Para exponerlo de manera más clara, podemos ver los componentes como las piezas de lego que usaremos para construir algo, react ofrece facilidades para retirar y/o reutilizar componentes y esta es una de sus grandes virtudes.