Módulo 8: Desarrollo de Aplicaciones Complejas

8.1 Patrones de Diseño en React

Contenedores y presentacionales:

El patrón de Contenedores y Presentacionales (Container and Presentational) es una técnica que separa la lógica y el estado de la interfaz de usuario en dos tipos de componentes:

• Contenedores: Componentes responsables de la lógica y el estado. Interactúan con el estado global y manejan acciones y eventos.
• Presentacionales: Componentes que se centran en la representación visual y reciben datos y funciones a través de props. Son reutilizables y fáciles de entender.

Composición de componentes:

import React from 'react';

const Encabezado = () => <h1>Título del Encabezado</h1>;
const Cuerpo = () => <p>Contenido del Cuerpo</p>;
const Pie = () => <footer>Pie de Página</footer>;

const Pagina = () => (
  <div>
    <Encabezado />
    <Cuerpo />
    <Pie />
  </div>
);

export default Pagina;
  

Patrón HOC (Higher Order Component):

import React from 'react';

const withEstiloRojo = (Componente) => {
  return (props) => (
    <div style={{ color: 'red' }}>
      <Componente {...props} />
    </div>
  );
};

const TextoDestacado = ({ texto }) => <p>{texto}</p>;
const TextoDestacadoRojo = withEstiloRojo(TextoDestacado);

export default TextoDestacadoRojo;
  

8.2 Acceso a APIs externas

Uso de APIs REST:

Las APIs REST (Representational State Transfer) son una forma común de acceder a datos y recursos en aplicaciones web. Se utilizan para realizar solicitudes HTTP para obtener, enviar y actualizar información.

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

const App = () => {
  const [datos, setDatos] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setDatos(data));
  }, []);

  return (
    <div>
      {datos.map((item) => (
        <p key={item.id}>{item.nombre}</p>
      ))}
    </div>
  );
};

export default App;
  

Manejo de respuestas asíncronas:

Las operaciones de API son asíncronas, lo que significa que se realizan fuera del flujo principal de ejecución. Puedes usar async/await o .then() para manejar respuestas asíncronas y actualizar el estado de tu componente cuando se reciban los datos.

Actualización del estado basado en datos externos:

Puedes utilizar el estado local del componente para representar y actualizar los datos obtenidos de una API externa. Al realizar cambios en el estado, el componente se vuelve a renderizar y muestra la información actualizada.

En este módulo, aprenderás cómo abordar patrones de diseño avanzados y cómo acceder a APIs externas para integrar datos en tus aplicaciones React. Estos conocimientos te ayudarán a desarrollar aplicaciones más completas y robustas.