Я создал его с помощью ReactJS, TailwindCSS и HeadlessUI.
Смотрите ссылку на портфолио здесь: https://www.georgeisiguzo.xyz/
На случай, если вы захотите создать нечто подобное, я хочу поделиться тем, как я добавил в портфолио 3 ключевые функции.
- Ключевые особенности
- Экран предварительной загрузки
- Как создать предзагрузчик в приложении ReactJS:
- Пояснения:
- Переход
- Итак, как вы можете добавить переходы страниц в свое приложение?
- Пояснение:
- Пояснение:
- Светлая/темная тема
- Как вы можете добавить переключение между светлым и темным режимом в вашем React-приложении?
Ключевые особенности
- Экран предварительной загрузки
- Переход
- Светлая/темная тема
Теперь давайте начнем.
Если вы используете TailwindCSS, то то, что я собираюсь показать, будет очень применимо к вам, а если нет, то интересно, почему? 😁
Экран предварительной загрузки
Ниже показан экран предварительной загрузки:
Теперь, прежде чем я покажу вам, как добавить его в ваше портфолио или любое другое приложение, расскажите, в чем суть прелоадера в вашем приложении?
Предзагрузчики, особенно анимированные, выглядят красиво и создают солидное первое впечатление — bootcamp.uxdesign.cc.
Не мои слова! Лол… Но в некоторых известных технических портфолио они есть, например — brittanychiang
Как создать предзагрузчик в приложении ReactJS:
Для всех примеров в этой статье мы будем использовать функциональные компоненты и хуки React:
Вот код для создания предзагрузчика:
import React, { useEffect, useState } from "react"; // #1
function App() {
const [isLoading, setIsLoading] = useState(true); // #2
// #3
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 5000);
return () => {
clearTimeout(timer);
};
}, []);
return (
<div className="app">
{!isLoading && ( // # 4
<div className="flex flex-col h-screen">
{// put your main page content here}
</div>
)
}
{isLoading && ( // # 5
<div className="flex flex-col h-screen">
{// put your preloader content here}
</div>
)
}
</div>
)
}
export default App;
Пояснения:
- Сначала мы импортируем React, хуки
useState
иuseEffect
. - Затем мы создаем переменную true/false (булева) под названием
isLoading
, значение которой будет определять, что будет показано на странице. Начальное значение дляisLoading
—true
. - Мы используем хук
useEffect
для изменения значенияisLoading
через 5 секунд с помощьюsetTimeout()
. - Мы используем условный рендеринг для #4 и #5, чтобы определить, как показывать наш прелоадер и основной контент.
Попробуйте.
Дополните фрагмент кода желаемым содержимым.
Переход
Посмотрите, как один раздел моего портфолио переходит в другой ниже:
Зачем добавлять переход между страницами/разделами?
Переходы между страницами — это анимированные переходы между страницами, которые придают веб-сайтам тот дополнительный штрих, который отличает их как первоклассные и достойные хорошего просмотра. Таким образом, при правильном применении, они могут создать ощущение живости и существенно помочь в навигации — orpetron.com
Да, переходы страниц делают сайты крутыми 😎.
Итак, как вы можете добавить переходы страниц в свое приложение?
Хотя есть и другие библиотеки, которые вы можете использовать (и вы также можете использовать чистый CSS), CSS для меня сложно, поэтому я использую HeadlessUI для переходов.
Прежде чем использовать приведенный ниже код, вам сначала нужно установить HeadlessUI с помощью npm, как показано ниже:
npm install @headlessui/react
Теперь код:
import { Transition } from "@headlessui/react"; // #1
...
<Transition // #2
show={true} // place a boolean variable here to determine when to show this component
enter="transition ease-in-out duration-700 transform"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-500 transform"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
{// place component content here}
</Transition>
Пояснение:
- Сначала мы импортируем
Transition
из HeadlessUI. - Далее мы можем использовать
Transition
в любом месте нашего приложения - Обратите внимание на значения каждого свойства (prop)
Transition
, особенноshow
. - Другие реквизиты, такие как
enter
,leave
,enterTo
и т.д. определяют поведение перехода компонента. Как он будет входить и выходить из экрана.
Смотрите документацию HeadlessUI здесь, чтобы узнать, как настроить каждый параметр.
Давайте используем Transition
для рендеринга нашего прелоадера и основного содержимого следующим образом:
import React, { useEffect, useState } from "react"; // #1
function App() {
const [isLoading, setIsLoading] = useState(true); // #2
// #3
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 5000);
return () => {
clearTimeout(timer);
};
}, []);
return (
<div className="app">
<Transition
show={!isLoading}
enter="transition ease-in-out duration-700 transform"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-500 transform"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="flex flex-col h-screen">
{// put your main page content here}
</div>
</Transition>
<Transition
show={isLoading}
enter="transition ease-in-out duration-700 transform"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-500 transform"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="flex flex-col h-screen">
{// put your preloader content here}
</div>
</Transition>
</div>
)
}
export default App;
Пояснение:
- Мы использовали
Transition
дважды, один раз для основного содержимого, а другой для прелоадера. - Мы передали
isLoading
(булево значение) в качестве значения для параметраshow
. - Для основного содержимого значение реквизита
show
равно!isLoading
. Мы используем!
передisLoading
, что означает противоположное или обратное текущему значениеisLoading
.!
также означает нет (т.е. !isLoading означает не isLoading). - Для прелоадера значение реквизита
show
равноisLoading
.
Вот и все.
Светлая/темная тема
Наконец, смена тем со светлой на темную и наоборот.
Почему вашему приложению нужна эта функция?
Позвольте мне хоть раз ответить без ссылок на внешний источник 😅.
Проще говоря:
Как у пользователя веб-приложений, у меня есть предпочтения. Ночью я предпочитаю, чтобы все мои приложения работали в темном режиме. Иногда днем я ставлю все приложения в темный режим, особенно приложение Twitter. Я считаю, что у каждого другого пользователя тоже есть свои предпочтения, поэтому предоставление пользователям возможности установить тему приложения так, как им нравится, — это большая победа для пользовательского опыта (UX) — TheReactNewbie
Надеюсь, вы со мной согласны 😉.
Теперь о том, как?
Как вы можете добавить переключение между светлым и темным режимом в вашем React-приложении?
TailwindCSS делает это очень просто.
К счастью для меня и для вас, я уже написал пошаговое руководство о том, как это сделать.
Перейдите к статье здесь и наслаждайтесь!
Хорошо. На этом пока все.
Надеюсь, эта статья была вам полезна.
Я приветствую отзывы и конструктивную критику моего портфолио. Спасибо вам за то, что вы делаете.
Вот ссылка на портфолио снова:
https://www.georgeisiguzo.xyz/