React에는 구성 요소 라이브러리가 있습니다. 구성 요소 라이브러리는 구성 요소를 함께 구성하여 다차원 조합을 통해 구성 요소를 분해, 유도 및 재구성하는 기능 및 시각적 표현을 기반으로 하는 디자인 계획입니다. 목적은 표준화된 구성 요소를 형성하는 것입니다. 일반적으로 반응에 사용되는 구성 요소 라이브러리에는 Bulma, AntDesign, Bootstrap 등이 있습니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
컴포넌트 디자인은 기능과 시각적 표현의 요소들을 분해, 요약, 재구성하여 재사용 목적에 따라 표준화된 컴포넌트를 형성하는 것을 의미하며, 다차원적인 조합을 통해 전체 디자인 계획을 구성하고, 이러한 컴포넌트들을 함께 구성하는 것을 컴포넌트 라이브러리라고 합니다. 형성된다.
일반적으로 사용되는 반응 구성 요소 라이브러리:
개미 디자인
프로젝트 링크: Ant Design
번들 크기(BundlePhobia에서): 축소 후 1.2mB, 축소 + gzip 압축 후 349.2kB, 트리 쉐이킹으로 크기를 줄입니다.
이점:
AntDesign은 광범위한 지원 문서와 함께 제공되며 미리 만들어진 템플릿이 있는 별도의 프로젝트(AntDesignPro)를 포함한 커뮤니티를 갖추고 있습니다.
백엔드/내부 애플리케이션을 빠르게 설계하는 데 사용할 수 있는 UI 라이브러리입니다.
결점:
접근성 부족;
크기가 커서 성능에 큰 영향을 미칠 것으로 예상됩니다.
CSS를 오염시킵니다(Ant가 아닌 구성요소의 스타일을 지정하지 않도록 !important를 추가할 것으로 예상).
부트스트랩
사실 저는 주로 부트스트랩을 UI 라이브러리로 생각합니다. 디자인 상을 받을 수는 없지만 일부 엣지 프로젝트와 최소 실행 가능 제품을 완성하는 데 사용할 수 있습니다.
그러나 그것은 당신이 그것을 사용하려는 목적에 달려 있습니다. React를 처음 접한다면 시작하기에 좋은 라이브러리입니다. 경험이 많은 개발자의 경우 styled-Components/Emotion을 살펴볼 수 있습니다.
Bootstrap용 React 바인딩이 포함된 두 가지 인기 있는 라이브러리가 있습니다. 저는 개인적으로 Reactstrap만 사용합니다.
프로젝트 링크: React Bootstrap
번들 크기(BundlePhobia에서): 축소 후 111kB, 축소 후 34.4kB + gzip, 트리 쉐이킹으로 크기 감소
프로젝트 링크: Reactstrap
번들 크기(BundlePhobia에서): 축소 후 152.1kB, 축소 + gzip 압축 후 39.4kB, 트리 쉐이킹으로 크기 감소
이점:
모두가 좋아하는 React 바인딩이 포함된 Bootstrap 라이브러리
CSS-in-JS를 통해 쉽게 사용자 정의할 수 있습니다.
버그/문제에 대해 걱정할 필요가 없을 만큼 오랫동안 사용되었습니다.
빨리 시작하세요.
React에서 완전히 다시 구현되었으므로 jQuery 종속성이 없습니다.
결점:
이것이 부트스트랩입니다. 사용자 정의하지 않으면 사이트가 다른 사이트와 비슷하게 보일 것입니다.
부르마
Bulma는 순수 CSS 프레임워크이고 JS가 필요하지 않기 때문에 이 기사에서 소개된 다른 라이브러리와 다릅니다. Bulma의 클래스를 직접 사용하거나 반응-불마 구성 요소와 같은 래퍼 라이브러리를 사용하도록 선택할 수 있습니다.
프로젝트 링크: 부르마
프로젝트 링크: 반응-불마-구성요소
번들 크기(BundlePhobia에서): 179kB 축소, 20.1kB 축소 + gzip 압축
이점:
귀하의 웹 사이트가 부트스트랩처럼 보이도록 만들지는 않습니다.
빠르게 시작하고 실행하는 데 적합합니다.
최신 기능(기본 Flexbox/Grid).
결점:
접근성: 일부 라이브러리가 있지만 WCAG 지침을 준수하는 다른 라이브러리만큼 엄격하지는 않습니다.
차크라 UI
프로젝트 링크: ChakraUI
패키지 크기(BundlePhobia에서): 축소 후 326.2kB, 축소 + gzip 압축 후 101.2kB, 트리 쉐이킹으로 크기 감소
이점:
접근성: WAI-ARIA 지침에 따라 구성 요소는 aria 태그를 사용합니다.
Discord 서버로 구동됩니다.
쉽게 사용자 정의할 수 있습니다(테마 지원 포함).
고도로 모듈화되어 있으므로 트리 쉐이킹은 실제로 사용하지 않는 코드를 제거합니다.
결점:
아주 새로운 것입니다.
알아채다:
v1과 매우 유사하므로 v0.8.0 이후의 브레이킹 체인지에 유의하시기 바랍니다.
머티리얼 UI
MaterialUI는 제가 애증하는 라이브러리 중 하나입니다. 과거에는 매우 스트레스가 많은 프로젝트 마감일을 넘기는 데 도움이 되었지만 결국에는 항상 가능한 한 빨리 그 일을 처리했습니다.
과거에는 JSS를 작성해야만 MaterialUI의 스타일을 사용자 정의할 수 있었지만 다행히 이제는 스타일 구성 요소와 Emotion을 사용하여 스타일을 재정의할 수 있습니다.
프로젝트 링크: 머티리얼 UI
번들 크기(BundlePhobia에서): 325.7kB 축소, 92kB 축소 + gizp 압축, 트리 흔들기에 의해 감소
이점:
완전한 문서
아이콘 라이브러리는 거대합니다
간단하고 사용하기 쉬움(초기 상황)
결점:
맞춤 설정이 어렵고 힘들지만 필요합니다(시각적 개선을 위해).
성능: 너무 많은 DOM 노드가 렌더링됩니다.
귀하의 앱은 Google 제품처럼 보입니다(어떤 경우에는 전문적인 모습을 나타낼 수도 있습니다).
시맨틱 UI
프로젝트 링크: 시맨틱 UI
의미론적 UI 반응
패키지 크기(BundlePhobia에서): 축소 후 300.8kB, 축소 + gzip 압축 후 80.9kB, 트리 쉐이킹으로 크기를 줄입니다.
이점:
구성 가능(소품으로 사용하여 구성요소 전달)
쉬운 사용자 정의
유용한 문서
사용자가 잘 알려져 있음(Netflix 내부에서 사용하고 Amazon에서 출시한 제품에서 사용함)
타입스크립트 지원
결점:
오픈소스 프로젝트의 잠재적 불확실성.
문제 보기:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
커뮤니티가 운영하는 포크:
https://github.com/fomantic/Fomantic-UI
명예로운 언급
UI에 도달
ReachUI는 개발자가 액세스 가능한 React 구성 요소를 디자인 시스템에 구축할 수 있는 하위 수준 구성 요소 라이브러리입니다.
각 구성 요소를 자체 npm 패키지로 개별적으로 내보내므로 사용 가능한 패키지 크기가 없습니다.
리킷
Reakit은 또 다른 저수준 구성 요소 라이브러리입니다. 기술적으로는 UI 라이브러리이지만 CSS와 함께 제공되지는 않습니다. 따라서 여전히 스타일링 솔루션을 찾아야 합니다.
패키지 크기(BundlePhobia에서): 축소 후 119.9kB, 축소 + gzip 압축 후 32.1kB, 트리 쉐이킹으로 크기를 줄입니다.
리베이스
나는 한동안 Rebass를 팔로우하고 있었습니다. 테마가 제공되지 않는 강력한 구성 요소 라이브러리이지만 테마를 쉽게 변경할 수 있습니다. 실제 사례를 보려면 데모를 참조하세요.
프로젝트 링크: Rebass
번들 크기(BundlePhobia에서): 축소 후 43kB, 축소 +gizp 압축 후 14.4kB, 트리 쉐이킹으로 크기를 줄입니다.