Title: Actividad 21: Uso de useContext
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad III - Framework de Desarrollo del Lado del Cliente

1) Objetivo

Que el alumno:

- Use useContext para compartir datos entre componentes.
- Envíe información desde un formulario en una página.
- Muestre esa información en otra página distinta usando React Router.
- Utilice MUI (Material UI) para el diseño básico de la interfaz (inputs, botones, tarjetas).

2) Instrucciones

A) Preparación del proyecto

1. Crear un proyecto de React (Vite o Create React App).
2. Instalar dependencias:

npm install react-router-dom
npm install @mui/material @emotion/react @emotion/styled


B) Crear el Contexto (FormContext)

1. En src/ crear un archivo llamado FormContext.jsx.
2. Dentro de ese archivo deben:
  - Crear el contexto.
  - Manejar un estado para los datos del formulario (por ejemplo: nombre, correo).
  - Exponer formData y setFormData por medio del Provider.

🔹 Guía de código (incompleta a propósito):

// FormContext.jsx
import { createContext, useState } from "react";

export const FormContext = createContext();

export function FormProvider({ children }) {
  const [formData, setFormData] = useState({
    // aquí van campos como nombre, correo
  });

  return (
    <FormContext.Provider value={{ formData, setFormData }}>
      {children}
    </FormContext.Provider>
  );
}


C) Configurar App.jsx con Router + Provider + MUI

1. En App.jsx:
  - Importar BrowserRouter, Routes, Route.
  - Importar FormProvider.
  - Crear al menos dos rutas:
    - / → página del formulario.
    - /resumen → página donde se muestran los datos.
  - Usar algunos componentes de MUI para estructura general (por ejemplo: AppBar, Toolbar, Container).

🔹 Guía de código (recortada):

// App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { FormProvider } from "./FormContext";
// importar páginas
// importar algunos componentes de MUI (AppBar, Toolbar, Container, Typography)

function App() {
  return (
    <BrowserRouter>
      <FormProvider>
        {/* AppBar de MUI aquí */}
        {/* Container principal aquí */}

        <Routes>
          {/* Ruta "/" para el formulario */}
          {/* Ruta "/resumen" para mostrar los datos */}
        </Routes>
      </FormProvider>
    </BrowserRouter>
  );
}

export default App;


La idea es que ellos rellenen los imports y los componentes de MUI que quieran.

D) Página 1: Formulario con MUI (FormPage.jsx)

1. Crear archivo FormPage.jsx.
2. Esta página debe:
  - Usar useContext(FormContext) para obtener setFormData.
  - Tener un formulario con MUI usando por ejemplo:
    - TextField para nombre y correo.
    - Button para enviar.
    - Card o Paper para el contenedor del formulario.
  - En el onSubmit:
    - Guardar los datos en el contexto.
    - Navegar a /resumen usando useNavigate.

🔹 Guía de código (recortada):

// FormPage.jsx
import { useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { FormContext } from "./FormContext";
// importar TextField, Button, Card, CardContent, Typography, etc. desde MUI

function FormPage() {
  const { setFormData } = useContext(FormContext);
  const navigate = useNavigate();

  const [nombre, setNombre] = useState("");
  const [correo, setCorreo] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // usar setFormData({ ... })
    // navegar a "/resumen"
  };

  return (
    // usar Card de MUI
    // dentro un <form onSubmit={handleSubmit}>
    // usar TextField para nombre y correo
    // usar Button tipo "submit"
  );
}

export default FormPage;


E) Página 2: Resumen con MUI (ResumenPage.jsx)

1. Crear archivo ResumenPage.jsx.
2. Esta página debe:
  - Usar useContext(FormContext) para leer formData.
  - Mostrar los datos usando componentes MUI como:
    - Card
    - Typography
  - Opcional: mostrar un mensaje si no hay datos (por ejemplo, si se entra directo a /resumen sin haber enviado el formulario).

