5.4--34. Nuestro primer Componente en React JS

Nuestro Primer Componente en React JS

https://codesandbox.io/p/sandbox/h8rt93

¡Ya tenemos nuestra aplicación de React levantada y abierta en nuestro editor de código! 🎉

Ahora vamos a crear nuestro primer componente y aprenderemos cómo estructurarlo correctamente, nombrarlo y añadirlo a nuestra aplicación.

Estructura de un Componente

1. Ubicación del Componente

  • Todo componente debe ir en la carpeta src.

  • Es una buena práctica crear una subcarpeta llamada components dentro de src para organizar mejor nuestros componentes.

2. Nombre del Componente

  • ¡Siempre debe empezar con mayúscula!
    ✅ HolaMundo.js
    ❌ holaMundo.js (incorrecto)

3. Estructura Básica

Un componente en React consta de tres partes principales:

a) Importaciones

jsx
import React from 'react';

Aquí importamos librerías, estilos, imágenes u otros componentes.

b) Función del Componente

jsx
function HolaMundo() {
  return (
    <div>
      <h1>Hola Mundo</h1>
      <h2>Bienvenido a React</h2>
    </div>
  );
}

  • La función debe tener el mismo nombre que el componente (por convención).

  • return es obligatorio y debe devolver un solo elemento padre (puedes usar <div> o <Fragment>).

c) Exportación

jsx
export default HolaMundo;

  • Permite que el componente sea reutilizable en otros archivos.

Cómo Usar el Componente

Para incluir nuestro componente en App.js:

  1. Importamos el componente:

jsx
import HolaMundo from './components/HolaMundo';

  1. Lo usamos como etiqueta JSX:

jsx
function App() {
  return (
    <div>
      <HolaMundo />
    </div>
  );
}

Reglas Importantes

🔹 Solo un elemento padre en el return:
Si necesitas devolver múltiples elementos, envuélvelos en un <div> o <Fragment> (<> </>).

🔹 Exportación por defecto (export default):
Solo puede haber uno por archivo, pero puedes exportar otros componentes internos con export normal.

🔹 Los nombres de componentes siempre en mayúscula.

Ejemplo con Múltiples Componentes

Si creamos otro componente (AdiosMundo.js):

jsx
import React from 'react';

function AdiosMundo() {
  return <h3>Adiós Mundo</h3>;
}

export default AdiosMundo;

Y lo usamos en App.js:

jsx
import HolaMundo from './components/HolaMundo';
import AdiosMundo from './components/AdiosMundo';

function App() {
  return (
    <div>
      <HolaMundo />
      <AdiosMundo />
    </div>
  );
}

¡Y listo! 🚀 Ahora ya sabes cómo crear y usar componentes en React. En próximos posts profundizaremos en props, estados y más.

¿Tienes dudas? ¡Déjalas en los comentarios! 👇

 Creación y Uso de Componentes en React

📋 Tabla de Contenidos

  1. ¿Qué son los Componentes?

  2. Tipos de Componentes

  3. Creación de Componentes

  4. Props

  5. Estado

  6. Ciclo de Vida

  7. Eventos

  8. Composición de Componentes

  9. Ejemplo Práctico

🧩 ¿Qué son los Componentes?

Los componentes son bloques de construcción fundamentales en React. Son piezas reutilizables de código que definen cómo debe verse y comportarse una parte de la interfaz de usuario.

jsx
// Un componente simple
function Saludo() {
  return <h1>¡Hola Mundo!</h1>;
}

🔧 Tipos de Componentes

1. Componentes Funcionales (Recomendados)

jsx
// Componente funcional con función regular
function MiComponente() {
  return <div>Hola desde componente funcional</div>;
}

// Componente funcional con arrow function
const MiComponente = () => {
  return <div>Hola desde componente funcional</div>;
};

2. Componentes de Clase (Legacy)

jsx
import React, { Component } from 'react';

class MiComponente extends Component {
  render() {
    return <div>Hola desde componente de clase</div>;
  }
}

🚀 Creación de Componentes

Estructura Básica de un Componente

