Volver a la página principal
lunes 12 agosto 2024
24

Cómo crear un componente en React

React es una de las bibliotecas de JavaScript más populares para construir interfaces de usuario. Una de sus principales características es la capacidad de dividir la UI en componentes reutilizables. En este artículo, te mostraremos cómo crear un componente en React, desde la estructura básica hasta cómo integrarlo en tu aplicación.

¿Qué es un Componente en React?

Un componente en React es una pieza reutilizable de la interfaz de usuario. Puede ser tan pequeño como un botón o tan grande como una página completa. Los componentes permiten dividir la UI en partes más manejables, facilitando el desarrollo y la escalabilidad de la aplicación.

React ofrece dos tipos principales de componentes:

1. Componentes de función: Son funciones de JavaScript que retornan elementos de React. Son los más utilizados en las versiones modernas de React.

2. Componentes de clase: Son clases de ES6 que extienden de React.Component y tienen un método render() que retorna elementos de React. Aunque siguen siendo válidos, los componentes de clase son menos comunes hoy en día.

Paso 1: Crear un Componente de Función Básico

Comencemos creando un componente de función básico. Este componente será un simple saludo que recibe un nombre como propiedad (prop) y lo muestra en la pantalla.

1.1. Estructura Básica del Componente

Para crear un componente en React, sigue estos pasos:

1. Crea un archivo para el componente: Dentro de la carpeta src/ de tu proyecto, crea un archivo llamado Saludo.js.

2. Escribe el código del componente: 

import React from 'react';

function Saludo({ nombre }) {
  return (
    <div>
      <h1>Hola, {nombre}!</h1>
    </div>
  );
}

export default Saludo;

En este ejemplo:

  • import React from 'react'; importa la biblioteca React.
  • function Saludo({ nombre }) define el componente como una función que recibe props. Aquí estamos usando la desestructuración para acceder directamente al prop nombre.
  • export default Saludo; exporta el componente para que pueda ser utilizado en otros archivos.

1.2. Usar el Componente en tu Aplicación

Ahora que has creado el componente Saludo, puedes usarlo en otro componente, como App.js: 

import React from 'react';
import Saludo from './Saludo';

function App() {
  return (
    <div className="App">
      <Saludo nombre="Juan" />
      <Saludo nombre="Ana" />
    </div>
  );
}

export default App;

Este código renderiza dos instancias del componente Saludo, cada una con un nombre diferente. Cuando ejecutes la aplicación, verás "Hola, Juan!" y "Hola, Ana!" en la pantalla.

Paso 2: Crear un Componente de Clase (Opcional)

Aunque los componentes de función son la norma en React moderno, aún es útil saber cómo crear un componente de clase, especialmente si estás trabajando en proyectos más antiguos.

2.1. Estructura Básica del Componente de Clase

Aquí te mostramos cómo escribir un componente de clase:

1. Crea un archivo para el componente: Crea un archivo llamado SaludoClase.js en la carpeta src/.

2. Escribe el código del componente: 

import React, { Component } from 'react';

class SaludoClase extends Component {
  render() {
    return (
      <div>
        <h1>Hola, {this.props.nombre}!</h1>
      </div>
    );
  }
}

export default SaludoClase;

En este ejemplo:

  • import React, { Component } from 'react'; importa React y la clase Component.
  • class SaludoClase extends Component define el componente como una clase que extiende Component.
  • this.props.nombre accede al prop nombre que se pasa al componente.

2.2. Usar el Componente de Clase

Puedes utilizar este componente de la misma manera que utilizaste el componente de función en App.js: 

import React from 'react';
import SaludoClase from './SaludoClase';

function App() {
  return (
    <div className="App">
      <SaludoClase nombre="Carlos" />
      <SaludoClase nombre="Lucía" />
    </div>
  );
}

export default App;

Este código renderizará "Hola, Carlos!" y "Hola, Lucía!" en la pantalla.

Paso 3: Añadir Estilos a un Componente

Puedes añadir estilos a tus componentes de varias maneras en React. Una de las formas más comunes es utilizando archivos CSS.

3.1. Crear un Archivo CSS

1. Crea un archivo CSS: Crea un archivo llamado Saludo.css en la carpeta src/.

2. Escribe los estilos: 

.saludo {
  color: blue;
  font-size: 24px;
  text-align: center;
}

3.2. Importar y Aplicar los Estilos

Ahora, importa este archivo CSS en tu componente y aplica la clase saludo: 

import React from 'react';
import './Saludo.css';

function Saludo({ nombre }) {
  return (
    <div className="saludo">
      <h1>Hola, {nombre}!</h1>
    </div>
  );
}

export default Saludo;

Al ejecutar tu aplicación, el texto "Hola, [nombre]!" aparecerá en azul, centrado y con un tamaño de fuente de 24px.

Paso 4: Manejar el Estado en un Componente

El estado es una característica clave en React que permite que los componentes manejen y reaccionen a cambios en los datos.

4.1. Usar el Hook useState en Componentes de Función

Para manejar el estado en un componente de función, usa el hook useState: 

import React, { useState } from 'react';

function Contador() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Clic aquí
      </button>
    </div>
  );
}

export default Contador;

Aquí:

  • useState(0) inicializa el estado count con el valor 0.
  • setCount es la función que actualiza el estado.

4.2. Usar el Estado en un Componente de Clase

Si estás trabajando con un componente de clase, el estado se maneja de una manera diferente: 

import React, { Component } from 'react';

class ContadorClase extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <p>Has hecho clic {this.state.count} veces</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Clic aquí
        </button>
      </div>
    );
  }
}

export default ContadorClase;

En este ejemplo:

  • this.state es donde se almacena el estado.
  • this.setState actualiza el estado.

Conclusión

Crear componentes en React es fundamental para construir aplicaciones web modulares, reutilizables y fáciles de mantener. Ya sea que utilices componentes de función o de clase, React te ofrece la flexibilidad y el poder necesarios para construir interfaces de usuario dinámicas y complejas. Ahora que has aprendido a crear y utilizar componentes, puedes seguir explorando las capacidades de React para desarrollar aplicaciones más sofisticadas. ¡Feliz codificación!

Etiquetas:
react desarrollo web
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer