React＋CSSフレームワークを検討してみたよ

React使いつつも、既存のCSSフレームワークを何か載せようと思っていろいろ調べたメモ。
あくまでもReactとの親和性などに絞って選んでます。
Bootstrapは何か「出、出〜〜〜！！Bootstrap奴〜〜〜！」ってなりそうだったので、最後の砦として触れてません。

Material-UI

一番Reactに寄り添って出来ている。
以下のように必要なコンポーネントをimportしてrender()内で使うだけ。
実際触ってみると非常にお手軽で、動きのクォリティも高かった。
余計な外部ファイルも読む必要がなくて綺麗。

その分かなりカッチリと仕様が決まっているので、少し手を加えたい場合は
さらにMaterial-UIコンポーネントをラップするオリジナルコンポーネントを作れば拡張はできる。

// タッチ・クリックの挙動のために必要っぽい
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

...

return (
  <div>
    <DropDownMenu value={default} onChange={this.fnChange}>
      <MenuItem value={data.id} primaryText={data.name} />
    </DropDownMenu>
  </div>
);

Semantic UI

デザインが可愛くて良かったけれど、jQuery依存しているせいでドロップダウンなどを動作させるときにjQueryオブジェクトに対してメソッドを走らせないといけない仕様っぽかった。

せっかくReactで書くのに、またバッティングしないようにビクビクしながらclass名を定義するのはつらすぎるので微妙。

componentDidMount() {
    $('.ui.selection.dropdown').dropdown({
        onChange: (value) => {
            this.setState({
                value
            });
        }
    });
}

react-semantify

同じような悩みを抱えた人がいたらしく、こんなのも見つけました。
前述のMUIのように、ReactコンポーネントとしてimportしてcomponentDidMountで処理を記述する必要は無いっぽい（試してないので予想）

<div class="ui selection dropdown"></div>

$('.ui.selection.dropdown').dropdown();

これを

<Dropdown init={true}></Dropdown>

こういう風に書けるらしい
だいぶReactっぽく書けるようになるけれど、結局大元がjQuery依存していることに変わりはないので、別途jQuery本体を読み込む必要があります。

Semantic-UI-React

（※2016.10.14追記）
http://react.semantic-ui.com/introduction
Semantic UIに公式のReact準拠ライブラリが登場しました。（ばんざーいばんざーい！）

jQuery Free

all jQuery functionality has been re-implemented in React.

どうやら問題は解決したようです。
仮想DOMでのレンダリングに対応するために、頑張って全部再実装したっぽいです。

import {Dropdown} from 'semantic-ui-react';

...

<Dropdown text='File'>
  <Dropdown.Menu>
    <Dropdown.Item text='New' />
  </Dropdown.Menu>
</Dropdown>

MUI

Material-UIのクローンみたいな感じ？
公式にReactがサポートされていて、以下のように書けばコンポーネントを設置できる。
別途MUIのcssファイルを読み込む必要があるっぽい。
従来の構成を大きく損なわずに、UIコンポーネントだけを薄く使いたいような場合だったら有りかもしれない。

import Button from 'muicss/lib/react/button';

...

return (
  <div>
    <Button>button</Button>
    <Button color="primary">button</Button>
    <Button color="danger">button</Button>
    <Button color="accent">button</Button>
  </div>
);

Material Design Lite

Reactに寄り添っていないMaterialUI系フレームワーク。
ただしこちらはjQuery依存が無さそうなので、class名のつらさは無いかも。
ただReact以外の環境の方が良さを発揮できるかもしれない。

material-design-react

https://www.npmjs.com/package/material-design-react
一応これもラッパーライブラリっぽいものがあった。

そのほか

結構いいデザインのものはいくつかあるけれど、案外jQuery依存しているものが多かった。
深く見ていないけれど、Semantic UIと同じような問題を抱える気がするので使用には注意。

Bootflat

Materialize

uikit