[번역] 2019 컴포넌트 UI 라이브러리들
9 React Styled-Components UI Libraries for 2019
URL : https://blog.bitsrc.io/9-react-styled-components-ui-libraries-for-2018-4e1a0bd3e179
920 스타일 패키지 구성 요소 UI 라이브러리 반응
JS의 CSS와 마찬가지로? 선택할 수있는 스타일있는 컴포넌트로 빌드 된 유용한 React UI 라이브러리가 여기에있다.
조나단 시어링수행원
2018 년 10 월 4 일
React 커뮤니티에서 UI 컴포넌트의 스타일을 지정하는 방법에 대한 토론은 CSS 모듈과 인라인 CSS에서 JS의 CSS에 이르기까지 모든 요소에 근원을 둔 사람들과 함께 속도를 높이는 것으로 보입니다 (다음 게시물에서 다룰 예정입니다).
일부 개발자가 선호하는 JS의 CSS의 상대적 증가는 React 구성 요소 생태계의 상승과 Max Stoiber 의 스타일 이 지정된 구성 요소 프로젝트의 증가 와 200여 명의 기여자와 밀접하게 관련되어 있습니다.
시간을 절약하고 자신의 응용 프로그램의 UI에서 스타일이 지정된 구성 요소를 테스트에 사용할 수 있도록하기 위해 스타일이 지정된 구성 요소를 활용하여 깔끔한 기본 UI 킷을 제공하는 유용한 라이브러리를 모았습니다 .
Bit 를 사용 하여 비주얼 카탈로그에서 스타일이 지정된 구성 요소 컬렉션을 구성하고 CSS 구성 요소를 공유하며 다른 프로젝트에서이를 개발할 수 있습니다. 각 구성 요소는 즉시 NPM에서도 사용할 수 있습니다.
Bit - 코드 구성 요소로 공유 및 빌드Bit는 프로젝트와 응용 프로그램 간의 코드 구성 요소를 공유, 발견 및 사용하여 새로운 기능을 구축하고 ...
1. Rebass
5k 별에서 rebass는 "스타일 시스템으로 구축 된 반응 기본 UI 구성 요소"입니다. 가볍고 아름답게 디자인 된 8 개의 확장 가능하고 일관성 있고 재사용 가능한 구성 요소로 응답 성 및 사용자 정의 가능성을 염두에두고 설계되었습니다 (기본 제공 테마 포함). 다음은 구성 요소입니다.
rebassjs / rebassatom_symbol : 스타일이있는 시스템으로 빌드 된 기본 UI 구성 요소를 처리합니다. - rebassjs / rebass
2. Zendesk 's Garden React 구성 요소
350 개의 별에 불과한이 라이브러리는 잘 만들어진 구성 요소를 제공하며 NPM에 개별적으로 게시되며 소비 및 공유 할 Bit 구성 요소로 쉽게 사용할 수 있습니다. 구성 요소는 오른쪽에서 왼쪽으로 배치를 처리하도록 조정 된 사용자 입력 장치의 범위에 응답하고 일부는 애니메이션을 포함하도록 제작되었습니다. 웹 HTML, CSS 및 JavaScript로 구성된 1 인치 크기의 청크는 모든 React 기반 응용 프로그램에 포함될 준비가되어 있습니다. 보세요.
zendeskgarden / react-components묘목 : garden React 구성 요소. 계정을 생성하여 zendeskgarden / react-components 개발에 참여하십시오 ...
3. Atlaskit
Atlassian의 React UI 구성 요소 라이브러리. Atlassian의 디자인 지침을 구현 하고
스타일이 지정된 구성 요소를 사용합니다.
이 라이브러리는 2 년 전에 React 위에 구축 된 모든 Atlassian Cloud 제품에 대해 ADG3 디자인을 구현하려는 노력으로 시작되었습니다.
모든 구성 요소는 패키지입니다.
atlassian / Atlaskit-MK-2Atlassian의 공식 UI 라이브러리로서 Atlassian Design Guidelines에 따라 제작되었습니다.
4. 그로멧 V2
멋진 Grommet 라이브러리 V2 (Netflix, Uber 등이 사용)는 SASS를 스타일이 지정된 구성 요소로 대체합니다. 따라서 특수 구성이나 SASS를 사용하여 구성 요소의 스타일을 지정하지 않아도되므로 스타일이 더 이상 전역이 아니며 더 이상 빌드 타임에 테마가 적용되지 않습니다. 아래에 시도해보십시오 (여전히 알파 상태).
그로멧그로멧 버전 2 설명서
그로밋 / 그로멧필수적인 경험에 중점을 둡니다. GitHub에 계정을 만들어 그로밋 / 그로멧 개발에 기여하십시오.
5. 부드러운 UI
스타일의 확장 성을 포함하여 사용자 경험을 강조하는 React 및 스타일 구성 요소가있는 800 개의 별 UI 구성 요소 라이브러리. 또한 일부 클래스를 노출하므로 구성 요소를 확장하는 새로운 API를 배울 필요가 없으며 구성 요소를 검사하고 즉시 클래스를 사용할 수 있습니다.
smooth-code / smooth-ui현대적인 반응 UI 라이브러리. GitHub에 계정을 만들어 원활한 코드 / 원활한 UI 개발에 기여하십시오.
6. 반응
At 200 stars reactackle is a React UI library build with styled-components which provides cross-browser support. The library supports customization for basic design aspects and provides theme wrappers out of the box.
bcrumbs/reactackleOpen-source components library built with React and Styled-Components. - bcrumbs/reactackle
7. Reakit
Reakit is a 1K+ star UI library that lets you leverage any component or container to create something new. All components are WAI-ARIA compliant and all components are in accordance with the Single Element Pattern, which makes them consistent like HTML elements. Jump in to take a look.
reakit/reakitToolkit for building really interactive UIs with React - reakit/reakit
8. CSS 로더 및 스타일 로더와 반응하십시오.
react-css-loaders는 인기있는 css-loaders 프로젝트를 기반으로하고 스타일이 지정된 구성 요소로 빌드 된 순수 CSS React 로딩 구성 요소의 모음입니다 .
