반응은 어떤 UI 구성 요소 라이브러리를 사용합니까?

React에 사용 가능한 UI 구성 요소 라이브러리는 다음과 같습니다. 1. 레이아웃, 양식, 탐색, 데이터 표시 및 기타 여러 위젯을 위한 구성 요소가 포함된 Material-UI 2. 예측 가능한 정적 유형을 포함하는 60개 이상의 구성 요소가 포함된 Ant 디자인 3. 40개 이상의 구성 요소가 포함된 Blueprint 4. 수많은 기존 Bootstrap 테마와 완벽한 호환성을 제공하는 React Bootstrap 5. 탭, 사이드 메뉴, 스택 탐색, 목록, 양식 등 구성 요소를 제공하는 Onsen UI.

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

react 구성 요소 라이브러리

1, Material-UI

Material-UI는 GitHub에서 가장 인기 있고 일반적으로 사용되는 React 구성 요소 라이브러리입니다. 간단하고 가벼우며 Google의 Material-UI 사양에 따라 제작되었습니다. 레이아웃, 양식, 탐색, 데이터 표시 및 기타 여러 위젯을 위한 구성 요소가 있습니다.

스타일이 지정된 구성 요소와 동일한 이점을 제공하는 빠르고 확장 가능한 CSS-in-JS 솔루션인 @material-ui/styles를 사용하여 구성 요소의 스타일을 지정할 수 있습니다. Material-UI는 다른 주요 스타일링 솔루션과도 상호 운용되므로 해당 스타일을 사용할 필요가 없습니다.

2. Ant Design

Ant Design은 대기업의 웹 애플리케이션용으로 설계된 React 라이브러리를 보유한 중국 회사입니다. 텐센트, 알리바바, 바이두 등이 대표적이다. 이 라이브러리에는 예측 가능한 정적 타이핑을 사용하여 TypeScript로 작성된 60개 이상의 구성 요소가 있습니다. 중국어와 영어 문서는 간결하고 우아하며 내용이 포괄적입니다.

그러나 Ant Design은 단순한 React UI 라이브러리 그 이상입니다. 성장, 의미, 확실성, 자연의 가치를 중심으로 구축된 전체 디자인 시스템입니다. Figma UI 키트, 랜딩 페이지 템플릿, Sketch 플러그인 등에 대한 리소스를 확인하세요. 이는 우리가 즐겨 사용하는 React 구성 요소 라이브러리입니다.

3. Blueprint

일반적으로 사용되는 React 구성 요소 라이브러리인 Blueprint는 풍부하고 인기 있는 구성 요소를 제공합니다. Blueprint는 미국의 빅데이터 분석 기술 회사인 Palantir에서 개발한 React UI 라이브러리입니다. React 라이브러리에는 데스크톱 애플리케이션을 위한 복잡한 데이터 집약적 인터페이스에 특별히 최적화된 40개 이상의 구성 요소가 있습니다.

Blueprint는 문서의 모든 코드 예제와 마찬가지로 TypeScript로 작성되었습니다. 라이브러리는 Chrome, Firefox, Safari, IE 11 및 Microsoft Edge를 지원합니다. IE10 이하는 CSS flex 레이아웃 지원이 부족하여 지원되지 않습니다.

4. React Bootstrap

Bootstrap JavaScript를 대체하는 React Bootstrap. 각 구성 요소는 실제 React 구성 요소로 구축되므로 jQuery에 의존할 필요가 없습니다. React Bootstrap은 가장 오래된 React 라이브러리 중 하나이며 React 자체와 함께 꾸준히 성장해 왔습니다. Bootstrap을 사용하는 기존 사용자가 많기 때문에 React Bootstrap도 더 일반적으로 사용되는 React 구성 요소 라이브러리입니다.

Bootstrap의 그리드 시스템은 레이아웃이 완벽하게 반응하는 일련의 컨테이너, 행 및 열을 갖게 된다는 것을 의미합니다. 배지, 캐러셀, 토스트, 점보트론 등 수십 가지 구성 요소 중에서 선택할 수 있습니다.

이미 존재하는 수많은 Bootstrap 테마와 각 테마에 대한 총 성능을 갖춘 긴 구성 요소 목록과의 완벽한 호환성을 제공합니다. React Bootstrap은 상태를 가상 DOM으로 업데이트합니다. 이는 Bootstrap의 기능을 React의 가상 DOM에 통합하여 보다 안정적인 개발 솔루션입니다.

5, Onsen UI

Onsen UI는 HTML5 및 모바일 웹 애플리케이션을 구축하도록 설계된 일반적으로 사용되는 Reac 구성 요소 라이브러리입니다. 해당 구성 요소에는 탭, 사이드 메뉴, 스택 탐색, 목록, 양식 등이 포함됩니다. 모든 구성 요소는 iOS 및 Android 머티리얼 디자인을 지원하며 플랫폼에 따라 앱의 모양을 자동으로 변경합니다.

내부적으로 Onsen은 cssnext로 작성된 CSS 구성 요소, 기본 JavaScript로 작성된 웹 구성 요소, React와의 손쉬운 통합을 위한 프레임워크 바인딩, Vue 및 Angular의 세 가지 레이어로 구성됩니다.