jsx
// 1. Importar React (necesario en versiones anteriores a React 17)
import React from 'react';

// 2. Definir el componente
const MiComponente = () => {
  // 3. Lógica del componente aquí
  
  // 4. Retornar JSX
  return (
    <div className="mi-componente">
      <h2>Mi Primer Componente</h2>
      <p>¡Funciona correctamente!</p>
    </div>
  );
};

// 5. Exportar el componente
export default MiComponente;

Uso del Componente

jsx
import MiComponente from './MiComponente';

function App() {
  return (
    <div>
      <MiComponente />
      <MiComponente />
      <MiComponente />
    </div>
  );
}

📤 Props (Propiedades)

Las props permiten pasar datos de un componente padre a un componente hijo.

Componente con Props

jsx
// Componente que recibe props
const TarjetaUsuario = ({ nombre, edad, email }) => {
  return (
    <div className="tarjeta-usuario">
      <h3>{nombre}</h3>
      <p>Edad: {edad}</p>
      <p>Email: {email}</p>
    </div>
  );
};

// Uso del componente con props
function App() {
  return (
    <div>
      <TarjetaUsuario 
        nombre="Ana García" 
        edad={28} 
        email="ana@ejemplo.com" 
      />
      <TarjetaUsuario 
        nombre="Carlos López" 
        edad={32} 
        email="carlos@ejemplo.com" 
      />
    </div>
  );
}

Props con Valores por Defecto

jsx
const Boton = ({ texto, color = "blue", tamaño = "medio" }) => {
  const estilos = {
    padding: tamaño === "grande" ? "15px 30px" : "10px 20px",
    backgroundColor: color,
    color: "white",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer"
  };

  return <button style={estilos}>{texto}</button>;
};

// Uso
<Boton texto="Click aquí" />
<Boton texto="Grande" color="red" tamaño="grande" />

⚡ Estado (useState Hook)

El estado permite que los componentes almacenen y manejen datos que pueden cambiar.

jsx
import React, { useState } from 'react';

const Contador = () => {
  // useState retorna un array: [valorActual, funciónParaActualizar]
  const [contador, setContador] = useState(0);

  const incrementar = () => {
    setContador(contador + 1);
  };

  const decrementar = () => {
    setContador(contador - 1);
  };

  const resetear = () => {
    setContador(0);
  };

  return (
    <div className="contador">
      <h2>Contador: {contador}</h2>
      <button onClick={incrementar}>+</button>
      <button onClick={decrementar}>-</button>
      <button onClick={resetear}>Reset</button>
    </div>
  );
};

🔄 Ciclo de Vida (useEffect Hook)

useEffect permite ejecutar código en diferentes fases del ciclo de vida del componente.

jsx
import React, { useState, useEffect } from 'react';

const Reloj = () => {
  const [hora, setHora] = useState(new Date());

  // useEffect se ejecuta después de cada render
  useEffect(() => {
    const intervalo = setInterval(() => {
      setHora(new Date());
    }, 1000);

    // Función de limpieza (se ejecuta al desmontar el componente)
    return () => clearInterval(intervalo);
  }, []); // Array de dependencias vacío = se ejecuta solo una vez

  return (
    <div>
      <h2>Hora actual: {hora.toLocaleTimeString()}</h2>
    </div>
  );
};

🎯 Manejo de Eventos

