React에 적합한 UI 라이브러리 및 키트

React는 가장 유행하는 전단 프레임 중의 하나이다.2020년 개발자 조사에 따르면 react가 가장 인기 있는 자바스크립트 프레임워크로 선정됐다.
그 유행으로 많은 UI 라이브러리는 개발자의 경험을 통합하고 개선하기 위해 맞춤형 React 구성 요소를 구축했다.
현재 많은 react Ui 키트와 라이브러리를 사용할 수 있습니다.다음 React 프로그램에서 사용할 수 있는 가장 유용한 도구 패키지와 라이브러리를 제공합니다.그중 일부는 인기가 많고 일부는 모호하며, 그 중 일부는 다음 프로젝트의 독특한 수요를 해결하는 데 도움을 줄 수 있다.

파편은 반응한다

공유는 디자인revision에서 만든 react UI 라이브러리입니다.그것은 현대 개발의 최적 실천에 따라 처음부터 구축된 것으로 매우 빠른 성능을 실현할 수 있다.
npm를 통한 간편한 설치:

npm i shards-react

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

import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";
export default function ButtonsEx() {
  return (
    <div>
      <Button>Primary</Button>
      <Button theme="info">Info</Button>
    </div>
  );
}

이러한 명령은 Shards UI 스타일의 버튼 두 개를 표시합니다.위 코드의 출력은 다음과 같다.

반응 스위트룸

말 그대로 모든 성분에 적합하다.또한 중간 플랫폼 및 백엔드 제품을 위해 설계된 합리적인 UI 디자인과 편리한 개발 환경을 제공합니다.
npm를 통한 간편한 설치:

npm i rsuite --save

React Suite에는 많은 구성 요소가 있습니다.그 중 하나를 사용하려면rsuite에서 다시 구성하십시오.
방대한 구성 요소 탱크의 구성 요소를 사용하려면 rsuite에서 구성 요소를 해체하기만 하면 됩니다.

import{Button}from"rsuite"

export default function ButtonsEx() {
  return (
    <div>
      <Button>Primary</Button>
    </div>
  );
}

위 코드의 출력은 다음과 같다.

주반응

Prime React는 가장 일반적인 React UI 키트 중 하나입니다.그것은 70여 개의 구성 요소를 선택할 수 있다.사용자 인터페이스 키트는 PrimeTek Information에서 설계되었습니다.
다양한 구성 요소를 제외하고 Prime Reactfeature의 맞춤형 테마, 고급 응용 프로그램 템플릿, a11y와 응답성이 강하고 터치가 지원되는 UI 구성 요소는 모든 장치에서 뛰어난 UI 체험을 제공할 수 있습니다.
npm를 통해 설치

npm i primereact --save

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

npm i primeicons --save

어셈블리를 사용하려면 다음과 같이 하십시오.

import { Button } from "primereact/button";

export default function ButtonsEx() {
  return (
    <div>
      <Button>Primary</Button>
    </div>
  );
}

위 코드의 출력은 다음과 같다.

로프 링

Grommet은 React를 기반으로 한 프레임워크로 깔끔한 패키지에서 접근성, 모듈화, 응답성, 주제를 제공합니다.
Grommet은 쉽게 사용할 수 있는 구성 요소 라이브러리를 통해 웹에 응답이 빠르고 접근하기 쉬운 모바일 퍼스트 프로젝트를 구축하는 데 도움을 줍니다.
또한 라이브러리는 원하는 레이아웃, 색상 및 유형에 따라 구성 요소 라이브러리를 사용자정의할 수 있는 강력한 주제화 도구를 제공합니다.
grommet의 가장 좋은 점은 기존 프로젝트나 새로운 프로젝트와 쉽게 통합할 수 있다는 것이다.
npm를 통해 로프 고리를 설정하려면:

npm i grommet

Button과 같은 어셈블리를 사용하려면 번들 패키지에서 어셈블리를 분리합니다.

import { Grommet, Button } from "grommet";

export default function ButtonsEx() {
  return (
    <div>
      <Grommet className="App">
        <Button label="Button" />
      </Grommet>
    </div>
  );
}

위 코드의 출력은 다음과 같다.

