React용 7대 UI 라이브러리 및 키트

작성자Chidume Nnamdi✏️
React는 현재 JavaScript 먹이사슬의 꼭대기에 있습니다.Stack Overflow2020 Developer Survey에 참여한 개발자들은 React가 그들이 선택한 자바스크립트 프레임워크라고 투표했다.
그 유행으로 많은 UI 라이브러리는 개발자의 경험을 통합하고 개선하기 위해 맞춤형 React 구성 요소를 구축했다.
현재 수많은 React UI 키트와 라이브러리가 있습니다.이 설명서에서는 가장 유용한 7개의 키트와 라이브러리를 중점적으로 소개하고 다음 React 응용 프로그램에서 사용하는 방법을 보여 줍니다.그중 일부는 인기가 많고 일부는 모호하며 그 중 어느 것이든 당신의 다음 프로젝트의 독특한 수요를 해결하는 데 도움을 줄 수 있습니다.

1.파편반응

Shards React는 DesignRevision에서 만든 새 UI 라이브러리입니다.그것은 현대 개발의 최적 실천에 따라 처음부터 구축된 것으로 매우 빠른 성능을 실현할 수 있다.

조각부터 시작해서 쉬워요.

npm i shards-react

이제 어셈블리와 필요한 스타일을 가져올 수 있습니다.

import { Button } from "shards-react"
import "shards-ui/dist/css/shards.min.css"

function ButtonsEx() {
    return (
        <div>
            <Button>Primary</Button>
            <Button theme="info">Info</Button>
        </div>
    )
}

이러한 명령은 Shards UI 스타일의 버튼 두 개를 표시합니다.
보시다시피 조각은 사용하기 쉽습니다.조각 및 해당 구성 요소에 대한 자세한 내용은 documentation를 참조하십시오.

2. 리액션 스위트룸

또 하나의 훌륭한 React UI 키트React Suite는 말 그대로 React 구성 요소 세트입니다.또한 중간 플랫폼 및 백엔드 제품을 위해 설계된 합리적인 UI 디자인과 편리한 개발 환경을 제공합니다.

GitHub에 로그인하여 확인하십시오.
키트는 quite simple to use입니다.우선pm를 통해 설치합니다.

npm i rsuite --save

React 스위트룸은 대량components 스위트룸을 보유하고 있다.그 중 하나를 사용하려면 rsuite에서 재구성하면 된다.
방대한 구성 요소 탱크의 구성 요소를 사용하려면 rsuite에서 구성 요소를 해체하기만 하면 됩니다.

import { Button } from "rsuite"

3. 반응

PrimeReact는 내가 본 것 중 가장 특별한 React UI 키트 중 하나이다.70개 이상의 구성 요소를 선택할 수 있으며, 전방 설계와 개발을 진정으로 가속화시켰다.

이 UI 키트는 PrimeTek Informatics로 구성됩니다.
각양각색의 구성 요소를 제외하고PrimeReact는 맞춤형 테마, 고급 응용 프로그램 템플릿, a11y와 응답성이 강하고 터치를 지원하는 UI 구성 요소를 제공하여 어떠한 장치에서든 뛰어난 UI 체험을 제공할 수 있다.
자세한 내용은 PrimeReact onGitHub을 참조하십시오.
이 키트는 설치하기 쉽다install and use.

npm i primereact --save

아이콘의 경우 PrimeIcons 라이브러리를 다운로드할 수 있습니다.

npm i primeicons --save

구성 요소를 사용하려면 구성 요소 문서의 가져오기 섹션에서 해당 구성 요소를 가져옵니다.

import { Button } from "primereact/button"

function PrimeButtonEx() {
    return (
        <div>
            <Button>Button</Button>
        </div>
    )
}

4. 로프 링

Part 디자인, Part frameworkGrommet는 React 기반의 UI 라이브러리입니다.그것은 nice set of components의 기능을 가지고 있어 가동하기 쉽다.또한 라이브러리는 원하는 레이아웃, 색상 및 유형에 따라 구성 요소 라이브러리를 사용자정의할 수 있는 강력한 주제화 도구를 제공합니다.

Grommet Design Kit는 레이아웃과 구성 요소를 쉽게 디자인할 수 있는 드래그 앤 드롭 도구입니다.스티커, 프로그램 템플릿, 아이콘이 많습니다.

로프 루프를 설정하려면 React 응용 프로그램에서 다음 명령을 실행합니다.

npm i grommet

Button와 같은 구성 요소를 사용하려면 "grommet" 패키지에서 분해하십시오.

import { Grommet, Button } from "grommet"

function GrommetButtonEx() {
    return (
        <Grommet className="App">
            <Button
                label="Button" 
            />
        </Grommet>
    )
}

5.onsen 사용자 인터페이스

