5-1-COMPONENTE

 Diferentes Formas de Crear Componentes en React

En React, existen varias formas de definir componentes. Las más comunes son usando funciones normales y funciones flecha (arrow functions). Aquí te explico cada una:

1. Función Normal (Function Declaration)

jsx
function MiComponente(props) {
  // Lógica JavaScript aquí
  const mensaje = "Hola desde función normal";
  
  // El return devuelve JSX (HTML-like)
  return (
    <div>
      <h1>{mensaje}</h1>
      <p>{props.mensajeProp}</p>
    </div>
  );
}

2. Función Flecha (Arrow Function)

jsx
const MiComponenteFlecha = (props) => {
  // Lógica JavaScript aquí
  const mensaje = "Hola desde función flecha";
  
  // Return implícito (sin llaves) para componentes simples
  // O explícito (con llaves) para componentes más complejos
  return (
    <div>
      <h2>{mensaje}</h2>
      <p>{props.mensajeProp}</p>
    </div>
  );
}

💡 Explicación Clave:

  • Parte JavaScript: Antes del return puedes escribir cualquier lógica JavaScript normal (variables, condicionales, loops, etc.)

  • JSX: Lo que devuelve el return es JSX (JavaScript XML), una sintaxis que parece HTML pero:

    • Usa className en lugar de class

    • Las expresiones JS van entre {}

    • Es transformado a JavaScript puro por Babel

🚀 Ejemplo de uso:

jsx
function App() {
  return (
    <div>
      <MiComponente mensajeProp="Soy una prop"/>
      <MiComponenteFlecha mensajeProp="Soy otra prop"/>
    </div>
  );
}

🔍 ¿Cuál usar?

  • Funciones normales: Más tradicional, mejor para componentes complejos

  • Funciones flecha: Más concisas, ideales para componentes simples

Ambas son válidas y funcionan igual en React moderno (con Hooks). ¡Elige la que prefieras! 

Guía Esencial de Componentes en React

Los componentes son bloques independientes y reutilizables que devuelven elementos HTML. Funcionan como funciones de JavaScript, pero están optimizados para construir interfaces.

🔷 Tipos de Componentes

1. Componentes de Función (Recomendados)

jsx
Copy
Download
function Car() {
  return <h2>¡Soy un Coche!</h2>;
}

2. Componentes de Clase (Legacy)

jsx
Copy
Download
class Car extends React.Component {
  render() {
    return <h2>¡Soy un Coche!</h2>;
  }
}

💡 Nota: Hoy se prefieren los componentes de función + Hooks (desde React 16.8).

🎯 Regla Clave

  • Nombres en mayúscula: Car, no car.

🔄 Cómo Usar un Componente

jsx
Copy
Download
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);  // Renderiza: <h2>¡Soy un Coche!</h2>

🎁 Props: Personaliza tus Componentes

Las props son como argumentos que pasas a un componente:

jsx
Copy
Download
function Car(props) {
  return <h2>¡Soy un {props.color}!</h2>;
}

// Uso:
<Car color="rojo" />  // Renderiza: ¡Soy un rojo!

🧩 Anidar Componentes

Puedes combinar componentes dentro de otros:

jsx
Copy
Download
function Garage() {
  return (
    <>
      <h1>¿Quién está en mi garaje?</h1>
      <Car />  // Renderiza el componente Car
    </>
  );
}

📂 Organización en Archivos

Mejor práctica: Guardar cada componente en un archivo separado (Car.js):

jsx
Copy
Download
// Car.js
function Car() {
  return <h2>¡Soy un Coche!</h2>;
}
export default Car;

// App.js
import Car from './Car.js';
root.render(<Car />);

🚀 Conclusión

  • Componentes = Bloques reutilizables que generan HTML.

  • Props = Personalización (como atributos HTML).

  • Organiza en archivos para mantener el código limpio.

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