앙센 시

온센은 모바일 퍼스트 디자인을 고려한 구성 요소 라이브러리다.그것은 큰 프레임워크 의존 관계가 없는 순수한 자바스크립트로 작성되었다.다시 말하면, 이것은 엄격한 의미의 React 기반 라이브러리가 아니라, 모든 주요 UI 프레임워크에 사용할 수 있습니다.
기본 iOS 및 Android 장치에 대한 UI 환경을 제공하는 기능이 포함되어 있습니다.
원슨의 UI 요소와 구성 요소는 본기에서 디자인한 것으로 혼합 응용 프로그램과 웹 응용 프로그램 개발에 매우 적합하다.이 라이브러리는 페이지 변환, 애니메이션, 파문 효과, 팝업 모드를 모의할 수 있습니다. 기본적으로 기본 안드로이드와 iOS 장치에서 찾을 수 있는 모든 효과입니다.
npm를 통해 설치:

npm i onsenui react-onsenui --save

onsenui에는 Onsen UI 핵심 인스턴스가 포함되어 있습니다.react onsenui는 react 구성 요소를 포함합니다.

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

export default function ButtonsEx() {
  return (
    <Page>
      <Button> Click Me!!</Button>
    </Page>
  );
}

위 코드의 출력은 다음과 같다.

재료 인터페이스

Material UI는 구글 소재 설계 가이드를 기반으로 구축된 구성 요소들이다.
Material UI는 액세스 및 구성 가능한 많은 UI 위젯으로 구성되어 있습니다.
이 구성 요소들은 디스플레이가 필요한 스타일만 주입하면 프로그램의 성능을 향상시킬 수 있습니다.
그것은 간단하고 가볍고 사용자 친화적인 레이아웃과 디자인을 제공하여 아름다운 응용 프로그램을 쉽게 구축할 수 있다.
npm를 통해 설치

npmi@material-ui/core

@material ui/core에서 사용할 구성 요소 가져오기
@material ui/core/Button에서 가져오기 버튼

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

export default function ButtonsEx() {
  return (
    <div>
      <Button color="primary">Button</Button>
    </div>
  );
}

위 코드의 출력은 다음과 같다.

반응 유도

React Bootstrap은 Bootstrap 라이브러리 기반의 UI 키트입니다.일반 부트 어셈블리의 JavaScript를 React 코드로만 바꿉니다.React를 사용하여 안내하는 것은 일반적으로 직관적이다. 왜냐하면 많은 안내 주제가 있기 때문이다.
React Bootstrap은 자바스크립트를 안내하는 데 대부분의 의존 항목을 삭제했습니다. 예를 들어 jQuery 같은 경우, 구축은 호환성과 a11y를 고려했습니다.그것은 또 각양각색의 조립품을 가지고 있다.
다음 명령을 사용하여 React 부트를 설치합니다.

npm i react-bootstrap

단일 어셈블리를 가져오려면 다음과 같이 하십시오.

import Button from "react-bootstrap/Button";

export default function ButtonsEx() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

위 코드의 출력은 다음과 같다.

그 중 일부는 다른 UI 키트 라이브러리입니다.

청사진 사용자 인터페이스

Blueprint는 React 기반 웹 UI 키트입니다.이것은 현대 브라우저와 IE11에서 실행되는 데스크톱 응용 프로그램에 대해 복잡하고 데이터가 밀집된 웹 인터페이스를 구축하는 데 최적화되었다.그것은 이동의 첫 번째 사용자 인터페이스 도구 패키지가 아니다.
구성 요소 라이브러리에서 아이콘을 생성하고 표시하며 날짜와 시간과 상호작용하고 시간대를 선택하는 데 사용할 코드를 얻을 수 있습니다.

의미 사용자 인터페이스 반응

의미 UI React은 의미 UI의 공식 React 통합입니다.Semantic UI는 파이프에 추가 기능을 추가하는 jQuery 기반 라이브러리입니다.
그것은 의미의 우호적인 코드를 이해하고 생성하는 데 전문적으로 사용되는 대량의 사전 구축 구성 요소를 덧붙였다.
React에 대한 자세한 내용: 4Click Here