13,9 тыс подписчиков

Светлый и темный режимы в веб-приложениях React на основе CSS Tailwind

14 сентября 202114 сен 2021

3 мин

Оглавление

Как установить CSS Tailwind с помощью Create React App
Как переключать темы для темного и светлого режимов
Как извлекать Joke API

Источник: Nuances of Programming

Ниже представлены основные функции будущего приложения.

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

Можете посмотреть демонстрацию в live-режиме здесь:

В этом руководстве используются Visual Studio Code в качестве редактора и Netlify для развертывания приложения. Допустимы и другие инструменты.

Вот что вы узнаете из этого руководства.

Как установить CSS Tailwind с помощью Create React App.
Как переключать темы для темного и светлого режимов.
Как извлекать Joke API.

Хорошо, начнем!

Как установить CSS Tailwind с помощью Create React App

Вначале несколько слов о Tailwind CSS. Официальная платформа TailwindCSS призывает пользователей: “Быстро создавайте современные веб-сайты, никогда не покидая HTML”. Это означает, что вам не придется писать много строк CSS-кода, но при этом надо иметь индивидуально настраиваемый интерфейс с использованием HTML. Словом, стоит попробовать создать приложение с TailwindCSS.

Продолжаем двигаться дальше! Чтобы установить CSS Tailwind с помощью Create React App, необходимо выполнить действия, описанные здесь.

Когда приложение React будет установлено, перейдите в файл tailwind.config.js и настройте его следующим образом:

Затем перейдите в файл index.css и добавьте эти строки:

Вот и все, что нужно для настройки CSS-файла. В этом и заключается прелесть использования TailwindCSS — он избавляет вас от долго настраиваемого CSS-кода и делает приложение более простым и быстрым. Прежде чем двигаться дальше, ознакомьтесь с подробной информации об этом фреймворке здесь.

Как переключать темы для темного и светлого режимов

Чтобы включать темный и светлый режимы с помощью TailwindCSS, необходимо создать следующие компоненты Javascript: Background.js, ThemeContext.js и ThemeToggle.js. Погрузимся в детали и код.

Background.js использует имя класса “bg-white dark:bg-black transition-all” в элементе тела, чтобы тема переключалась между белым и черным фоном. Вы можете выбрать другие цвета фона в зависимости от ваших потребностей.

ThemeContext.js создает родительского поставщика для темы в действии.

ThemeToggle.js подготавливает дочерние элементы интерфейса для переключения между светлым и темным режимами. Не забудьте установить react-иконки, если используете их таким образом:

Теперь импортируйте все эти компоненты в файл index.js, как показано ниже:

//index.jsimport React from 'react'; import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ThemeProvider } from './components/ThemeContext';
import Background from './components/Background';
import Toggle from './components/ThemeToggle';

ReactDOM.render(
<React.StrictMode> <ThemeProvider> <Background> <div className="absolute right-0 top-0 mr-4 mt-4 md:mr-6 md:mt-6"> <Toggle /> </div>
<App /> </Background> </ThemeProvider>,
</React.StrictMode>,
document.getElementById('root')
);

Вот и все для режима темы в действии. Переходим к основному файлу App.js.

Как извлекать Joke API

Joke API взят из этого репозитория. По желанию вы можете добавить в него больше шуток.

Если вы используете Axios для извлечения данных, не забудьте установить его в приложение React.

Чтобы получить случайную шутку, нужно вызвать функцию getRandomIndex(), которая обрабатывает событие кнопкой “Get Joke” при каждом нажатии. Чтобы делиться шутками в социальных сетях, просто используйте react-иконки в качестве кнопок и создайте атрибут URL-ссылки href, подобный этому:

const tweetURL = `https://twitter.com/intent/tweet?text=${joke.setup} ${joke.punchline} - ${joke.type}`;

const facebookURL = "https://www.facebook.com/sharer/sharer.php?u=https://try-not-to-laugh-challenge.netlify.app/";

Случайные изображения взяты из Lorem Picsum. Внутри элемента img добавьте источник следующим образом:

Вот и все. Исходный код для этого приложения находится здесь.