🔹 Guía de código (recortada):

// ResumenPage.jsx
import { useContext } from "react";
import { FormContext } from "./FormContext";
// importar Card, CardContent, Typography desde MUI

function ResumenPage() {
  const { formData } = useContext(FormContext);

  return (
    // Card con los valores:
    // <Typography>Nombre: {formData.nombre}</Typography>
    // <Typography>Correo: {formData.correo}</Typography>
    // si no hay datos, mostrar mensaje alternativo
  );
}

export default ResumenPage;


F) Navegación visual (opcional pero recomendado)

- Pueden agregar un menú o botones de navegación usando MUI, por ejemplo en el AppBar o dentro de las páginas, con Link de React Router o con useNavigate.

Ejemplo guiado muy corto:

// dentro del AppBar o donde quieran
// <Button component={Link} to="/">Formulario</Button>
// <Button component={Link} to="/resumen">Resumen</Button>


(ellos deben importar Link de react-router-dom y Button de MUI).

G) Evidencias para el PDF

El alumno debe entregar un PDF con:

1. Captura del archivo FormContext.jsx (donde se vea el uso de createContext, useState y el FormProvider).
2. Captura del App.jsx donde se vea:
  - Uso de BrowserRouter, Routes, Route.
  - Uso de FormProvider.
  - Algún componente de MUI (AppBar, Container, etc.).
3. Captura de FormPage.jsx donde se vea:
  - Uso de useContext para setFormData.
  - Uso de TextField y Button de MUI.
4. Captura de ResumenPage.jsx donde se vea:
  - Uso de useContext para formData.
  - Uso de componentes MUI para mostrar los datos.
5. Capturas del navegador:
  - Página del formulario con MUI.
  - Página de resumen mostrando los datos enviados.
6. Explicación breve (3–5 líneas) respondiendo:
  - ¿Para qué usaste useContext?
  - ¿Qué ventaja tiene usar Context en lugar de pasar props manualmente?
  - ¿Qué aporta MUI al diseño de la interfaz?

1) Objetivo

Que el alumno:

- Use useContext para compartir datos entre componentes.
- Envíe información desde un formulario en una página.
- Muestre esa información en otra página distinta usando React Router.
- Utilice MUI (Material UI) para el diseño básico de la interfaz (inputs, botones, tarjetas).

2) Instrucciones

A) Preparación del proyecto

1. Crear un proyecto de React (Vite o Create React App).
2. Instalar dependencias:

npm install react-router-dom
npm install @mui/material @emotion/react @emotion/styled


B) Crear el Contexto (FormContext)

1. En src/ crear un archivo llamado FormContext.jsx.
2. Dentro de ese archivo deben:
  - Crear el contexto.
  - Manejar un estado para los datos del formulario (por ejemplo: nombre, correo).
  - Exponer formData y setFormData por medio del Provider.

🔹 Guía de código (incompleta a propósito):

// FormContext.jsx
import { createContext, useState } from "react";

export const FormContext = createContext();

export function FormProvider({ children }) {
  const [formData, setFormData] = useState({
    // aquí van campos como nombre, correo
  });

  return (
    <FormContext.Provider value={{ formData, setFormData }}>
      {children}
    </FormContext.Provider>
  );
}


C) Configurar App.jsx con Router + Provider + MUI

1. En App.jsx:
  - Importar BrowserRouter, Routes, Route.
  - Importar FormProvider.
  - Crear al menos dos rutas:
    - / → página del formulario.
    - /resumen → página donde se muestran los datos.
  - Usar algunos componentes de MUI para estructura general (por ejemplo: AppBar, Toolbar, Container).

🔹 Guía de código (recortada):

// App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { FormProvider } from "./FormContext";
// importar páginas
// importar algunos componentes de MUI (AppBar, Toolbar, Container, Typography)

