Переключение между светлой и темной темами

Введение

В этом проекте вы научитесь создавать React-приложение, которое позволяет пользователям переключаться между светлой и темной темами. Проект продемонстрирует использование React Context API и хука useContext для управления глобальным состоянием темы.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• создавать ThemeContext с использованием React Context API;
• использовать ThemeContext в компоненте App для изменения стиля всего приложения в зависимости от темы;
• использовать ThemeContext в компоненте Card для изменения стилей карточек в зависимости от темы;
• оборачивать компонент App в ThemeProvider, чтобы контекст темы был доступен по всему приложению.

🏆 Достижения

После завершения этого проекта вы сможете:

• понять, как использовать React Context API для управления глобальным состоянием;
• применить хук useContext для доступа к значениям контекста;
• реализовывать разные стили в зависимости от текущей темы;
• переключать тему и обновлять глобальное состояние.

Skills Graph

Настройка проекта

В этом шаге вы научитесь настраивать проект и устанавливать необходимые зависимости.

Откройте свой редактор кода и перейдите в директорию проекта.

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

Описание файлов:

• Директория components содержит все файлы компонентов.
• Директория contexts содержит файл ThemeContext.js, который необходимо заполнить.

Поскольку это React-проект, нам нужно установить зависимости, выполнив следующую команду:

npm install

После установки зависимостей следуйте этим шагам, чтобы открыть проект:

1. Запустите локальный сервер, выполнив следующую команду в терминале:

npm start

2. Откройте веб-сервер справа в кодировочной среде. Вы увидите статический эффект, показанный ниже. В настоящее время нажатие кнопки "Темная тема" не вызывает никаких изменений.

Создание ThemeContext

В этом шаге вы научитесь создавать ThemeContext с использованием React Context API. Следуйте шагам ниже, чтобы выполнить этот шаг:

1. Откройте файл ThemeContext.js, расположенный в директории src/contexts.

2. Создайте ThemeContext с использованием React.createContext():

   export const ThemeContext = React.createContext();

3. Создайте компонент ThemeProvider, который будет оборачивать компонент App и предоставлять контекст темы:

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

Компонент ThemeProvider инициализирует состояние theme значением "light" и предоставляет значения theme и setTheme контексту.

Использование ThemeContext в компоненте App

В этом шаге вы научитесь использовать ThemeContext в компоненте App для изменения стиля всего приложения в зависимости от темы.

1. Откройте файл src/App.js.

2. Используйте хук useContext, чтобы получить значение theme из ThemeContext:

   const { theme } = useContext(ThemeContext);

3. Обновите JSX компонента App, чтобы применить разные стили в зависимости от значения theme:

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

Классы app-light и app-dark будут применяться к основному элементу div в зависимости от значения theme.

Использование ThemeContext в компоненте Card

В этом шаге вы научитесь использовать ThemeContext в компоненте Card для изменения стилей карточек в зависимости от темы.

1. Откройте файл src/components/Card.js.

2. Используйте хук useContext, чтобы получить значения theme и setTheme из ThemeContext:

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

3. Реализуйте функцию handleThemeToggle, чтобы переключать тему:

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

Эта функция обновит значение theme в ThemeContext, когда кнопка будет нажата.

Оберните компонент App в ThemeProvider

В этом финальном шаге вы научитесь оборачивать компонент App в ThemeProvider, чтобы контекст темы был доступен по всему приложению.

1. Откройте файл src/index.js.

2. Импортируйте ThemeProvider из файла ThemeContext.js:

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

3. Оберните компонент App в ThemeProvider в функции ReactDOM.render:

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

Теперь компонент App и его дочерние компоненты могут получать значения theme и setTheme из ThemeContext с использованием хука useContext.

После завершения задания эффект должен быть таким:

Поздравляем! Вы завершили проект. Теперь вы должны быть в состоянии переключаться между светлой и темной модами, нажав кнопку в компоненте карточки.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.