しばらくReact.jsを触っていないうちに、いろんなboilerplate/starterプロジェクトの作り方が乱立していて辟易していたんですが、Facebook本家からcreate-react-app
コマンドが出たので全て解決。
Spring BootでいうところのSpring Initializrですね。
もはやcreate-react-app
以外でReact.jsアプリを作ることを受け入れ難い頭になってしまったので、これでなんとかアプリを作りたい。
今回はPivotal UIという、最近のPivotal製品のUIで一貫して使われている、Reactコンポーネントに対応したUIライブラリを使いたい。
一応、Pivotal UI Starter Projectはあるのですが、ちょっと古くてgulp
が使われていたり、ES6の設定を自分でしたくないのと、Dr. Frankenstyleというコンポーネント毎のCSSを結合するツールが必要なのが😩だったので、create-react-app
wayでやりました。
プロジェクト作成
まずは
create-react-app demo-pui
で雛形作成。
logo.svg
、index.css
、App.css
は削除し、App.js
はHello Worldのみにします。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="container">
<p>Hello World!</p>
</div>
);
}
}
export default App;
実行
npm start
Pivotal UI導入
次にいよいよPUIを導入します。
とりあえず、Buttonsコンポーネントだけ使ってみます。
npm install --save pui-react-buttons
CSSの設定はnode_modules
の下のpui-css-
から始まるプロジェクトのcss
ファイルのパスを、index.js
でimport
すればOK。
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(
<App />,
document.getElementById('root')
);
ちょっと面倒くさいけど、コンポーネント追加の度にこれを全部追加する。
あとはコンポーネントを使うのみ。PUIのガイドラインで
var DefaultButton = require('pui-react-buttons').DefaultButton;
var DefaultAltButton = require('pui-react-buttons').DefaultAltButton;
var LowlightButton = require('pui-react-buttons').LowlightButton;
のように説明されている箇所は
import {DefaultButton, DefaultAltButton, LowlightButton} from 'pui-react-buttons';
でOK。App.js
で<HighlightButton>
を使うと次のように。
import React, { Component } from 'react';
import {HighlightButton} from 'pui-react-buttons';
class App extends Component {
render() {
return (
<div className="container">
<HighlightButton>Hello World!</HighlightButton>
</div>
);
}
}
export default App;
以降、同じ要領で好きなコンポーネントを追加すれば良い。
npm run build
すればCSSが結合・圧縮されるのでDr. Frankenstyleは不要!
$ 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
便利!