React로 대시 보드 앱을 만드는 방법

1/2 페이지 : React에서 대시 보드 앱 만들기 – 1-10 단계

이 튜토리얼에서는 앱 만드는 방법 사용 반응 – 사용자 인터페이스 구축을위한 JavaScript 라이브러리. 이 웹 디자인 도구 구성 요소 생성과 관련하여 특히 유용하며 jQuery와 같은 것에 비해 상당한 이점을 제공합니다.

독립적이고 재사용 가능한 구성 요소를 생성 할 수 있다는 것은 코드를 더 작고 체계적으로 유지할 수 있음을 의미합니다. 구성 요소가 충분히 잘 설정되어 있으면 추가 설정없이 필요한 곳에 놓을 수 있습니다.



이 자습서에서는 중요한 지원 메트릭을 주시하는 대시 보드 응용 프로그램을 만들 것입니다. 화면은 그리드로 분할되어 표시해야하는 데이터에 따라 다른 시각적 개체를 표시하도록 사용자 지정할 수 있습니다.



일반적인 위젯 구성 요소를 만들면 기본 코드에 영향을주지 않고 디스플레이를 자르고 변경할 수 있습니다. 이를 컨테이너 구성 요소에 래핑하면 해당 데이터의 소스를 표시와 별도로 제어 할 수 있습니다.

우리는 사용할 것입니다 CSS 그리드 정의 된 블록에 콘텐츠를 표시합니다. 이를 지원하지 않는 브라우저는 작은 화면을 사용할 때와 마찬가지로 단일 열에 표시됩니다.



어도비 인디자인 무료 다운로드 균열

이 자습서 용 파일 다운로드 여기 .

01. 의존성 다운로드

프로젝트 파일을 가져온 후 프로젝트에 필요한 모든 필수 패키지를 가져와야합니다. 여기에는 빌드 프로세스를 다루는 'create-react-app'의 파일이 포함됩니다.

또한 두 개의 서버를 실행해야합니다. 하나는 페이지에 대한 핫 리로딩을 제공하고 다른 하나는 테스트 할 가짜 데이터를 제공합니다.



프로젝트 디렉토리에있는 동안 명령 줄에 다음을 입력합니다.

/* in one window */ > yarn install > yarn start /* in another window */ > yarn serve

02. 첫 번째 위젯 추가

반응 대시 보드 앱

간단한 구성 요소로 시작

시작하기 위해 페이지에 간단한 구성 요소를 렌더링합니다. Babel을 설정하면 ES2015 클래스를 사용하여 구성 요소를 작성할 수 있습니다. 우리가해야 할 일은 필요할 때 가져 오기만하면 나머지는 Webpack이있는 Babel이 알아서합니다.

열다 /src/components/App.js 페이지 상단에 가져 오기를 추가합니다. 그런 다음 render 함수 내에서 구성 요소를 컨테이너 안에 배치합니다. .

사진에 사람을 추가하는 방법
import Widget from '../components/Widget'; […]

03. 위젯 상자 스타일 지정

반응 대시 보드 앱

Webpack을 사용하여 CSS를 가져올 때 스타일이 페이지의 다른 부분으로 유출되는 것을 방지하기 위해 해당 구성 요소로만 범위를 지정할 수 있습니다.

이 프로젝트에서 Webpack은 CSS 가져 오기를 선택하도록 설정되었습니다. 즉, 이전 단계에서 JavaScript로했던 것처럼 CSS 파일을 가져올 수 있으므로 각 구성 요소에 대해 별도의 파일을 만들 수 있습니다. Widget.js 상단에 다음 가져 오기를 추가합니다. 이것은 'Widget'className과 연결되고 스타일을 해당 구성 요소로 범위 지정합니다.

import '../styles/Widget.css';

04. 제목 및 내용 추가

각 위젯에는 표시되는 데이터에 대한 간단한 설명이 필요합니다. 사용자 정의 가능한 상태로 유지하기 위해이를 사용할 때 구성 요소에 속성 (또는 'prop')으로 전달합니다.

콘텐츠의 경우 React는 구성 요소의 여는 태그와 닫는 태그 사이에 입력 된 콘텐츠를 포함하는 특수한 '자식'소품을 제공합니다.

자리 표시 자 바꾸기

{this.props.heading}

{this.props.loading ? :''} {this.props.children}

05. 위젯이 그리드에 걸쳐 있도록합니다.

반응 대시 보드 앱