jsx
const FormularioContacto = () => {
  const [formulario, setFormulario] = useState({
    nombre: '',
    email: '',
    mensaje: ''
  });

  // Manejar cambios en los inputs
  const manejarCambio = (e) => {
    const { name, value } = e.target;
    setFormulario(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  // Manejar envío del formulario
  const manejarEnvio = (e) => {
    e.preventDefault();
    console.log('Datos del formulario:', formulario);
    // Aquí iría la lógica para enviar los datos
  };

  return (
    <form onSubmit={manejarEnvio}>
      <div>
        <label>Nombre:</label>
        <input
          type="text"
          name="nombre"
          value={formulario.nombre}
          onChange={manejarCambio}
        />
      </div>
      
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formulario.email}
          onChange={manejarCambio}
        />
      </div>
      
      <div>
        <label>Mensaje:</label>
        <textarea
          name="mensaje"
          value={formulario.mensaje}
          onChange={manejarCambio}
        />
      </div>
      
      <button type="submit">Enviar</button>
    </form>
  );
};

🧱 Composición de Componentes

La composición permite crear componentes complejos a partir de componentes simples.

jsx
// Componentes pequeños y reutilizables
const Cabecera = ({ titulo }) => <header><h1>{titulo}</h1></header>;
const PieDePagina = ({ texto }) => <footer><p>{texto}</p></footer>;
const Contenido = ({ children }) => <main>{children}</main>;

// Componente principal que compone los demás
const Pagina = ({ titulo, children, textoPie }) => {
  return (
    <div className="pagina">
      <Cabecera titulo={titulo} />
      <Contenido>
        {children}
      </Contenido>
      <PieDePagina texto={textoPie} />
    </div>
  );
};

// Uso
function App() {
  return (
    <Pagina 
      titulo="Mi Aplicación" 
      textoPie="© 2024 Mi Empresa"
    >
      <p>Este es el contenido principal de la página.</p>
      <button>Click aquí</button>
    </Pagina>
  );
}

💡 Ejemplo Práctico Completo

Lista de Tareas (Todo List)

jsx
import React, { useState } from 'react';

// Componente para mostrar cada tarea individual
const Tarea = ({ tarea, onEliminar, onToggleCompletada }) => {
  return (
    <div className={`tarea ${tarea.completada ? 'completada' : ''}`}>
      <span 
        onClick={() => onToggleCompletada(tarea.id)}
        style={{ 
          textDecoration: tarea.completada ? 'line-through' : 'none',
          cursor: 'pointer'
        }}
      >
        {tarea.texto}
      </span>
      <button onClick={() => onEliminar(tarea.id)}>Eliminar</button>
    </div>
  );
};

// Componente para agregar nuevas tareas
const FormularioTarea = ({ onAgregarTarea }) => {
  const [texto, setTexto] = useState('');

  const manejarEnvio = (e) => {
    e.preventDefault();
    if (texto.trim()) {
      onAgregarTarea(texto);
      setTexto('');
    }
  };

  return (
    <form onSubmit={manejarEnvio}>
      <input
        type="text"
        value={texto}
        onChange={(e) => setTexto(e.target.value)}
        placeholder="Nueva tarea..."
      />
      <button type="submit">Agregar</button>
    </form>
  );
};

// Componente principal de la lista de tareas
const ListaTareas = () => {
  const [tareas, setTareas] = useState([]);

  const agregarTarea = (texto) => {
    const nuevaTarea = {
      id: Date.now(),
      texto,
      completada: false
    };
    setTareas([...tareas, nuevaTarea]);
  };

  const eliminarTarea = (id) => {
    setTareas(tareas.filter(tarea => tarea.id !== id));
  };

  const toggleCompletada = (id) => {
    setTareas(tareas.map(tarea =>
      tarea.id === id 
        ? { ...tarea, completada: !tarea.completada }
        : tarea
    ));
  };

  const tareasCompletadas = tareas.filter(t => t.completada).length;
  const totalTareas = tareas.length;

  return (
    <div className="lista-tareas">
      <h2>Lista de Tareas</h2>
      <p>
        {tareasCompletadas} de {totalTareas} tareas completadas
        ({totalTareas > 0 ? Math.round((tareasCompletadas / totalTareas) * 100) : 0}%)
      </p>
      
      <FormularioTarea onAgregarTarea={agregarTarea} />
      
      <div className="tareas">
        {tareas.map(tarea => (
          <Tarea
            key={tarea.id}
            tarea={tarea}
            onEliminar={eliminarTarea}
            onToggleCompletada={toggleCompletada}
          />
        ))}
      </div>
    </div>
  );
};

export default ListaTareas;

🎯 Mejores Prácticas

1. Nomenclatura

jsx
// ✅ Correcto - PascalCase
function MiComponente() { }

// ❌ Incorrecto
function miComponente() { }

2. Un componente por archivo

jsx
// MiComponente.jsx
import React from 'react';

const MiComponente = () => {
  return <div>Mi Componente</div>;
};

export default MiComponente;

3. Props destructuring

jsx
// ✅ Mejor
const Usuario = ({ nombre, edad }) => { }

// ❌ Menos legible
const Usuario = (props) => {
  const nombre = props.nombre;
  const edad = props.edad;
}

4. Keys en listas

jsx
const Lista = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.nombre}</li>
      ))}
    </ul>
  );
};

