ReactJS 기반 설계 처음부터 UI 구축

이것은 Building a UI from scratch 시리즈의 첫 번째 글입니다.

제1부분:.

제2부분:.

제3부분:.

본고에서 우리는 디자인에 따라 UI를 구축할 것이다.우리는 Figma 를 사용하여 디자인을 시각화할 것입니다. 그러나 요소에서 CSS 코드를 추출할 수 있는 다른 도구를 사용할 수도 있습니다. 예를 들어 invisionapp, zeplin 등입니다.
읽기Spanish
현장 프레젠테이션: https://llorentegerman.github.io/react-admin-dashboard/
저장소: https://github.com/llorentegerman/react-admin-dashboard

Figma에 디자인 올리기

나는 이 공구를 상세하게 소개하지 않을 것이다. 우리는 단지 하나의 설계만 필요로 한다.

https://www.figma.com(무료)에서 계정을 생성합니다.

https://www.figmafreebies.com(무료)에서 Figma 파일을 무작위로 선택했습니다.선택한 파일은 다음과 같습니다.
내가 사용하는 것은 인터넷 버전의 Figma이기 때문에, 당신은 DOWNLOAD FREEBIES 단추를 눌러야 합니다. 디자인은 당신의 계정에 추가될 것입니다.

모든 요소를 두 번 클릭하고 오른쪽 열 code 옵션 카드에서 관련 css 코드를 볼 수 있습니다.

Figma Admin Dashboard UI Kit

응용 프로그램 만들기

이 단계에서는 다음을 사용합니다 .

npx create-react-app react-admin-dashboard

우리는 Create React App의 스타일과 aphrodite를 사용하여 배치할 것이다.yarn add aphrodite simple-flexbox 또는 npm install aphrodite simple-flexbox

단순 flexbox 폴더 구조:

이러한 상황에서 우리는 간단한 구조를 유지할 수 있다.

/src
    /assets
    /components
    App.js

시작합시다.

우리는 이미 시작할 준비가 되어 있다. 우선 우리는 디자인의 주요 부분을 확정해야 한다.다음 네 가지 주요 섹션으로 나누기로 결정했습니다.

1- Sidebar
2- Main Block
    3- Header
    4- Content

그림에서 보듯이 블록 3과 4는 블록 2 안에 있습니다.

사이드 바

우리는 사이드바를 두 부분으로 나눌 수 있다. Logo 블록과 MenuItem 목록이다.
세 가지 구성 요소가 필요합니다.

1- SidebarComponent
    2- LogoComponent
    3- MenuItemComponent (list)

로고와 메뉴 항목을 정의하기 시작합니다.

로고 구성 요소.회사 명

먼저 로고를 다운로드해야 합니다(로고를 두 번 클릭하고 Design 탭으로 이동한 다음 아래의 내보내기 단추를 누르십시오).svg 형식으로 다운로드하고 React 구성 요소로 가져와서 복사합니다 .LogoComponent.js는 수직과 수평이 중간Row이고 Logo와 title가 있다.

스타일에 대해 Muli 글꼴 시리즈를 가져와야 합니다. 간단한 방법은 이 줄을 click here에 포함하는 것입니다. (나머지 내용은 삭제할 수 있습니다. 필요하지 않습니다):

@import url('https://fonts.googleapis.com/css?family=Muli');

이것들은container과title

container: {
    marginLeft: 32,
    marginRight: 32
},
title: {
    fontFamily: 'Muli',
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontSize: 19,
    lineHeight: '24px',
    letterSpacing: '0.4px',
    color: '#A4A6B3',
    opacity: 0.7,
    marginLeft: 12 // <--- necessary to separate title and logo
}

App.css

전체 파일 보기: LogoComponent.회사 명 메뉴 항목 구성 요소.회사 명

는 메뉴를 대표하는 항목으로 icon과title로 구성되어 있으며, 그 자체의 상태에 따라 다른 양식active,unactive,hover을 가지고 있다.활성 상태이면 왼쪽에 흰색 줄이 있습니다

