design react kit 다운로드 - design react kit 소스 코드 다운로드

design react kit

기타 소스코드

v5.5.0

다운로드

디자인 반응 키트

이것을 다른 언어로 읽으십시오 : 영어 ??.

켈 주의 :이 키트는 2.X 버전의 Bootstrap Italia와 함께 작동하도록 설계되었습니다. Bootstrap Italia의 버전 1.x에 대한 키트는 더 이상 사용되지 않았으며 Branch 4.x에 있습니다.

소개

Design React Kit는 부트 스트랩 이탈리아와 UI 키트 디자인의 스타일을 구현하는 반응 구성 요소 세트입니다. 라이브러리를 탐색하고 구성 요소를보기 위해 스토리 북이 사용되었습니다. The Storybook의 공개 버전은 여기에서 게시 된 최신 안정적인 릴리스를 위해 제공됩니다. Playground React Kit는 도서관과 함께 플레이 할 수 있습니다.

색인

색인
- 키트 사용 방법
  - 부트 스트랩-이탈리와 글꼴을 추가하십시오
  - 예
  - 글꼴 로딩
  - 피어 의존성
- 기여하는 방법?
  - 코드와 함께
  - 지역 환경을 설정하십시오
- 새로운 구성 요소를 만드는 방법
  - 스냅 샷 테스트
- 책장 편집
- 유용한 링크
- 브라우저 지원
- TypeScript 타이핑
- 도서관의 기여

키트 사용 방법

React Design을 앱의 중독으로 사용하려면 NPM에서 설치할 수 있습니다. create vite 사용하여 다음과 같이 새로운 WebApp React를 생성하는 것이 좋습니다.

yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --save

React를 사용하여 새로운 앱을 만들기위한 자세한 정보 :

공식 문서
vitejs

부트 스트랩-이탈리와 글꼴을 추가하십시오

design-react-kit CSS 및 글꼴 파일이 포함되어 있지 않으므로 별도로 설치해야합니다.

yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save

예

이 시점에서 ./src/App.js 파일 내부에서 create vite 경우 CSS 및 FONT 앱으로 명시 적으로 가져 오십시오.

 import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;

function App ( ) {
  return < Alert > This is an Alert </ Alert > ;
}

export default App ;

STACKBLITZ : 웹 템플릿 으로이 웹 템플릿을 참조 할 수 있습니다.

글꼴 로딩

Bootstrap Italia 테마는 titillium-web , roboto-mono 및 lora 의 특정 서체 글꼴 세트를 사용합니다. 이 글꼴의 로딩은 브라우저에 맡겨져 있지만 원하는 경우 적절한 FontLoader 구성 요소를 통해 제어 할 수 있습니다. 로드 할 수 있도록 React 앱의 상단에 FontLoader 구성 요소를 선언하면됩니다.

또는 webfontloader 패키지를 통해 수동으로 글꼴의 로딩을 관리해야합니다.

 const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
  custom : {
    families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
  }
} ) ;

피어 의존성

라이브러리에는 react 및 react-dom 포함되지 않으며, 버전의 충돌을 피하고 번들 크기의 쓸모없는 증가를 포함합니다. 이러한 이유로 지역 개발의 경우 수동으로 중독을 설치해야합니다.

수행해야 할 명령은 다음과 같습니다

yarn install --peers

또는 대안 적으로 수동으로

yarn install react react-dom

기여하는 방법?

? 다양한 방법으로 도서관에 기여할 수 있습니다.

코드를 사용하면 REACT 키트 문제에 아직 할당되지 않은 사람들 사이에서 문제를 담당합니다 (이 문제에 대한 의견은 의지에 대한 의견을 제시하기에 충분합니다).
버그 또는 공식 React 키트 저장소 개선에 대한 보고서를 통해.
전용 슬랙 채널에 글쓰기.

코드와 함께

Design React Kit에 도움을 주시겠습니까? 당신은 올바른 장소에 있습니다!

아직 그렇게하지 않은 경우 PA 웹 서비스에 대한 설계 지침에 대한 지식을 심화시키기 위해 몇 분을 보내고 Design React Kit에 기여하는 방법에 대한 표시를 참조하십시오.

지역 환경을 설정하십시오

지역 환경의 최소 요구 사항은 다음과 같습니다.

nodejs (> = 18)
방사

저장소를 복제하고 yarn 수행하여 중독을 설치하십시오. 그런 다음 수행하십시오

yarn storybook:serve

개발 서버를 시작합니다.

그런 다음 스토리 북은 http : // localhost : 9001/에서 제공됩니다.

스토리 북에는 더 많은 이야기를하는 addons 풍부 해졌습니다.

새로운 구성 요소를 만드는 방법

이 섹션에서는 저장소에서 새로운 구성 요소 작성을 안내합니다. 모든 구성 요소는 src 폴더에 있습니다. 각 구성 요소에는 작동하는 데 필요한 모든 것을 갖춘 폴더가 있습니다. Storybook 스토리는 대신 stories 아래에 있습니다. 단위 테스트는 test 폴더에 있습니다. 예를 들어, Button 구성 요소는 src/Button 경로 아래에 있으며 그 구조는 다음과 같습니다.

 ├── src
│    └── Button
│        └── Button.tsx
├── stories
│    ├── Components
│    │   └── Button.stories.tsx
│    └── Documentation
│        └── Button.mdx
└── test
     └── Button.test.tsx

구성 요소를 구성하기위한 몇 가지 기본 규칙 :

구성 요소의 TSX 파일 파일은 JSX 구문을 사용합니다.
.stories.tsx 파일에는 구성 요소 자체와 관련된 것만 포함해야합니다.
.mdx 파일은 구성 요소 자체와 관련된 문서 만 포함해야합니다.
.test.tsx 파일에는 구성 요소 자체와 관련된 테스트 만 포함되어야합니다.

새로운 구성 요소가 만들어지면 그의 스토리와 함께 시작 스토리 북은 모든 것이 필요한대로 작동하는지 확인할 수 있습니다.

선적 서류 비치:

스토리 북
MDX

스냅 샷 테스트

테스트 시스템은 "스냅 샷"테스트라는 기술을 통해 존재하는 스토리의 제어를 제공합니다. 스토리 북 스토리의 내용은 특수 파일로 복사되어 향후 변경 사항을 알리기 위해 보존됩니다. 이것은 새로운 이야기의 추가가 PR에서 "테스트"작업이 실패 할 수 있음을 의미합니다. 새로운 스토리가 추가되었거나 이미 존재하는 경우 스냅 샷 파일을 다음과 같이 업데이트해야합니다.