분류 Reactjs

2019년 상위 10 개 React UI 키트 개요

컨텐츠 정보

  • 조회 535 (작성일 )

본문

React는 사용자 인터페이스를 구축하고 재사용 가능한 컴포넌트를 작성하는 데 널리 사용되는 JavaScript 라이브러리입니다. 이러한 구성 요소는 처음부터 개발할 수 있지만 시작하고 실행할 수 있는 다른 방법이 있습니다. 개발에 UI 키트를 사용함으로써 개발 프로세스의 시간과 일관성이 줄어 듭니다.


React UI 키트는 버튼, 모달, 확인란 등을 포함하여 이미 준비된 포괄적인 리소스 세트입니다. 개발자는 합리적인 타임 라인에서 뛰어난 시각 효과를 만들고 디자인 개발 시간과 비용을 처음부터 줄일 수 있습니다. 이 기사에서는 2019 년에 사용할 10 가지 React UI 키트를 검토 할 것입니다.


AtlasKit 


atlaskit home page 


AtlasKit은 Atlassian의 공식 UI 라이브러리이며 Atlassian 설계 지침에 따라 구축되었습니다. 프로젝트에 독립적으로 다운로드 할 수 있는 재사용 가능한 구성 요소 모음이며 각 구성 요소는 독립적으로 버전이 지정되어 npm에 게시됩니다. Atlas UI 키트에는 응용 프로그램에서 사용할 수 있는 광범위한 구성 요소가 포함 된 특정 이점이 있습니다.


이 키트는 엔터프라이즈 응용 프로그램 또는 방문 페이지를 작성하는 데 사용할 수 있는 확장 가능한 라이브러리이지만 각 구성 요소를 별도의 패키지로 사용하는 것에 대해 전혀 만족하지 않습니다. 이것이 의미하는 것은 사용할 모든 구성 요소에 대해 새 패키지를 설치해야 합니다. Jira, BitBucket 및 Atlas Starter 키트 등은 현재 Atlas UI 키트를 사용하여 구현 된 일부 프로젝트입니다.


Belle 


belle ui kit 


Belle은 가장 흥미로운 React UI 키트 중 구성 가능한 React 구성 요소이며, 각 구성 요소에 대해 개별적으로뿐만 아니라 기본 수준에서 구성 할 수 있는 고도로 사용자 정의 가능한 스타일로 모바일 및 데스크탑에 최적화되어 있습니다. Belle은 사용하기 쉽고 원칙적으로 개발자와 상호 작용하는 최종 사용자 모두에게 일관된 동작과 디자인을 가져야 한다는 원칙을 기반으로 합니다. 제한적인 유일한 것은 다른 UI 키트에 비해 사용 가능한 구성 요소가 훨씬 적다는 것입니다. 그러나 현재 핵심 팀 이이 작업을 수행하고 있습니다. 또한 모바일 및 ARIA 및 Github에서 2.3k 이상의 별을 지원합니다.


Blueprint UI 


blueprint home page 


Blueprint UI는 데스크탑 애플리케이션을위한 복잡한 데이터 밀도 인터페이스를 구축하기 위해 최적화 된 React 기반 UI 툴킷입니다. Github에서 14k 개 이상의 별과 npm에서 56k 주간 다운로드로 고려할 때 훌륭한 UI 키트이며 상자에서 모든 구성 요소에 대한 접근성 표준을 제공하기 위해 노력하고 있으며 밝고 어두운 테마 모드가 번들로 제공됩니다. Chrome, Firefox, Safari, IE 11 및 Microsoft Edge를 지원하므로 브라우저 간 지원이 가능합니다. Onedot와 OnVoard는 현재 이를 사용하는 회사입니다.


Elemental UI


elementalui.png?resize=730%2C249&ssl=1 


Elemental UI는 프로젝트의 실제 요구 사항을 해결하고 눈에 거슬리지 않는 기본 스타일과 유연한 테마 기능으로 자체 또는 함께 유용한 기능적 구성 요소 세트를 개발하기 위해 작성된 툴킷입니다. 일부 구성 요소에는 양식, 단추, 카드 및 모달이 포함됩니다. 이 프로젝트는 아직 개발 중이지만 이미 GitHub에서 별 4k 개 이상, npm에서 매주 4k 회 다운로드를 받았으며 MIT 라이센스에 따라 사용할 수 있습니다. Utry와 Vacalians는 Stackshare에 따라 현재 그것을 사용하는 회사의 예입니다.