보시다시피 active 속성에 따라 특수한 양식이 있습니다. 예를 들어 title 이 active 일 때 true 는 서로 다른 색을 가지고 있습니다.아이콘의 경우 기본 채우기#9FA2B4, 기본 불투명도1로 이러한 값은 상기 속성의 상태에 따라 달라집니다

항목이 active일 때 나타나는 특수 요소 중 하나는 왼쪽의 흰색 막대(activeBar

다음은 스타일:

activeBar: {
    height: 56,
    width: 3,
    backgroundColor: '#DDE2FF',
    position: 'absolute',
    left: 0
},
activeContainer: {
    backgroundColor: 'rgba(221,226,255, 0.08)'
},
activeTitle: {
    color: '#DDE2FF'
},
container: {
    height: 56,
    cursor: 'pointer',
    ':hover': {
        backgroundColor: 'rgba(221,226,255, 0.08)'
    },
    paddingLeft: 32,
    paddingRight: 32
},
title: {
    fontFamily: 'Muli',
    fontSize: 16,
    lineHeight: '20px',
    letterSpacing: '0.2px',
    color: '#A4A6B3',
    marginLeft: 24
}

View full file: MenuItemComponent.js SidebarComponent.js

우리가 로고에 대해 한 바와 같이 이 구성 요소에서 사용할 아이콘을 다운로드해야 합니다. 디자인에서 다운로드할 수도 있고 저장소 의 폴더assets에서 복사할 수도 있습니다

디자인에서 추출한 css을 바탕으로 우리는 다음과 같은 세 가지 유형으로 스타일을 정의할 수 있다.

container: {
    backgroundColor: '#363740',
    width: 255,
    paddingTop: 32
},
menuItemList: {
    marginTop: 52
},
separator: {
    borderTop: '1px solid #DFE0EB',
    marginTop: 16,
    marginBottom: 16,
    opacity: 0.06
}

clicking here

SidebarComponent이 준비되었습니다. 저장소에 onClick 이벤트와 하나state를 추가하여 상호작용을 하기 때문에 다른 메뉴 항목을 선택할 수 있습니다

View full file: SidebarComponent.js MainComponent (App.js)

지금 우리는 App.js에서만 일할 수 있다. 우리가 말한 바와 같이 다음과 같은 구조를 가지고 있다.

1- Sidebar
2- Main Block
    3- Header
    4- Content

다음과 같이 정의할 수 있습니다:

스타일:

container: {
    height: '100vh' // menu has to take all the height of the screen
},
content: {
    marginTop: 54
},
mainBlock: {
    backgroundColor: '#F7F8FC',
    padding: 30
}

View full file: App.js HeaderComponent.js

마지막으로, 우리는 다음과 같은 구조로 제목을 정의할 것이다

1- Row ({ vertical: center, horizontal: space-between })
    2- Title
    3- Row ({ vertical: center })
        4- Icons
        5- Separator
        6- Row ({ vertical: center })
            7- Name
            8- Avatar

제목 스타일:

avatar: {
    height: 35,
    width: 35,
    borderRadius: 50,
    marginLeft: 14,
    border: '1px solid #DFE0EB',
},
container: {
    height: 40
},
cursorPointer: {
    cursor: 'pointer'
},
name: {
    fontFamily: 'Muli',
    fontStyle: 'normal',
    fontWeight: 600,
    fontSize: 14,
    lineHeight: '20px',
    textAlign: 'right',
    letterSpacing: 0.2
},
separator: {
    borderLeft: '1px solid #DFE0EB',
    marginLeft: 32,
    marginRight: 32,
    height: 32,
    width: 2
},
title: {
    fontFamily: 'Muli',
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontSize: 24,
    lineHeight: '30px',
    letterSpacing: 0.3
}

내용은 다른 글에서 설명할 것이다

읽어주셔서 감사합니다