Component

次の三つのコンポーネントがあります

Grid
Row
Col

使い方はbootstrap3と大体同じです。実装にCSS flexible boxを使っています。

Gridの中にRowを置きます。
Rowの中にColを置きます。
Colにxs={6}のように、幅を設定します。

例

index.jsx

const React = require('react')
const ReactDOM = require('react-dom')
const {Grid, Row, Col} = require('react-flexbox-grid');

const App = () =>
    <Grid>
      <Row>
        <Col xs={6} md={3}>Hello, world!</Col>
      </Row>
    </Grid>

ReactDOM.render(<App />, document.querySelector('#container'))

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="container"></div>
    <script src="bundle.js"></script>
  </body>
</html>

手順

準備

package.jsonを作ります。

npm init -y

必要なnpmモジュールをインストールします。

npm i -D webpack babel-loader babel-core babel-plugin-transform-react-jsx style-loader css-loader react react-dom react-flexbox-grid babel-polyfill classnames flexboxgrid

webpackの設定ファイルを作ります。

webpack.config.js

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        plugins: ["transform-react-jsx"]
      }
    }, {
      test: /\.css$/,
      loader: "style!css?modules"
    }]
  }
}

ビルド

node_modules/webpack/bin/webpack.js

実行

index.htmlを開くと次のようなDOMが生成されます。

<div id="container">
    <div data-reactroot="" class="R2zU9JsZW1r2id-qp7H3S">
        <div class="_1y_mg6OlZKhq9LGfUCMUme">
            <div class="_1DhV6KBVDhq0C7-sV3-jzc _3ANRSKqa19Npv87KFXEafn">Hello, world!</div>
        </div>
    </div>
</div>

classに謎の文字列が指定されています。

<style type="text/css">
    ._2lUES1qfK73keSn9S_BiQT,
    .R2zU9JsZW1r2id-qp7H3S {
        margin-right: auto;
        margin-left: auto;
    }

    ._2lUES1qfK73keSn9S_BiQT {
        padding-right: 2rem;
        padding-left: 2rem;
    }

headタグの中のstyleタグに謎の文字列クラスが定義されています。
CSS Modulesによって、コンポーネントに閉じたスタイルが作られているのがわかります。

注意書き

webpack.config.jsの定義で?modulesをつけるのがわからず、苦労しました。

className always empty · Issue #21 · roylee0704/react-flexbox-grid

Adding ?modules to the loader fixed it for me:
{
test: /.css/,
loader: "style!css?modules"
},

React-FlexBox-Gridの使い方

Component

例

手順

準備

ビルド

実行

注意書き

参考