---
title: create-react-appで作ったプロジェクトでPivotal UIを使う
tags: ["React.js", "Pivotal UI"]
categories: ["Programming", "JavaScript", "Framework", "React.js"]
date: 2016-10-05T17:06:33Z
updated: 2016-10-05T23:41:21Z
---
しばらくReact.jsを触っていないうちに、いろんなboilerplate/starterプロジェクトの作り方が乱立していて辟易していたんですが、Facebook本家から[`create-react-app`](https://github.com/facebookincubator/create-react-app)コマンドが出たので全て解決。
Spring Bootでいうところの[Spring Initializr](https://start.spring.io)ですね。
もはや`create-react-app`以外でReact.jsアプリを作ることを受け入れ難い頭になってしまったので、これでなんとかアプリを作りたい。
今回は[Pivotal UI](http://styleguide.cfapps.io/)という、最近のPivotal製品のUIで一貫して使われている、Reactコンポーネントに対応したUIライブラリを使いたい。
一応、[Pivotal UI Starter Project](https://github.com/pivotal-cf/pui-starter-project)はあるのですが、ちょっと古くて`gulp`が使われていたり、ES6の設定を自分でしたくないのと、[Dr. Frankenstyle](https://github.com/pivotal-cf/pivotal-ui#install)というコンポーネント毎のCSSを結合するツールが必要なのが😩だったので、`create-react-app` wayでやりました。
### プロジェクト作成
まずは
```
create-react-app demo-pui
```
で雛形作成。
`logo.svg`、`index.css`、`App.css`は削除し、`App.js`はHello Worldのみにします。
`index.js`
``` js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
```
`App.js`
``` js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
);
}
}
export default App;
```
実行
```
npm start
```
### Pivotal UI導入
次にいよいよPUIを導入します。
とりあえず、[Buttonsコンポーネント](http://styleguide.pivotal.io/react_base_buttons.html)だけ使ってみます。
```
npm install --save pui-react-buttons
```
CSSの設定は`node_modules`の下の`pui-css-`から始まるプロジェクトの`css`ファイルのパスを、`index.js`で`import`すればOK。
``` js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'pui-css-bootstrap/bootstrap.css';
import 'pui-css-buttons/buttons.css';
import 'pui-css-typography/typography.css';
ReactDOM.render(
,
document.getElementById('root')
);
```
ちょっと面倒くさいけど、コンポーネント追加の度にこれを全部追加する。
あとはコンポーネントを使うのみ。PUIのガイドラインで
``` js
var DefaultButton = require('pui-react-buttons').DefaultButton;
var DefaultAltButton = require('pui-react-buttons').DefaultAltButton;
var LowlightButton = require('pui-react-buttons').LowlightButton;
```
のように説明されている箇所は
``` js
import {DefaultButton, DefaultAltButton, LowlightButton} from 'pui-react-buttons';
```
でOK。`App.js`で``を使うと次のように。
``` js
import React, { Component } from 'react';
import {HighlightButton} from 'pui-react-buttons';
class App extends Component {
render() {
return (
Hello World!
);
}
}
export default App;
```
以降、同じ要領で好きなコンポーネントを追加すれば良い。
`npm run build`すればCSSが結合・圧縮されるので[Dr. Frankenstyle](https://github.com/pivotal-cf/dr-frankenstyle)は不要！
``` console
$ npm run build
> demo-pui@0.1.0 build /Users/makit/git/hello-pui/demo-pui
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
53.66 KB build/static/js/main.154d8f43.js
14.5 KB build/static/css/main.a78df937.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage": "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may also serve it locally with a static server:
npm install -g pushstate-server
pushstate-server build
open http://localhost:9000
```
実際にHTTPサーバーを立てると
```
pushstate-server build
```
JavaScriptもCSSも結合・圧縮されていますね。
`create-react-app`便利！