CSS 그리드 사양을 사용하면 하위 요소에 적용된 스타일에 관계없이 거터와 같은 레이아웃 요소가 적용됩니다.

가져 오는 스타일 시트 외에도 전달 된 소품을 기반으로 동적으로 React 스타일을 만들 수 있습니다.

CSS Grid로 열과 행을 확장하려면 grid-column 및 grid-row 속성을 사용합니다. 'colspan'및 'rowspan'props를 통해 HTML에서 테이블 셀이 작동하는 방식과 유사한 방식으로 구성 요소별로이를 변경할 수 있습니다.

위젯 생성자에 스타일을 적용하고 컨테이너에 연결 .

if (props.colspan !== 1) { this.spanStyles.gridColumn = `span ${props.colspan}`; } if (props.rowspan !== 1) { this.spanStyles.gridRow = `span ${props.rowspan}`; } […]

06. 기본 소품 제공

아직 소품을 제공하지 않았기 때문에 현재 위젯은 비어 있습니다. 이 경우 대신 사용할 기본 소품을 제공 할 수 있습니다.

달리 말하지 않는 한, CSS 그리드는 기본적으로 가능한 가장 작은 단위를 차지합니다.이 경우에는 1x1 정사각형입니다. 위젯을 내보내기 직전에 해당 효과에 기본 소품을 제공하십시오.

Widget.defaultProps = { heading: 'Unnamed Widget', colspan: 1, rowspan: 1 }

07. 특정 소품 시행

반응 대시 보드 앱

NumberDisplay 컴포넌트는 내부 상태가없고 전달 된 소품에 전적으로 의존하기 때문에 '표현적인'컴포넌트입니다.

컴포넌트는 어떤 유형의 값을 소품으로 보내야하는지에 대한 힌트를 제공 할 수 있습니다. 응용 프로그램을 개발하는 동안 잘못 전달 된 props는 콘솔에 경고로 표시되어 버그를 방지 할 수 있습니다.

기본 소품 바로 아래에서 전달해야하거나 전달해야하는 소품과 유형을 정의합니다.

Widget.propTypes = { heading: React.PropTypes.string, colspan: React.PropTypes.number, rowspan: React.PropTypes.number, children: React.PropTypes.element.isRequired }

08. 앱에 소품 추가

필요에 따라 'children'소품을 정의하면 브라우저가 현재 정의되지 않았다고 불평하는 것을 알 수 있습니다. 이것이 앱을 손상 시키지는 않지만 정렬 될 때까지 계속해서 우리를 괴롭힐 것입니다.

App.js로 돌아가서 앞서 만든 위젯에 제목 소품을 추가합니다. 태그가 자동으로 닫히도록하는 대신 열어서 자리 표시 자 콘텐츠를 추가하여 작동하는지 표시합니다.

This is some content

09. 일부 데이터 표시

반응 대시 보드 앱

포토샵에서 레이어를 가로로 뒤집는 방법
CSS에서 @supports 구문을 사용하여 브라우저가 그리드 레이아웃을 지원하는지 여부를 감지 할 수 있습니다. 그렇지 않은 경우 기본적으로 단일 열보기로 설정됩니다.

NumberDisplay 구성 요소는 방금 만든 위젯과 매우 유사하게 작동합니다. 우리가 전달하는 소품을 기반으로 일부 텍스트를 렌더링합니다. 필요한 곳에 놓아 숫자 데이터를 일관되게 표시 할 수 있습니다.

상단의 NumberDisplay 구성 요소를 가져 와서 위젯에 방금 추가 한 자리 표시 자 콘텐츠를 대체하는 데 사용합니다.

import NumberDisplay from '../components/NumberDisplay'; […]

10. NumberWidget으로 변환

현재 위젯간에 변경되지 않는 것을 표시하는 데 사용되는 코드가 상당히 많습니다. 우리는 모든 것을 캡슐화하는 특별한 구성 요소를 만들 수 있습니다. 이렇게하면 NumberWidget 만 가져 오면됩니다.

App.js 상단의 Widget 및 NumberDisplay 가져 오기를 NumberWidget으로 바꿉니다. render 메서드에서도 교체해야합니다.

import NumberWidget from '../components/NumberWidget'; […]

다음 페이지 : React에서 대시 보드 앱 완성

  • 1

현재 페이지: React에서 대시 보드 앱 만들기 – 1-10 단계

다음 페이지 React에서 대시 보드 앱 만들기 – 11-21 단계