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

ReactReactBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

предпросмотр проекта

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/components_props("Components and Props") react/AdvancedConceptsGroup -.-> react/context_api("Context API") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") react/StateManagementGroup -.-> react/context_state("Using Context for State") subgraph Lab Skills react/jsx -.-> lab-300148{{"Переключение между светлой и темной темами"}} react/components_props -.-> lab-300148{{"Переключение между светлой и темной темами"}} react/context_api -.-> lab-300148{{"Переключение между светлой и темной темами"}} react/hooks -.-> lab-300148{{"Переключение между светлой и темной темами"}} react/use_state_reducer -.-> lab-300148{{"Переключение между светлой и темной темами"}} react/context_state -.-> lab-300148{{"Переключение между светлой и темной темами"}} end

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

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

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

├── 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
  1. Откройте веб-сервер справа в кодировочной среде. Вы увидите статический эффект, показанный ниже. В настоящее время нажатие кнопки "Темная тема" не вызывает никаких изменений.
неисправная кнопка темной темы

Создание 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, чтобы улучшить свои навыки.