📚 Conclusión

Los componentes son el corazón de React. Te permiten:

  • ✅ Crear código reutilizable

  • ✅ Mantener una estructura organizada

  • ✅ Facilitar el mantenimiento

  • ✅ Mejorar la legibilidad del código

¡Practica creando diferentes tipos de componentes y pronto dominarás esta poderosa característica de React! 🚀

Comentarios

Publicar un comentario

Entradas más populares de este blog

6.5-4-Qué son las Props

Qué son las Props Son datos que se pasan de un  componente padre  a un  componente hijo . Las props son  inmutables  (el hijo no puede modificarlas directamente) y pueden ser de cualquier tipo: Strings, números, booleanos Arrays, objetos Funciones (para comunicación hijo → padre) Elementos React, componentes, etc. Permiten la comunicación entre componentes(Padre al hijo). Pueden ser de cualquier tipo: strings, números, arrays, objetos, funciones, etc. Ejemplo Básico jsx-cadena-entero // En el componente padre (App.js) function App ( ) { const userName = "Agustín Navarro" ; const age = 26 ; return ( < Saludar nombre = { userName } edad = { age } /> ) ; } // En el componente hijo (Saludar.js) function Saludar ( props ) { return ( < div > < h1 > Hola { props . nombre } </ h1 > < p > Edad: { props . edad } años </ p > </ div > ) ; } 🔹  ...
Leer más

6.8-23-pasando funciones a nuestro componente

Imagen
Pasando Funciones como Props en React Introducción Clara y Motivadora En React, los componentes no solo pueden recibir datos a través de props, ¡también pueden recibir funciones! Esto nos permite: ✅ Crear componentes interactivos (como botones que ejecutan acciones) ✅ Comunicar componentes hijos con padres ✅ Construir aplicaciones más dinámicas y reactivas 1. Pasando Funciones Básicas Ejemplo Simple: Botón con Alerta jsx-Funciones Básicas Copy Download // Componente Padre (App.js) function App ( ) { const saludar = ( ) => { alert ( "¡Hola desde el componente padre!" ) ; } ; return < BotonSaludar onClick = { saludar } /> ; } // Componente Hijo (BotonSaludar.js) function BotonSaludar ( props ) { return ( < button onClick = { props . onClick } > Saludar </ button > ) ; } 🔹  Key Points : La función se define en el padre y se pasa como prop ( onClick ) El hijo ejecuta la función cuando ocurre un evento ...
Leer más

6.12-0-3- Spread Operator

 Spread Operator en Props de React El  spread operator  ( ... ) es una herramienta poderosa en React que nos permite pasar múltiples  props  de manera más eficiente y limpia. ¡Veamos un ejemplo práctico! 🔹 ¿Cómo funciona? En lugar de pasar cada  prop  manualmente, podemos expandir un objeto directamente en las props del componente. Ejemplo sencillo: jsx-operator-objeto  // Definimos un objeto con las props const usuario = { nombre : "Ana" , edad : 25 , pais : "España" } ; // Pasamos todas las props de una vez usando ... function TarjetaUsuario ( props ) { return ( < div > < h2 > Nombre: { props . nombre } </ h2 > < p > Edad: { props . edad } </ p > < p > País: { props . pais } </ p > </ div > ) ; } // Uso del componente function App ( ) { return < TarjetaUsuario { ... usuario } /> ; } 🔹 Beneficios: ✅  Evita repetir ...
Leer más