create-react-appで作ったプロジェクトでPivotal UIを使う

Views EN MD
React.js Pivotal UI

しばらく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;

image

実行

npm start

image

Pivotal UI導入

次にいよいよPUIを導入します。

とりあえず、Buttonsコンポーネントだけ使ってみます。

npm install --save pui-react-buttons

CSSの設定はnode_modulesの下のpui-css-から始まるプロジェクトのcssファイルのパスを、index.jsでimportすればOK。

image

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;

image

以降、同じ要領で好きなコンポーネントを追加すれば良い。

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

image

JavaScriptもCSSも結合・圧縮されていますね。

image

create-react-app便利！