Frontend Academy · Lección

Componentes funcionales y props

Cree componentes como funciones, acepte y desestructure props, y use PropTypes o tipos de TypeScript para documentar las formas de datos esperadas.

Componentes funcionales y props es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es un componente de React?

Un componente de React es una función de JavaScript que devuelve JSX. Los componentes son los bloques de construcción de las aplicaciones de React: piezas de interfaz de usuario reutilizables y componibles.

function Welcome() {
  return <h1>Welcome to CoddyKit!</h1>;
}

// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;

Props — pasar datos hacia abajo

Las props (propiedades) permiten pasar datos del componente padre al hijo. El componente las recibe como su primer argumento, en forma de objeto normal.

function Greeting({ name, role }: { name: string; role: string }) {
  return <p>Hello, {name}! Your role is {role}.</p>;
}

// Usage:
<Greeting name="Alice" role="admin" />

Interfaz de TypeScript para las props

Defina una interfaz con nombre para las props y obtenga autocompletado, comprobación de tipos y documentación.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'ghost';
}

function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

Prop children

La prop children contiene el contenido situado entre las etiquetas de apertura y cierre del componente. Especifíquela como React.ReactNode para aceptar cualquier contenido renderizable.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage:
<Card title="Hello">
  <p>Card content goes here.</p>
</Card>

Props predeterminadas con desestructuración

Establezca los valores predeterminados directamente en el patrón de desestructuración. Este es el enfoque moderno: la API defaultProps, obsoleta, ya no se recomienda.

function Alert({ type = 'info', message, onClose }: AlertProps) {
  return (
    <div className={`alert alert-${type}`}>
      <span>{message}</span>
      <button onClick={onClose}>×</button>
    </div>
  );
}

Composición de componentes

Los componentes se componen entre sí: una Page utiliza un Layout, que utiliza un Nav y un Sidebar, que a su vez utilizan átomos más pequeños, como Button e Icon. Este árbol de componentes es el árbol de componentes de React.

Convenciones de nomenclatura

Los nombres de los componentes deben comenzar con una letra mayúscula. Los nombres en minúscula se tratan como elementos HTML. <div> es un div de HTML; <Div> es un componente de React llamado Div.

Componentes puros

Un componente es puro si las mismas props siempre producen el mismo resultado y no se producen efectos secundarios durante el renderizado. Los componentes puros son más fáciles de comprender y optimizar.

// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;

// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
  localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
  return <p>{id}</p>;
};

Pasar funciones como props

Las funciones (callbacks) se pasan como props para permitir que los hijos se comuniquen con los padres. El padre define la función y el hijo la llama.

function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
  return (
    <li>
      {text}
      <button onClick={onDelete}>Delete</button>
    </li>
  );
}

Propagación de props

El operador de propagación pasa todas las props de un objeto a un componente. Resulta útil para componentes envoltorio o de paso directo, pero debe utilizarse con cuidado: podrían pasar props inesperadas.

function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} className={`input-base ${props.className || ''}`} />;
}

Fragment y keys en el contexto de las props

Al renderizar una lista de componentes como hijos, cada uno debe tener una prop key única. Las keys ayudan a React a identificar qué elementos han cambiado, se han agregado o se han eliminado.

Comprobación rápida

¿Cómo se proporciona un valor predeterminado para una prop en un componente de función moderno de React?

Recapitulación: componentes y props

Los componentes funcionales son funciones de JavaScript que devuelven JSX. Las props pasan datos del padre al hijo. Utilice interfaces de TypeScript para los tipos de las props. children: React.ReactNode para el contenido de tipo slot. Valores predeterminados en la desestructuración. Pase callbacks como props para la comunicación del hijo al padre. Los nombres comienzan con mayúsculas.

Preguntas frecuentes

¿La lección «Componentes funcionales y props» es gratis?

Sí — el texto completo de «Componentes funcionales y props» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Componentes funcionales y props»?

Cree componentes como funciones, acepte y desestructure props, y use PropTypes o tipos de TypeScript para documentar las formas de datos esperadas. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Componentes funcionales y props»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy