방금 포트폴리오 작성을 마쳤습니다! 여기에 내가 추가한 3가지 주요 기능이 있습니다.

ReactJS, TailwindCSS 및 HeadlessUI로 빌드했습니다.

여기에서 포트폴리오 링크 참조: https://www.georgeisiguzo.xyz/



비슷한 것을 만들고 싶은 경우를 대비하여 포트폴리오에 3가지 주요 기능을 추가한 방법을 공유하고 싶습니다.

주요 기능

사전 로드 화면

트랜지션

밝은/어두운 테마

이제 시작하겠습니다.

If you're using TailwindCSS, what I'm about to show will be very applicable to you and if you aren't, I wonder why? 😁

사전 로딩 화면

아래의 사전 로드 화면을 참조하십시오.



이제 포트폴리오나 다른 앱에 프리로더를 추가하는 방법을 보여드리기 전에 앱에서 프리로더의 본질은 무엇입니까?

Preloaders, particularly animated ones, look nice and provide a solid first impression - bootcamp.uxdesign.cc.

내 말이 아니야! Lol... 하지만 몇 가지 주목할만한 기술 포트폴리오에는 예를 들어 - 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 후크를 가져옵니다.

다음으로 isLoading라는 참/거짓(부울) 변수를 생성합니다. 이 변수의 값은 페이지에 표시되는 내용을 결정합니다. isLoading의 초기값은 true입니다.

useEffect 후크를 사용하여 isLoading를 사용하여 5초 후에 setTimeout()의 값을 변경합니다.

4번과 5번에 조건부 렌더링을 사용하여 프리로더와 기본 콘텐츠를 표시하는 방법을 결정합니다

.

사용해 보세요.

원하는 콘텐츠로 코드 스니펫을 완성하세요.

이행

내 포트폴리오의 한 섹션이 아래에서 다른 섹션으로 어떻게 전환되는지 확인하십시오.



페이지/섹션 사이에 전환을 추가하는 이유는 무엇입니까?

Page transitions are animated transitions between pages that give websites that extra touch that distinguishes them as top-notch and worthy of a good browse. So, when applied correctly, it can give a sense of liveliness and help significantly with navigation - orpetron.com

예, 페이지 전환은 웹사이트를 멋지게 만듭니다 😎

이제 앱에 페이지 전환을 어떻게 추가할 수 있습니까?

사용할 수 있는 다른 라이브러리가 있지만(순수 CSS를 사용할 수도 있음) CSS는 저에게 어렵기 때문에 전환에 HeadlessUI를 사용합니다.

아래 코드를 사용하기 전에 먼저 다음과 같이 npm을 사용하여 HeadlessUI를 설치해야 합니다.

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>

설명:

먼저 HeadlessUI

에서 Transition를 가져옵니다.

다음으로 앱

의 어느 곳에서나 Transition를 사용할 수 있습니다.

Transition, 특히 show의 각 속성(prop) 값을 기록해 둡니다.

show 내부의 구성 요소Transition가 들어갈 때와 사용자 화면에서 나갈 때를 결정합니다.

enter , leave , enterTo 등과 같은 다른 소품은 구성 요소의 전환 동작을 결정합니다. 화면에 들어가고 나가는 방법.

각 소품을 조정하는 방법은 HeadlessUI doc here을 참조하십시오.
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 prop 값은 !isLoading 입니다. ! 앞에 isLoading를 사용하여 isLoading의 현재 값의 반대 또는 역을 의미합니다. ! 또한 not을 의미합니다(즉, !isLoading은 isLoading이 아님을 의미함)

.

프리로더의 경우 show prop 값은 isLoading 입니다.

그게 다야.

밝은/어두운 테마

마지막으로 밝은 테마에서 어두운 테마로 또는 그 반대로 테마를 변경합니다.

앱에 이 기능이 필요한 이유는 무엇입니까?

일단 외부 출처 참고 없이 답변 드리도록 하겠습니다 😅

간단히 말해서:

As a web app user, I have a preference. At night, I prefer all my apps to be on dark mode. Sometimes during the day, I place all apps on dark mode, especially my Twitter app. I believe every other user also has a preference so giving users the ability to set your app theme the way they like is a big win for User Experience (UX) - TheReactNewbie

나는 당신이 나에게 동의하기를 바랍니다 😉

이제 어떻게?

React 앱에서 밝은 모드와 어두운 모드 사이의 스위치를 어떻게 추가할 수 있습니까?

TailwindCSS는 이를 매우 쉽게 만듭니다.

저와 여러분 모두에게 다행스럽게도 이를 수행하는 방법에 대한 단계별 가이드를 이미 작성했습니다.

Head over to the article here and enjoy! .

괜찮아. 지금은 그게 다입니다.

이 기사가 도움이 되었기를 바랍니다.

제 포트폴리오에 대한 피드백과 건설적인 비판을 환영합니다. 그대로 감사합니다

다음은 포트폴리오에 대한 링크입니다.

https://www.georgeisiguzo.xyz/