🔹 Creación de componentes en React: funciones y buenas prácticas

🔹 Creación de componentes en React: funciones y buenas prácticas

En React, los componentes funcionales son la manera más moderna y sencilla de construir la interfaz de usuario. Permiten reutilizar código, mantener la lógica separada y hacer que la aplicación sea más escalable.

---

1️⃣ Componente funcional básico

Un componente funcional es simplemente una función que retorna JSX:

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

ReactDOM.createRoot(document.getElementById('root')).render(<Welcome name="Jorge" />);
  

Hola, Jorge!

---

2️⃣ Componente con varias líneas de JSX

Podemos retornar múltiples elementos agrupándolos en un contenedor como <div> o usando <></> (Fragment):

function Profile(props) {
  return (
    <>
      <h2>{props.name}</h2>
      <p>Edad: {props.age}</p>
      <p>Ciudad: {props.city}</p>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Profile name="Ana" age={28} city="Madrid" />
);
  

Ana
Edad: 28
Ciudad: Madrid

---

3️⃣ Uso de props para personalizar componentes

Los props permiten pasar información a los componentes y hacerlos dinámicos:

function Button(props) {
  return <button className="btn btn-primary">{props.label}</button>;
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Button label="Click aquí" />
);
  

---

4️⃣ Buenas prácticas al crear componentes

• ✅ Nombrar los componentes con mayúscula inicial (Welcome, Profile).
• ✅ Mantener componentes pequeños y específicos.
• ✅ Usar props para pasar datos y evitar hardcodear valores.
• ✅ Evitar lógica compleja dentro del JSX; usar funciones auxiliares.
• ✅ Documentar la finalidad de cada componente.

---

5️⃣ Componente con lógica interna

Podemos agregar funciones dentro del componente para manipular datos antes de renderizar:

function Greeting(props) {
  const message = `¡Bienvenido, ${props.name}! Hoy es ${new Date().toLocaleDateString()}.`;
  return <h1>{message}</h1>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<Greeting name="Jorge" />);
  

¡Bienvenido, Jorge! Hoy es 13/11/2025

💡 Los componentes funcionales combinan simplicidad y flexibilidad para construir interfaces modernas en React.

← Volver al índice