6.4-5-5-Componentes y Comunicación

 

 Guía Completa de Componentes en React: Padres, Hijos y Comunicación

🌐 Componentes Padres e Hijos

En React, los componentes se organizan en una jerarquía donde:

• Componentes padres contienen y gestionan otros componentes

• Componentes hijos son renderizados dentro de padres

jsx

Copy

Download

// Componente Padre
function Parent() {
  return (
    <div>
      <h1>Yo soy el padre</h1>
      <Child /> {/* Componente Hijo */}
    </div>
  );
}

// Componente Hijo
function Child() {
  return <p>Yo soy el hijo</p>;
}

🔄 Comunicación entre Componentes

1. De Padre a Hijo (Props)

La forma más común: el padre pasa datos al hijo mediante props.

jsx

Copy

Download

function Parent() {
  const [message] = useState("Hola desde el padre");
  
  return (
    <div>
      <Child message={message} />
    </div>
  );
}

function Child({ message }) {
  return <p>Mensaje recibido: {message}</p>;
}

2. De Hijo a Padre (Funciones Callback)

El hijo puede comunicarse con el padre mediante funciones pasadas como props.

jsx

Copy

Download

function Parent() {
  const handleChildClick = (data) => {
    console.log("El hijo dice:", data);
  };

  return <Child onClick={handleChildClick} />;
}

function Child({ onClick }) {
  return (
    <button onClick={() => onClick("Hola padre!")}>
      Enviar mensaje al padre
    </button>
  );
}

3. Entre Hermanos (Elevación de Estado)

Cuando dos hijos necesitan comunicarse, el estado se "eleva" al padre común.

jsx

Copy

Download

function Parent() {
  const [sharedData, setSharedData] = useState("");

  return (
    <div>
      <ChildA setData={setSharedData} />
      <ChildB data={sharedData} />
    </div>
  );
}

function ChildA({ setData }) {
  return <input onChange={(e) => setData(e.target.value)} />;
}

function ChildB({ data }) {
  return <p>Datos compartidos: {data}</p>;
}

🏗️ Composición de Componentes

React favorece la composición sobre la herencia. Puedes usar children para crear componentes más flexibles:

jsx

Copy

Download

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Título</h2>
      <p>Contenido de la tarjeta</p>
    </Card>
  );
}

🛠️ Patrones Avanzados

Render Props

Permite compartir lógica entre componentes mediante una prop que es una función.

jsx

Copy

Download

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e) => {
    setPosition({ x: e.clientX, y: e.clientY });
  };

  return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
}

function App() {
  return (
    <MouseTracker
      render={({ x, y }) => (
        <h1>
          Mouse en: {x}, {y}
        </h1>
      )}
    />
  );
}

Context API

Para comunicación entre componentes distantes en la jerarquía.

jsx

Copy

Download

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Botón con tema</button>;
}

📌 Buenas Prácticas

1. Unidireccionalidad: Los datos fluyen de padre a hijo

2. Componentes pequeños: Divide componentes complejos

3. Props inmutables: Los hijos no deben modificar sus props

4. Documentación clara: Especifica props requeridas y tipos

🚀 Conclusión

La comunicación entre componentes es fundamental en React. Comienza con props simples y funciones callback, luego avanza a patrones más complejos como Context API cuando tu aplicación crezca.