트위터 부트스트랩을 리액트 컴포넌트로 만들어 놓은 것이 이미 있어서 미티어(Meteor) 에서 사용하는 방법을 알아본다.
설치 하기
- 먼저 미티어 프로젝트 하나를 생성한다.
$ meteor create test
- Twiiter Bootstrap 을 React로 변환해 놓은 것
+ https://github.com/react-bootstrap/react-bootstrap
+ 사용자 메뉴얼
+ webpack을 사용해 번들을 만들었다.
- react-bootstrap을 미티어의 패키지를 설치한다
+ https://atmospherejs.com/firfi/meteor-react-bootstrap (설명서)
+ package.js 를 추가해서 미티어의 패키지로 만들고, atmosphere에 배포했다.
$ meteor add firfi:meteor-react-bootstrap
Package.describe({ name: 'firfi:meteor-react-bootstrap', version: '0.0.4', // Brief, one-line summary of the package. summary: 'React-bootstrap port for Meteor', // URL to the Git repository containing the source code for this package. git: 'https://github.com/Firfi/meteor-react-bootstrap', // By default, Meteor will default to using README.md for documentation. // To avoid submitting documentation, set this field to null. documentation: 'METEOR.md' }); Package.onUse(function(api) { api.versionsFrom('1.0.5'); api.use('reactjs:react@0.2.1'); api.use('twbs:bootstrap@3.3.4', 'client'); api.addFiles('dist/react-bootstrap.js'); api.export(['ReactBootstrap']); }); Package.onTest(function(api) {
});
- 미티어에 리액트를 사용하기 위한 공식 패키지를 설치한다.
$ meteor add react
사용 하기
- FlowRouter와 ReactLayout을 설치한다.
$ meteor add kadira:flow-router
# meteor add kadira:react-layout
- 리액트 문구가 들어 있는 파일의 확장자는 .jsx가 되어야 한다. test.jsx 파일을 하나 만들고 다음과 같이 탭을 사용한다.
+ ReactBootstrap 이 글로벌 변수이다.
+ 리액트 컴포넌트 (App)는 미티어에서 글로벌 변수여야 한다.
if (Meteor.isClient) {
App = React.createClass({
render() {
return (
<ReactBootstrap.TabbedArea defaultActiveKey={2}>
<ReactBootstrap.TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</ReactBootstrap.TabPane>
<ReactBootstrap.TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</ReactBootstrap.TabPane>
</ReactBootstrap.TabbedArea>
)
}
});
}
- Flow Router를 설정한다.
// test.js
if(Meteor.isClient) {
FlowRouter.route('/', {
// do some action for this route
action: function(params, queryParams) {
// console.log("Params:", params);
// console.log("Query Params:", queryParams);
// ReactLayout.render(AppLayout, {
// content: <MainComponent />
// })
ReactLayout.render(App);
}
});
}
// test.html
<head>
<title>test</title>
</head>
- 탭 결과 화면이 출력된다.
오류 해결
- 크롬 DevTools에 React extension을 설치하고 결과를 보면 다음과 같이 <Unknown> 태그가 나온다.
- <Unknown>을 제거하기 위해 displayName을 지정한다.
if (Meteor.isClient) {
App = React.createClass({
displayName: 'App',
render() {
return (
<ReactBootstrap.TabbedArea defaultActiveKey={2}>
<ReactBootstrap.TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</ReactBootstrap.TabPane>
<ReactBootstrap.TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</ReactBootstrap.TabPane>
</ReactBootstrap.TabbedArea>
)
}
});
}
<참조>
- npm을 미티어에서 직접 사용하고자 할 경우 meteorhacks:npm의 설정 가이드
'Meteor' 카테고리의 다른 글
| [Meteor] Chat 만들기 - 1 (0) | 2015.09.07 |
|---|---|
| [Meteor SmartLink] 미티어 OJT (0) | 2015.09.01 |
| [Meteor] Meteor 배우는 방법 (0) | 2015.07.11 |
| [Meteor] 마지막 수업 - 구조 및 아키텍쳐의 이해 (WebApp 2.0 세대) (0) | 2013.06.22 |
| [Meteor] Todos 예제 리팩토링 및 Reactive 이해하기 (0) | 2013.06.01 |