React UI Libraries
이 개인적은 개발을 하는데 필요하여, 제 나름대로 번역을 한 내용입니다. 보시는 것은 괜찮지만 인용이나 공유는 하지 말아주시기 바랍니다. 또한 원래 블로그 포스트에서 문제를 제시하면 바로 삭제를 할 것입니다. 원 블로그 포스트의 주소는 http://blog.webkid.io/react-ui-libraries/ 입니다.
Grommet
대부분 엔터프라이즈 어플리케이션을 위한 가장 발전된 오픈소스 UX framework 이다.http://www.grommet.io
Grommet는 당신이 당신의 앱에서 필요한 대부분의 공통 컴포넌트를 포함한, 복잡한 UI의 빌딜하는 리치프레임워크이다. Grommet는 개발전 앱에 sketch 디자이너를 위한 다양한 그래픽 포멧의 모든 리소스를 제공한다. 당신은 사용 가능한 예제의 잘 구조화된 문서 또한 찾을 수 있다.
Installation
npm install -g grommet -g gulp
Sample Component:
import React from 'react'; import WorldMap from 'grommet/components/WorldMap'; import '../../../node_modules/grommet/grommet.min.css'; const GrometWorldMap = () => { return ( <WorldMap series={[{continent: , colorIndex: , onClick: }, ...]} /> ); }; export default GrometWorldMap;
Complete Example
Documentation
148 open issues on github
Material UI
구글의 Material Design 형태의 React 컴포넌트 셋트
Material UI 는 아름다운 material 디자인 react 컴포넌트 컬렉션이다. 잘 정리된 문서와 모두 필요한 전형적인 모듈을 찾았다. 길게 테스트를 한 만큼, 확실하게 모바일과 데스크탑 모두를 지원한다. 이전의 UI Framework에서 다른점은 Material UI component는 디폴트로 material ui style theme로 렌더링하는다는 것이다. 최우선은 두가지에서 가능하다. inline style 또는 MUI theme 설정이다.
Installation :
npm install material-ui
Sample Component :
import React from 'react'; import AutoComplete from 'material-ui/AutoComplete'; const libs = ['Material UI', 'Elemental UI', 'Grommet', 'Mui', 'Rebass']; const MaterialEx = () => { return ( <div> <AutoComplete floatingLabelText="Type something ..." filter={AutoComplete.fuzzyFilter} dataSource={libs} maxSearchResults={3} menuStyle={{ background: '#fff' }} /> </div> ); }; export default MaterialEx;
Complete Example
Documentation
148 open issues on github
Elemental UI
Websites 와 Apps의 React.js 를 위한 UI Tookithttp://elemental-ui.com
이전 예제와 달리, elemental은 가벼운 라이브러리이다. grid, css styles과 button, form 또는 modal과 같은 component를 제공한다. 모든 components는 문서화가 잘 되어 있다. 아랫쪽은 설정 단계에서 문서를 불러오지 않는다 그래서 설치는 예상보다 길다.
Installation :
npm install elemental -S less-loader -S less -S react-addons-css-transition-group -S
만약에 웹팩을 사용한다면, 다음과 같이 로더를 이용할수 있다.
{ test: /\.less$/, loader: "style!css!less" }
아래와 같이 컴포넌는 main less file을 Import한다.
Sample Component
import React from 'react'; import { Spinner, Pagination } from 'elemental'; // you need to include the less files and adjust your webpack config in order to load less files import '../../../node_modules/elemental/less/elemental.less'; const ElementalUI = () => { return ( <div> <Pagination currentPage={1} onPageSelect={null} pageSize={25} plural={'Sites'} singular={'Site'} total={150} limit={6} /> </div> ); }; export default ElementalUI;
Complete Example
Documentation
148 open issues on github
Rebass
57개의 설정인 React 독립적인 함수형 UI Componentshttp://jxnblk.com/rebass/
Rebass는 57의 나이스한 component를 제공한다. 어떤 CSS의 의존성 호출과 웹팩의 조절없이 components를 사용할 수 있다. 이것은 다른 라이브러리와 비교하여 사용할 수 있는 정말 안정적인 것이다.components는inline styles 또는 react context 를 통해 고객화 된 독립적인 함수형 react components이다
Installation :
npm install rebass
Sample Component :
import React from 'react'; import { SequenceMap, Switch } from 'rebass'; const RebassEx = () => { return ( <div> <SequenceMap active={1} steps={[{'children: 'Step 1'}, {'children: 'Step 2'}, {'children: 'Step 3'}]} /> <Switch checked /> <label>on | off</label> </div> ); }; export default RebassEx;
Complete Example
Documentation
148 open issues on github
MUI
MUI는 구글 Material Design의 가이드를 기반으로 만든 가벼운 CSS framework이다.https://www.muicss.com
MUI는 webkids 의해 다른 블로그에 벌써 포스트되었다. MUI는 구글 Material Design에 따라 react components만 제공할 뿐만 아니라, angular, wecomponents, iOS, Android, email templates또한 찾울 수 있다. MUI는 디자인 프로세스를 위해 sketch file과 상응하는 것도 제공한다.
Installation :
npm install muicss
Sample Component :
import React from 'react'; // you need to include the css files and adjust your webpack config in order to load css files import '../../../node_modules/muicss/lib/css/mui.min.css'; import { Tabs, Tab, Button, Container } from 'muicss/react'; const MuiEx = () => { return ( <div> <Tabs justified> <Tab value="pane-1" label="Tab 1" /> <Tab value="pane-2" label="Tab 2" /> </Tabs> <Container fluid> <Button color="accent" variant="raised">Click me</Button> </Container> </div> ); }; export default MuiEx;
Complete Example
Documentation
148 open issues on github
만약 더 많은 React UI stuff에 관심이 있다면, official react wiki와 awesome react list를 체크아웃 하자.