Я только что закончил создание своего портфолио! Вот 3 ключевые особенности, которые я добавил

Я создал его с помощью ReactJS, TailwindCSS и HeadlessUI.

Смотрите ссылку на портфолио здесь: https://www.georgeisiguzo.xyz/

На случай, если вы захотите создать нечто подобное, я хочу поделиться тем, как я добавил в портфолио 3 ключевые функции.

Ключевые особенности

  1. Экран предварительной загрузки
  2. Переход
  3. Светлая/темная тема

Теперь давайте начнем.

Если вы используете 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;
Вход в полноэкранный режим Выход из полноэкранного режима

Пояснения:

  1. Сначала мы импортируем React, хуки useState и useEffect.
  2. Затем мы создаем переменную true/false (булева) под названием isLoading, значение которой будет определять, что будет показано на странице. Начальное значение для isLoadingtrue.
  3. Мы используем хук useEffect для изменения значения isLoading через 5 секунд с помощью setTimeout().
  4. Мы используем условный рендеринг для #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>
Войти в полноэкранный режим Выйти из полноэкранного режима

Пояснение:

  1. Сначала мы импортируем Transition из HeadlessUI.
  2. Далее мы можем использовать Transition в любом месте нашего приложения
  3. Обратите внимание на значения каждого свойства (prop) Transition, особенно show.
  4. Другие реквизиты, такие как 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;
Вход в полноэкранный режим Выйти из полноэкранного режима

Пояснение:

  1. Мы использовали Transition дважды, один раз для основного содержимого, а другой для прелоадера.
  2. Мы передали isLoading (булево значение) в качестве значения для параметра show.
  3. Для основного содержимого значение реквизита show равно !isLoading. Мы используем ! перед isLoading, что означает противоположное или обратное текущему значение isLoading. ! также означает нет (т.е. !isLoading означает не isLoading).
  4. Для прелоадера значение реквизита show равно isLoading.

Вот и все.

Светлая/темная тема

Наконец, смена тем со светлой на темную и наоборот.

Почему вашему приложению нужна эта функция?

Позвольте мне хоть раз ответить без ссылок на внешний источник 😅.

Проще говоря:

Как у пользователя веб-приложений, у меня есть предпочтения. Ночью я предпочитаю, чтобы все мои приложения работали в темном режиме. Иногда днем я ставлю все приложения в темный режим, особенно приложение Twitter. Я считаю, что у каждого другого пользователя тоже есть свои предпочтения, поэтому предоставление пользователям возможности установить тему приложения так, как им нравится, — это большая победа для пользовательского опыта (UX) — TheReactNewbie

Надеюсь, вы со мной согласны 😉.

Теперь о том, как?

Как вы можете добавить переключение между светлым и темным режимом в вашем React-приложении?

TailwindCSS делает это очень просто.

К счастью для меня и для вас, я уже написал пошаговое руководство о том, как это сделать.

Перейдите к статье здесь и наслаждайтесь!

Хорошо. На этом пока все.

Надеюсь, эта статья была вам полезна.

Я приветствую отзывы и конструктивную критику моего портфолио. Спасибо вам за то, что вы делаете.

Вот ссылка на портфолио снова:

https://www.georgeisiguzo.xyz/

Оцените статью
devanswers.ru
Добавить комментарий