function App() {
  return (
    <BrowserRouter>
      <FormProvider>
        {/* AppBar de MUI aquí */}
        {/* Container principal aquí */}

        <Routes>
          {/* Ruta "/" para el formulario */}
          {/* Ruta "/resumen" para mostrar los datos */}
        </Routes>
      </FormProvider>
    </BrowserRouter>
  );
}

export default App;


La idea es que ellos rellenen los imports y los componentes de MUI que quieran.

D) Página 1: Formulario con MUI (FormPage.jsx)

1. Crear archivo FormPage.jsx.
2. Esta página debe:
  - Usar useContext(FormContext) para obtener setFormData.
  - Tener un formulario con MUI usando por ejemplo:
    - TextField para nombre y correo.
    - Button para enviar.
    - Card o Paper para el contenedor del formulario.
  - En el onSubmit:
    - Guardar los datos en el contexto.
    - Navegar a /resumen usando useNavigate.

🔹 Guía de código (recortada):

// FormPage.jsx
import { useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { FormContext } from "./FormContext";
// importar TextField, Button, Card, CardContent, Typography, etc. desde MUI

function FormPage() {
  const { setFormData } = useContext(FormContext);
  const navigate = useNavigate();

  const [nombre, setNombre] = useState("");
  const [correo, setCorreo] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // usar setFormData({ ... })
    // navegar a "/resumen"
  };

  return (
    // usar Card de MUI
    // dentro un <form onSubmit={handleSubmit}>
    // usar TextField para nombre y correo
    // usar Button tipo "submit"
  );
}

export default FormPage;


E) Página 2: Resumen con MUI (ResumenPage.jsx)

1. Crear archivo ResumenPage.jsx.
2. Esta página debe:
  - Usar useContext(FormContext) para leer formData.
  - Mostrar los datos usando componentes MUI como:
    - Card
    - Typography
  - Opcional: mostrar un mensaje si no hay datos (por ejemplo, si se entra directo a /resumen sin haber enviado el formulario).

🔹 Guía de código (recortada):

// ResumenPage.jsx
import { useContext } from "react";
import { FormContext } from "./FormContext";
// importar Card, CardContent, Typography desde MUI

function ResumenPage() {
  const { formData } = useContext(FormContext);

  return (
    // Card con los valores:
    // <Typography>Nombre: {formData.nombre}</Typography>
    // <Typography>Correo: {formData.correo}</Typography>
    // si no hay datos, mostrar mensaje alternativo
  );
}

export default ResumenPage;


F) Navegación visual (opcional pero recomendado)

- Pueden agregar un menú o botones de navegación usando MUI, por ejemplo en el AppBar o dentro de las páginas, con Link de React Router o con useNavigate.

Ejemplo guiado muy corto:

// dentro del AppBar o donde quieran
// <Button component={Link} to="/">Formulario</Button>
// <Button component={Link} to="/resumen">Resumen</Button>


(ellos deben importar Link de react-router-dom y Button de MUI).

G) Evidencias para el PDF

El alumno debe entregar un PDF con:

1. Captura del archivo FormContext.jsx (donde se vea el uso de createContext, useState y el FormProvider).
2. Captura del App.jsx donde se vea:
  - Uso de BrowserRouter, Routes, Route.
  - Uso de FormProvider.
  - Algún componente de MUI (AppBar, Container, etc.).
3. Captura de FormPage.jsx donde se vea:
  - Uso de useContext para setFormData.
  - Uso de TextField y Button de MUI.
4. Captura de ResumenPage.jsx donde se vea:
  - Uso de useContext para formData.
  - Uso de componentes MUI para mostrar los datos.
5. Capturas del navegador:
  - Página del formulario con MUI.
  - Página de resumen mostrando los datos enviados.
6. Explicación breve (3–5 líneas) respondiendo:
  - ¿Para qué usaste useContext?
  - ¿Qué ventaja tiene usar Context en lugar de pasar props manualmente?
  - ¿Qué aporta MUI al diseño de la interfaz?