Alternar entre claro y oscuro

Introducción

En este proyecto, aprenderás a crear una aplicación React que permita a los usuarios alternar entre el modo claro y el modo oscuro. El proyecto demostrará el uso de la API de Contexto de React y del hook useContext para administrar el estado global del tema.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo crear un ThemeContext utilizando la API de Contexto de React
• Cómo utilizar el ThemeContext en el componente App para cambiar el estilo general de la aplicación según el tema
• Cómo utilizar el ThemeContext en el componente Card para cambiar los estilos de la tarjeta según el tema
• Cómo envolver el componente App con el ThemeProvider para que el contexto del tema esté disponible en toda la aplicación

🏆 Logros

Después de completar este proyecto, podrás:

• Comprender cómo utilizar la API de Contexto de React para administrar el estado global
• Aplicar el hook useContext para acceder a los valores del contexto
• Implementar diferentes estilos según el tema actual
• Alternar el tema y actualizar el estado global

Configurar el proyecto

En este paso, aprenderás a configurar el proyecto e instalar las dependencias necesarias.

Abre tu editor de código y navega hasta el directorio del proyecto.

├── components
│ └── Card.js
├── contexts
│ └── ThemeContext.js
├── App.css
├── App.js
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

Descripciones de archivos:

• El directorio components contiene todos los archivos de componentes.
• El directorio contexts contiene el archivo ThemeContext.js que necesita ser completado.

Como este es un proyecto de React, necesitamos instalar las dependencias ejecutando el siguiente comando:

npm install

Después de instalar las dependencias, sigue estos pasos para acceder al proyecto:

1. Inicia un servidor local ejecutando el siguiente comando en la terminal:

npm start

2. Abre el servidor web en el lado derecho del entorno de codificación. Verás el efecto estático como se muestra a continuación. Actualmente, hacer clic en el botón "Modo Oscuro" no causa ningún cambio.

Crear el ThemeContext

En este paso, aprenderás a crear el ThemeContext utilizando la API de Contexto de React. Sigue los pasos siguientes para completar este paso:

1. Abre el archivo ThemeContext.js ubicado en el directorio src/contexts.

2. Crea el ThemeContext utilizando React.createContext():

   export const ThemeContext = React.createContext();
   

3. Crea el componente ThemeProvider que envolverá el componente App y proporcionará el contexto del tema:

   export const ThemeProvider = (props) => {
     const [theme, setTheme] = React.useState("light");
     return (
       <ThemeContext.Provider value={{ theme, setTheme }}>
         {props.children}
       </ThemeContext.Provider>
     );
   };
   

   El componente ThemeProvider inicializa el estado theme a "light" y proporciona los valores theme y setTheme al contexto.

Usar el ThemeContext en el componente App

En este paso, aprenderás a usar el ThemeContext en el componente App para cambiar el estilo general de la aplicación según el tema.

1. Abre el archivo src/App.js.

2. Utiliza el hook useContext para acceder al valor theme del ThemeContext:

   const { theme } = useContext(ThemeContext);
   

3. Actualiza el JSX del componente App para aplicar diferentes estilos según el valor theme:

   return (
     <div className={theme === "light" ? "app app-light" : "app app-dark"}>
       <Card></Card>
     </div>
   );
   

   Las clases app-light y app-dark se aplicarán al elemento principal div según el valor theme.

Usar el ThemeContext en el componente Card

En este paso, aprenderás a usar el ThemeContext en el componente Card para cambiar los estilos de la tarjeta según el tema.

1. Abre el archivo src/components/Card.js.

2. Utiliza el hook useContext para acceder a los valores theme y setTheme del ThemeContext:

   export const Card = () => {
     const { theme, setTheme } = useContext(ThemeContext);
     //...
   };
   

3. Implementa la función handleThemeToggle para alternar el tema:

   const handleThemeToggle = (e) => {
     setTheme(theme === "light" ? "dark" : "light");
   };
   

   Esta función actualizará el valor theme en el ThemeContext cuando se haga clic en el botón.

Envolver el componente App con el ThemeProvider

En este último paso, aprenderás a envolver el componente App con el ThemeProvider para que el contexto del tema esté disponible en toda la aplicación.

1. Abre el archivo src/index.js.

2. Importa el ThemeProvider desde el archivo ThemeContext.js:

   import { ThemeProvider } from "./contexts/ThemeContext";
   

3. Envuelve el componente App con el ThemeProvider en la función ReactDOM.render:

   root.render(
     <React.StrictMode>
       <ThemeProvider>
         <App />
       </ThemeProvider>
     </React.StrictMode>
   );
   

Ahora, el componente App y sus componentes hijos pueden acceder a los valores theme y setTheme del ThemeContext utilizando el hook useContext.

Después de completar el desafío, el efecto debería ser el siguiente:

¡Felicitaciones! Has completado el proyecto. Ahora deberías poder alternar entre el modo claro y el modo oscuro haciendo clic en el botón del componente de la tarjeta.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.