DevSpace Forum x Appwrite 2부: React Js 및 TailWindCSS를 사용한 UI

다시 오신 것을 환영합니다 👋

이 시리즈의 1부를 확인했다면 아마도 github 저장소를 방문했을 것입니다.

변경 사항이 있습니까?

간단한 UI에 대한 코드를 추가했습니다. 그냥 환영 페이지.

아래에서 확인하세요.



내가 어떻게 했지?

내가 한 방법에 대한 요약은 다음과 같습니다.

#1 새로운 React 프로젝트 생성

새 반응 프로젝트를 만드는 방법은 이 링크here를 참조하세요.

꽤 간단합니다.

#2 React 프로젝트에 Tailwind CSS 추가

앱에 tailwindcss를 추가하는 빠른 단계는 이 링크here를 참조하세요.

이제 npm start 를 실행하면 다음과 같은 내용이 표시됩니다.



제대로 했고 버그가 없기를 바라며 계속하겠습니다.

#3 파일 생성, 내용 추가

진행하기 전에 다음 사항을 숙지하시기 바랍니다.

How to import components in react

How to split your react code into components for better readability

src 폴더 안에 새 폴더를 만들고 이름을 Components 로 지정합니다.

이전에 ReactJs로 앱을 구축한 적이 있다면 ReactJs가 구성 요소를 만들고 재사용하는 것이 전부라는 것을 알고 있을 것입니다. 따라서 앱의 모든 구성 요소가 있어야 하는 폴더가 필요합니다.
Components 내부에 Welcome.js 및 Toggler.js 두 개의 파일을 만듭니다.
Welcome.js 구성 요소는 시작 페이지에 대한 UI를 유지하고 Toggler.js는 상태 논리를 처리합니다.

Toggler.js:

import React, {Component} from "react"

class Toggler extends Component {

    state = {
        on: this.props.defaultOnValue
    }

    static defaultProps = {
        defaultOnValue: false
    }

    toggle = () => {
        this.setState(prevState => ({on: !prevState.on}))
    }

    render() {
        return (
            <div>
                {this.props.children({
                    on: this.state.on, 
                    toggle: this.toggle
                })}
            </div>
        )
    }
}

export default Toggler

Toggler.js는 약간 고급 ReactJs 개념입니다. 렌더링 소품을 사용하여 다른 구성 요소에 상태를 전달하는 구성 요소입니다.

See info on render props

간단하게 설명하자면, 자식으로 Toggler.js에 전달된 모든 구성 요소는 on 상태 및 toggle 메서드에 액세스할 수 있습니다.
Welcome.js :

import React, { useState } from "react"
import Header from "./WelcomeComponents/Header"
import Main from "./WelcomeComponents/Content"
import Footer from "./SubComponents/Footer"

export default function Welcome() {
    /**
     * This welcome component will show for unauthenticated users
     */

    // this show modal state will determine welcome component UI behaviour when the modals in the <Header/> is active
    const [showModal, setShowModal] = useState(false)

    const showModalHandler = () => {
        setShowModal(prevState => !prevState)
    }

    return (
        // Add overflow-hidden to the welcome component UI when modal in <Header/> is active
        <div className={`${showModal ? "overflow-y-hidden h-screen" : " "} app-style`}>
            <Header showModalHandler={showModalHandler}/>
            <Main />
            <Footer />
        </div>
    )
}

Welcome.js를 너무 길게 만들지 않기 위해 시작 페이지의 Header , Main 및 Footer 섹션에 대한 하위 구성 요소를 만들었습니다.

나는 이것을 구성 요소 디렉토리 내의 두 개의 새 폴더에 넣었습니다. 아래 이미지 참조:



코드 구조를 제대로 보려면 github repo here을 볼 수 있습니다.

#4 Tailwind CSS 사용 방법

마지막으로 Tailwind CSS에 대해 설명합니다.

Tailwind css를 사용하면 유틸리티 클래스를 사용하여 UI의 일부가 표시되는 방식을 자유롭게 지정할 수 있습니다.

모바일 우선 반응형 디자인을 만들기 위해 tailwind는 sm: , md: , lg: 및 xl: 3가지 유틸리티를 제공합니다.

이들은 접두어이며 작은 화면, 중간 화면, 큰 화면 및 초대형 화면을 나타냅니다.

접두사라고 하는 이유는 유틸리티 클래스가 작동해야 하는 화면을 지정하기 위해 다른 유틸리티 클래스 바로 앞에 배치하기 때문입니다. 예를 들어 md:border는 작은 화면에서 해당 요소에 테두리가 있어야 함을 의미합니다.

내 앱에서 시작 페이지의 배너 섹션에는 두 개의 열이 있습니다. 텍스트와 이미지가 서로 나란히 있습니다(스크린샷을 보려면 위로 스크롤).

이것을 만들기 위해 여기에 내 코드가 있습니다.

먼저 두 개의 열을 보유할 행에 대해 다음을 수행합니다.

<div className="grid grid-col-1 px-16
                lg:grid-cols-12 
                xl:gap-10 xl:my-10 xl:px-24">
</div>

모바일 화면에서는 열이 grid 에 표시되고 각 열이 전체 너비grid-col-1를 차지하며 왼쪽과 오른쪽 모두에 패딩px-16이 있어야 한다고 지정했습니다.

큰 화면(데스크톱)의 경우 열을 12개grid-cols-12로 나누었습니다. 행의 두 내용 사이에 12개의 열을 공유해야 합니다. 텍스트에 7개의 열을 제공합니다.

<div className="lg:col-span-7">Welcome to DevSpace Forum</div>

이미지 5 열 동안:

<img src="..." alt="..." className="lg:col-span-5" />

이것은 텍스트가 이미지보다 더 많은 공간을 차지한다는 것을 의미합니다.

그런 다음 초대형 화면에서 두 콘텐츠 사이의 간격을 10gap-10 , 위아래 여백을 10my-10 , 좌우 패딩을 24px-24 로 지정했습니다.

괜찮아. 바라건대 지금 요점을 이해하셨겠지만 걱정하지 않으셔도 됩니다.

나는 tailwind css에 초점을 맞춘 별도의 기사를 작성할 것입니다.

지금은 내 react 앱(예: DevSpace 포럼)을 appwrite(백엔드)와 통합할 것입니다.

백엔드용 코드를 작성할 필요가 없어서 다행입니다.

Appwrite 콘솔에는 필요한 모든 것이 있습니다.

이 시리즈의 다음 기사를 계속 지켜봐 주십시오.

안녕히 계세요! 👋