만약 웹 응용 프로그램을 원생하게 느끼고 싶다면, 이 UI 라이브러리는 당신을 위해 준비한 것입니다.Onsen UI 휴대폰과 같은 감각을 통해 사용자 체험을 풍부하게 하기 위한 것이다.기본 iOS 및 Android 장치에 대한 UI 환경을 제공하는 기능이 포함되어 있습니다.

원슨의 UI 요소와 구성 요소는 본기에서 디자인한 것으로 혼합 응용 프로그램과 웹 응용 프로그램 개발에 매우 적합하다.이 라이브러리는 페이지 변환, 애니메이션, 파문 효과, 팝업 모드를 모의할 수 있습니다. 기본적으로 기본 안드로이드와 iOS 장치에서 찾을 수 있는 모든 효과입니다.

찾기 쉽다use Onsen in a React app.우선 npm 패키지를 설치합니다.

npm i onsenui react-onsenui --save

onsenui에는 Onsen UI 코어 인스턴스가 포함되어 있습니다.react-onsenui 반응 성분을 포함한다.

import { Page, Button } from "react-onsenui"

function OnsenButtonEx() {
    return (
        <Page>
            <Button> Click Me!!</Button>
        </Page>
    )
}

그런 다음 onsen CSS를 가져옵니다.

import "onsenui/css/onsenui.css"
import "onsenui/css/onsen-css-components.css"

나는 Onsen UI를 웹의 기본 CSS라고 부르는 것을 좋아한다.

6. 재료 인터페이스

소재 UI는 구글의 소재 디자인을 기반으로 한다.재료 설계를 사용하여 구성할 어셈블리를 제공합니다.

설치하려면 다음 명령을 실행합니다.

npm i @material-ui/core

다음에 사용할 구성 요소를 @material-ui/core에서 가져옵니다.

import Button from "@material-ui/core/Button"

function MatButtonEx() {
    return (
        <div>
            <Button color="primary">
                Button
            </Button>
        </div>
    )
}

Material UI는 또한 멋진 premium themes and templates를 제공하여 프로젝트를 시작할 수 있습니다.
GitHub에서 원본 코드를 찾습니다.

7. 반응 유도

말 그대로 React Bootstrap는 세계에서 가장 유행하는 CSS 프레임워크인 Bootstrap을 사용하여 구축된 React 구성 요소를 제공합니다.
React Bootstrap은 자바스크립트를 안내하는 데 대부분의 의존 항목을 삭제했습니다. 예를 들어 jQuery 같은 경우, 구축은 호환성과 a11y를 고려했습니다.그것은 또한 각양각색components을 갖추고 있다.

프로젝트에 install React Bootstrap를 추가하려면 다음 명령을 실행하십시오.

npm i react-bootstrap

개별 구성 요소를 가져올 수 있습니다.

import Button from "react-bootstrap/Button"

function BootstrapButtonEx() {
    return (
        <div>
            <Button>
                Click Me
            </Button>
        </div>
    )
}

GitHub의 소스 코드를 참조하십시오.

영예상

다음은 인기 없지만 언급할 만한 UI 라이브러리입니다.

React Semantic UI

AtlasKit

Belle

Blueprint UI

Elemental UI

Fabric React

ReaKit

Rebass

결론

이 가이드에서는 Shard와 같은 혁신적인 초보자부터 Google의 재료 디자인과 트위터의 Bootstrap 같은 인기 있는 충실한 사용자까지 포괄적인 React UI 패키지 목록을 소개합니다.인기가 적지만 여전히 영향력이 큰 React UI 키트도 나열되어 있습니다.
이제 다음 프로젝트에 적합한 UI 키트를 선택하는 데 필요한 기본 지식이 필요합니다.

운영 애플리케이션에 대한 포괄적인 이해

React 애플리케이션을 디버깅하는 것은 특히 재현하기 어려운 문제가 발생할 경우 어려울 수 있습니다.Redux 상태 모니터링 및 추적, JavaScript 오류 자동 표시, 느린 네트워크 요청 추적 및 구성 요소 로드 시간에 관심이 있는 경우try LogRocket.

LogRocket 마치 인터넷 응용 프로그램의 DVR처럼 당신의React 응용 프로그램에서 발생한 모든 것을 기록합니다.문제가 발생한 원인을 추측할 필요가 없습니다. 문제가 발생했을 때의 응용 프로그램의 상태를 종합하고 보고할 수 있습니다.LogRocket은 또한 어플리케이션의 성능을 모니터링하고 클라이언트 CPU 로드, 클라이언트 메모리 사용 등의 지표를 사용하여 보고할 수 있습니다.
LogRocket Redux 중간 패키지는 사용자 세션에 대한 가시성을 추가합니다.LogRocket은 Redux 스토어의 모든 작업 및 상태를 기록합니다.
React 애플리케이션을 디버그하는 방식을 현대화 - start monitoring for free.
게시물Top 7 UI libraries and kits for React이 가장 먼저LogRocket Blog에 올라왔다.