6. Grommet

Grommet은 반응형, 접근성 및 모바일 우선 웹 프로젝트를 위해 설계된 구성 요소 라이브러리입니다. 원자 설계 방법을 통합하고 키보드 탐색, 화면 판독기 탭 등을 허용합니다. 심지어 svg 아이콘 목록도 있습니다.

Netflix, Uber, Boeing, HP, Samsung 및 Twilio를 포함한 많은 대기업이 Grommet을 사용하여 웹 애플리케이션을 설계합니다. 디자인이 덜 "구글리(Googly)"한 느낌을 주기를 원한다면 Grommet의 구성 요소를 확인하십시오. , 매우 보기 좋은 구성 요소가 포함된 훌륭하고 일반적으로 사용되는 React 구성 요소 라이브러리입니다.

7、게슈탈트

Gestalt는 Pinterest의 디자인 언어를 향상시키는 React UI 구성 요소 세트입니다. 그 목적은 디자인 모범 사례의 공유 라이브러리를 만드는 것입니다. 라이브러리는 오른쪽에서 왼쪽으로, 국제화 및 어두운 모드를 지원합니다.

Gestalt는 크로스 플랫폼에서 실행되는 자동 설계 및 코드 업데이트로 인해 유지 관리가 상대적으로 적습니다. 릴리스로 인해 사용법이나 입력 등의 주요 변경 사항이 발생하는 경우 업그레이드 프로세스를 단순화하기 위해 codemod를 제공합니다.

8. Semantic UI React

React는 공식 Semantic UI 플러그인입니다. jQuery에 구애받지 않으며 선언적 API, 단순화된 소품, 하위 구성 요소, 확장, 상태 자동 제어 등을 제공합니다. 라이브러리에는 조각, 진행률 표시줄, 전환, 페이지 매김 등을 포함하여 50개 이상의 구성 요소 모음이 있습니다.

Semantic UI React는 구성 요소를 제공하고 Semantic UI는 CSS 스타일 시트 형식으로 테마를 제공합니다. 대신 을 사용해도 됩니다. 저는 Semantic UI를 선호하고, Semantic UI React도 사용해 본 적이 있습니다. 비교적 일반적으로 사용되는 React 구성 요소 라이브러리입니다.

9, Rebass

Rebass는 Brent Jackson의 스타일 시스템으로 구축된 독창적인 구성 요소 라이브러리이자 일반적으로 사용되는 React 구성 요소 라이브러리입니다. 디자인 제약 조건과 사용자 정의 규모로 일관된 UI를 생성하도록 제작되었습니다. Rebass의 공간은 4KB에 불과하며 이는 빠른 설계 및 개발을 의미합니다.

Rebass는 일류 테마 지원 및 테마 UI와의 호환성을 통해 최소한의 유용성, 제한 없음, 확장성 및 테마 가능을 달성하기를 희망합니다.

10, React Virtualized

React Virtualized는 고유한 React 구성 요소 라이브러리에서 모든 UI의 특정 측면에 중점을 두어 대부분의 경우 테이블 렌더링을 상당히 쉽게 만듭니다. React Virtualized를 사용하면 웹 개발자는 목록, 테이블, 그리드, 컬렉션 등과 같은 구성 요소를 사용하여 대량의 데이터를 쉽게 렌더링할 수 있습니다. 보다 사용자 친화적인 테이블을 만드는 데 사용할 수 있습니다. React Virtualized에는 이미 설정을 위한 전체 지침이 있습니다.

11. Blueprint UI React

Blueprint UI React 구성 요소 프레임워크는 모든 새로운 데이터 집약적 데스크톱 및 웹 애플리케이션에 대한 동일한 UI 개발 경로입니다. 데스크톱 애플리케이션을 위한 복잡한 데이터 집약적 인터페이스를 만들기 위해 설계된 React 기반 UI 툴킷입니다. 이는 모든 구성 요소에 대해 즉시 사용 가능한 사용성 표준을 제공하고 밝은 테마와 어두운 테마 모드에 대한 액세스를 제공하는 것을 목표로 하는 훌륭한 UI 패키지입니다.

12. React Toolbox

React Toolbox는 Google Material Design 요구 사항을 구현하는 일련의 React 구성 요소입니다. 이는 CSS 모듈(SASS로 작성됨), Webpack 및 ES6과 같은 가장 일반적인 제안 중 일부를 기반으로 합니다. 라이브러리는 웹 패키지 워크플로우와 긴밀하게 통합되어 있으며 완전히 구성 가능하고 다재다능합니다.

버튼, 카드, 날짜 선택기, 대화 상자 및 기타 공통 요소와 같은 많은 구성 요소를 제공합니다. 웹 개발자가 멋진 웹 애플리케이션을 구축할 수 있도록 지원하는 라이브러리에는 포괄적인 문서도 포함되어 있습니다.

【관련 추천: Redis 동영상 튜토리얼】

위 내용은 반응은 어떤 UI 구성 요소 라이브러리를 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!