ReactJS 를 공부하면서 멋진 UI를 쉽게 만들수 있도록 도와주는 여러 UI들이 있다는 걸 알게되었습니다. 그중 veloport 님 블로그에서 알게된 Grommet과 Material-UI 를 사용하는 방법을 알아보겠습니다. (react-md, react toolbox 나 참조4의 사이트에서 다른 UI 도 확인했지만 제가 기본으로 사용하는 boilerplate인 create-react-app 에서는 sass 를 기본적으로는 지원하지 않습니다. 물론 기본 설정을 deploy 하고 그뒤 설정을 약간 변경하여 사용하는 건 충분히 가능합니다. 더 자세한 내용은 참조5 링크를 확인하세요.) *** 참조 : https://velopert.com/2597 참조2: https://grommet.github.io/ 참..
Read More음.. 요근래 ReactJS 를 공부하다 티스토리 블로그 스킨을 ReactJS로 만들수 있지 않을까.. 라는 생각을 하고 테스트 블로그에 공부하며 작성한 ReactJS 를 빌드 후 티스토리 스킨구조에 맞게 조금 수정하고 올려봤다. 그랬더니.. 어라? 어.. 이거 이렇게 동작된다고 하면.. 음.. 티스토리가 제공하는 치환자는 사용이 안된다. 일단. 그런데 다른쪽으로 응용이 가능한데.. 이래도 괜찮나.. ㄷㄷ http://ggoban.tistory.com
Read More요즘 ReactJS 를 공부하는 기본 개발 환경을 정리한다. Boilderplate ReactJS : create-react-app (참조 : https://github.com/facebookincubator/create-react-app)(설명 : facebook 팀의 공식 프로젝트. 설명이 더 필요한가!?) ExpressJS : express-es6-rest-api(참조 : https://github.com/developit/express-es6-rest-api)(설명 : 여러 Boilerplate 가 있지만 개인적으로 이 프로젝트가 맘에 든다.) koa : koa2-server-boilerplate(참조: https://github.com/yankouskia/koa2-server-boilerplat..
Read More[ReactJS] Grommet, Material-UI 기본 사용법을 알아보자.
ReactJS 를 공부하면서 멋진 UI를 쉽게 만들수 있도록 도와주는 여러 UI들이 있다는 걸 알게되었습니다.
그중 veloport 님 블로그에서 알게된 Grommet과 Material-UI 를 사용하는 방법을 알아보겠습니다.
(react-md, react toolbox 나 참조4의 사이트에서 다른 UI 도 확인했지만 제가 기본으로 사용하는
boilerplate인 create-react-app 에서는 sass 를 기본적으로는 지원하지 않습니다. 물론 기본 설정을 deploy
하고 그뒤 설정을 약간 변경하여 사용하는 건 충분히 가능합니다. 더 자세한 내용은 참조5 링크를 확인하세요.)
***
참조 : https://velopert.com/2597
참조2: https://grommet.github.io/
참조3: http://www.material-ui.com/#/
참조4: https://blog.webkid.io/react-ui-libraries/
참조5: https://github.com/facebookincubator/create-react-app/issues/78
***
아래 실행 환경은 기본적으로 nodejs (LTS 6.9.4 기준), create-react-app 으로 진행됩니다.
아래 테스트에 사용한 소스는 참조4 블로그를 기본으로 활용하였습니다.
# create-react-app my-app
# cd my-app
# npm install --save grommet material-ui react-tap-event-plugin
# npm start
3번째 라인에서 grommet과 material-ui 를 설치해줍니다. material-ui는 0.15 버전을 기준으로 사용방법이
변경되었습니다. 그래서 react-tap-event-plugin 을 같이 설치하여 줍니다.
이제 이 화면을 수정하여 grommet과 material-ui 의 컴포넌트들을 사용해보겠습니다.
먼저 grommet 입니다.
src/GrommetWorldMap.js (생성)
import React from 'react';
import WorldMap from 'grommet/components/WorldMap';
import '../node_modules/grommet/grommet.min.css';
const GrommetWorldMap = () => {
return (
<div>
<WorldMap series={[{
"continent": "NorthAmerica",
"label": "North America",
"value": 40,
"colorIndex": "graph-1",
}, {
"continent": "SouthAmerica",
"label": "South America",
"value": 30,
"colorIndex": "accent-2",
}, {
"continent": "Europe",
"label": "Europe",
"value": 20,
"colorIndex": "unset",
}, {
"continent": "Africa",
"label": "Africa",
"value": 10,
"colorIndex": "graph-2",
}, {
"continent": "Asia",
"label": "Asia",
"value": 15,
"colorIndex": "graph-3",
}, {
"continent": "Australia",
"label": "Australia",
"value": 10,
"colorIndex": "graph-4",
}]} />
</div>
);
};
export default GrommetWorldMap;
src/App.js (수정)
import React, { Component } from 'react';
import GrommetWorldMap from './GrommetWorldMap';
class App extends Component {
render() {
return (
<GrommetWorldMap/>
);
}
}
export default App;
src/MaterialEx.js (생성)
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;
src/App.js (수정)
import React, { Component } from 'react';import MaterialEx from './MaterialEx';import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
class App extends Component { render() { return ( <MuiThemeProvider> <MaterialEx/> </MuiThemeProvider> ); }}
export default App;
사용하려는 컴포넌트를 마지막에 MuiThemeProvider 로 감싸주면 됩니다. 이는 테마와 관련된
내용이 추가되면서 변경된 점으로 테마를 쉽게 Material UI 와 호환되는 다른 테마로 변경할 수 있게 해줍니다.
그럼 모두 즐거운 ReactJS 되시길 바랍니다!
'Work/ReactJS' Related Articles / more
[ReactJS] 어라????
음.. 요근래 ReactJS 를 공부하다 티스토리 블로그 스킨을 ReactJS로 만들수 있지 않을까..
라는 생각을 하고 테스트 블로그에 공부하며 작성한 ReactJS 를 빌드 후
티스토리 스킨구조에 맞게 조금 수정하고 올려봤다.
그랬더니.. 어라?
어.. 이거 이렇게 동작된다고 하면..
음.. 티스토리가 제공하는 치환자는 사용이 안된다. 일단.
그런데 다른쪽으로 응용이 가능한데.. 이래도 괜찮나..
ㄷㄷ
'Work/ReactJS' Related Articles / more
Discuss about post
[ReactJS] 기본 개발 환경
요즘 ReactJS 를 공부하는 기본 개발 환경을 정리한다.
Boilderplate
ReactJS : create-react-app
(참조 : https://github.com/facebookincubator/create-react-app)
(설명 : facebook 팀의 공식 프로젝트. 설명이 더 필요한가!?)
ExpressJS : express-es6-rest-api
(참조 : https://github.com/developit/express-es6-rest-api)
(설명 : 여러 Boilerplate 가 있지만 개인적으로 이 프로젝트가 맘에 든다.)
koa : koa2-server-boilerplate
(참조: https://github.com/yankouskia/koa2-server-boilerplate)
(설명 : 요즘은 일단 좋은걸 찾으면 boilerplate 부터 찾는게 버릇이 된... koa2 에서
이게 제일 내 스탈에 맞는 듯)
Editor
Microsoft : Visual Studio Code
(참조 : https://code.visualstudio.com/)
(설명 : sublime text 2 -> sublime text 3 -> webstorm -> atom -> vs code)
(설명2 : 마이크로소프트 사롸있네!)
추천 패키지 - ReactJS, Javascript, Html과 Markdown 에디터 용으로 사용
Discuss about post