Fabric React 


microsoft fabric 


Fabric은 Office 및 Office 365를 포함한 Microsoft 제품에 대한 경험을 구축하기 위한 React 기반 프런트 엔드 프레임 워크입니다. Office Design Language를 사용하여 일관된 웹 경험을 간단하게 만들 수 있도록 설계된 강력한 UI 구성 요소 모음입니다. CSS-in-JS를 사용하여 사용자 정의 할 수 있는 강력하고 최신의 액세스 가능하며 오픈 소스 구성 요소를 제공합니다. GitHub에 5k 개 이상의 별이 있고 npm에 매주 92k 개의 다운로드가 있는 이 도구는 훌륭한 웹 경험을 위해 탭을 유지하기 위한 UI 키트입니다.


Grommet 


grommet homepage 


Grommet은 깔끔한 패키지로 접근성, 모듈성, 응답 성 및 테마를 제공하는 반응 기반 프레임워크이며, 웹에서 모바일 우선, 응답 성 및 액세스 가능하도록 제작되었습니다. GitHub에서 4k + 별과 npm에서 61k 주간 다운로드를 통해 Twilio, HP, Samsung 및 기타 여러 회사에서 활발하게 사용됩니다.


Prime React 


prime react 



Prime React는 React 용 오픈 소스 UI 키트입니다. MIT 라이센스에 따라 출시되었으며 사용하기 쉬운 구성 요소가 70 가지가 넘습니다. GitHub에 1k + 별과 npm에 9k + 주간 설치가있는 American Express, FOX, SAP 및 기타 위대한 ​​조직에서 사용합니다.


ReaKit 


reakit home page 


Reakit은 React를 사용하여 액세스 가능한 다양한 웹 앱 및 디자인 시스템을 구축하기위한 UI 툴킷입니다. React에서 다양한 UI를 신속하게 구성 할 수있는 일련의 구성 요소를 제공하므로 빠른 프로토 타이핑에서 프로덕션에 이르기까지 모든 작업에 적합합니다. Reakit은 WAI-ARIA 1.1 표준을 엄격하게 준수하며 버튼, 대화 상자, 탭 등과 같은 WAI-ARIA Authoring Practices 1.1에 설명 된 많은 위젯을 제공합니다. GitHub에서 3k 개 이상의 별 개수와 npm에서 3k 회 이상 주간 다운로드를 통해 개발 프로세스 전체에서 일관성을 유지하고 접근성 표준을 적극적으로 지원하는 원칙으로 구축되었습니다.


Rebass 


rebass 


Rebass는 스타일 시스템으로 구축 된 UI 키트 및 디자인 시스템이며 무게가 ~ 1KB에 불과한 초소형 파일에 기본 구성 요소가 8 개뿐입니다. 구성 요소는 반응 형이며 사용 가능하며 Flexbox 및 Grid 레이아웃을 지원하여 반응 형 웹 디자인에 적합합니다. 이 프로젝트는 현재 Github에서 5k 개 이상의 별을 보유하고 있습니다.


Shards React 


shards react 


Shards React는 수십 가지의 고품질 사용자 컴포넌트가 있는 최신 React UI 툴킷입니다. Shards React는 빠른 개발을 위해 최근 개발 모범 사례를 따르면서 처음부터 새로 만들어졌으며, 무게가 ~ 12kb에 불과한 경량화 된 스타일 시트로 축소 및 압축 되었습니다.


결론 


React UI 키트를 사용하면 고유 한 UI 구성 요소 세트와 더 많은 개발 워크 플로우를 위해 선택할 수 있는 다양한 UI 키트를 사용하여 반응 형 응용 프로그램을 구축 할 수 있습니다. 이 기사에서는 테마가 있고 사용자 정의 가능한 애플리케이션을 빌드 하기 위해 React 프로젝트에 사용해보고 통합 할 수 있는 React UI 키트 목록을 보았다. 여기에 나열되지 않은 다른 React UI 키트가 있으면 의견 섹션에 알려주십시오.