More than 1 year has passed since last update.

普段 Bootstrap を使ってレイアウトや UI コンポーネントを作っていると DOM がえらいことになるので、React で楽してみようという内容です。

React Bootstrap

React Bootstrap は Bootstrap のコンポーネントを JSX で扱えるようにした素敵なライブラリです。

たとえば、Bootstrap でまず書くであろう <nav class="navbar navbar-default"> とかは以下のように JSX で使えます。

var Navbar = ReactBootstrap.Navbar;

var navbarInstance = (
  <Navbar inverse toggleNavKey={0} fixedTop={true}>
    ...
  </Navbar>
);

これだけだとウマミがわからないですよね。
ということで JavaScript でループ処理回すだけで構成できちゃいそうなポートフォリオのページ(こんなの)を React Bootstrap を使って作ってみます。

image

ポートフォリオ ページを作ってみる

先に完成図をお見せしますとこんな感じ。
よりシンプルにするためにナビゲーションバーなどは省いています。
内容は Leaflet.js のサンプル集です。
各アイテムはタイトル、サムネイル、デモ/ソースコードを見るためのボタンで構成されています。
至ってシンプル。

image

では早速作っていきます。

最終的には一個の <div> になるので以下のように BODY タグ内に配置。
リアル DOM はこれだけなので、HTML はとってもスッキリ。

<!-- ここに React コンポーネントをまるまる配置します -->
<div id="containerDOM"></div>

React Bootstrap から必要なコンポーネントを呼び出します。

var Grid = ReactBootstrap.Grid;
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var Button = ReactBootstrap.Button;

ざっと対応関係はこんな感じでしょうか。

React Bootstrap Bootstrap
<Col xs={12} md={4}> <div class="col-md-4 col-xs-12">
<Row> <div class="row">
<Grid> <div class="container">
<Button> <button type="button" class="btn">

呼び出したコンポーネントを使ってループ対象となるアイテム一式をコンポーネント化するためにクラスを作成します。
ソースとなるデータ参照を定義して、JSX で DOM を構成し、ボタンのクリックイベントを定義するだけです。

// アイテム コンポーネント
var Layout = React.createClass({
  // 初期値の設定
  getInitialState() {
    return {
      infos : infos // ここに各サンプルの情報が配列で入ってます
    };
  },
  // [View Demo] ボタンのクリックイベント
  showDemo(e) {
    location.href = e.target.title;
  },
  // [View Code] ボタンのクリックイベント
  showCode(e) {
    location.href = e.target.title;
  },
  render() {
    var showDemo = this.showDemo;
    var showCode = this.showCode;
    // ループ処理でサンプルの情報を DOM に割り当て
    var items = this.state.infos.map(function(info) {
      return (
        <Col xs={12} md={4} key={info.filename}>
          <div className={"item"}>
            <div className={"title-header"}>
              <h3>{info.title}</h3>
              <p>{info.filename}</p>
            </div>
            <div className={"avatar"}><img src={info.imgUrl} alt="" /></div>
            <p>
              <Button className="btn btn-demo" title={info.demoUrl} onClick={showDemo}>View Demo</Button>
              <Button className="btn-github" title={info.codeUrl} onClick={showCode}>View Code</Button>
            </p>
          </div>
        </Col>
      );
    });
    // 上のループ処理で作成した items を配置
    return (
      <Grid>
        <Row>
          {items}
        </Row>
      </Grid>
    )
  }
});

クラスができたので render() して完了。

ReactDOM.render(<Layout />, document.getElementById("containerDOM"));

あとはサムネイルとかボタンとかコンテナを対応する JSX の className を使って CSS を書いてリデザインして終わり。

なんと簡単。。

完成品はこちら

今回紹介した JSX とか最後のおまけの CSS などは GitHub リポジトリにあるのでご自由にお使いください。
個人的に JSX 好きなので、コンパイルしないで置いてあります。
ライブデモのソースもプリコンパイルしてないんですが、これくらいだとディレイはあまり感じないですね。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.