m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

react-bootstrapを試す

reactの場合はタグの定義方法が異なるの

cssの定義だけならともかくモーダルウィンドウとか使いたい場合はそのままでは使えないので…

準備

プロジェクトに以下を実行

npm install jquery bootstrap react reactify browserify bootstrap-react

grunt設定

初期化
npm init
npm install grunt --save-dev
npm install grunt-browserify grunt-contrib-watch --save-dev
Gruntfile.js
module.exports = function (grunt) {
    var pkg = grunt.file.readJSON('package.json');

    grunt.initConfig({
        browserify : {
            dev: {
                options: {
                    debug: true,
                    transform: ['reactify']
                },
                files: {
                    'js/app.js': 'jsx/**/*.jsx'
                }
            }
        },
        watch : {
            scripts : {
                files : ['jsx/**/*.jsx'],
                tasks : ['browserify:dev']
            }
        }
    });

    Object.keys(pkg.devDependencies).forEach(function (devDependency) {
        if (devDependency.match(/^grunt\-/)) {
            grunt.loadNpmTasks(devDependency);
        }
    });

    grunt.registerTask('default', ['watch']);
};

実装

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Reactjs-TodoApp</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div id="content"></div>
<script src="js/app.js"></script>
</body>
</html>

※bootstrapのcssはきちんと入れておく

app.jsx
var $ = require('jquery');
var React = require('react');
var ReactDOM = require('react-dom');

// アラート
var Alert = require("react-bootstrap").Alert;

// ボタン系
var ButtonToolbar = require("react-bootstrap").ButtonToolbar;
var ButtonGroup = require("react-bootstrap").ButtonGroup;
var Button = require("react-bootstrap").Button;

// パンくず系
var Breadcrumb = require("react-bootstrap").Breadcrumb;
var BreadcrumbItem = require("react-bootstrap").BreadcrumbItem;

// モーダルウィンドウ
var Modal = require("react-bootstrap").Modal;

// フォーム系
var ButtonInput = require("react-bootstrap").ButtonInput;
var Input = require("react-bootstrap").Input;

/**
 * SampleApp
 */
var SampleApp = React.createClass({

    render: function() {
        // めんどくさいんでcssはここに書いておく
        var divStyle = {
            padding: '10px',
            width: '800px',
            margin: '0 auto',
            backgroundColor: '#CCC'
        };
        return (
            <div className="sampleoApp" style={divStyle}>
                <h1>SampleApp</h1>
                <hr/>
                <div>
                    <h2>Alert</h2>
                    <Alert1 />
                    <hr/>
                </div>
                <div>
                    <h2>Breadcrumb</h2>
                    <Breadcrumb1 />
                    <hr/>
                </div>
                <div>
                    <h2>ButtonToolbar</h2>
                    <Button1 />
                    <hr/>
                </div>
                <div>
                    <h2>ButtonGroup</h2>
                    <Button2 />
                    <hr/>
                </div>
                <div>
                    <h2>Modal</h2>
                    <Modal1 />
                    <hr/>
                </div>
                <div>
                    <h2>Form</h2>
                    <Form1 />
                    <hr/>
                </div>
            </div>
        );
    }
});

var Alert1 = React.createClass({

    render: function() {
        return (
            <Alert bsStyle="warning">
                <strong>Test</strong> Hello, world!
            </Alert>
        );
    }
});

var Breadcrumb1 = React.createClass({

    render: function() {
        return (
            <Breadcrumb>
                <BreadcrumbItem href="#b1">
                    Home
                </BreadcrumbItem>
                <BreadcrumbItem href="#b1">
                    Library
                </BreadcrumbItem>
                <BreadcrumbItem active>
                    Data
                </BreadcrumbItem>
            </Breadcrumb>
        );
    }
});

var Button1 = React.createClass({

    render: function() {
        return (
            <ButtonToolbar>
                <Button bsStyle="primary">Button1</Button>
                <Button bsStyle="success">Button2</Button>
                <Button bsStyle="info">Button3</Button>
            </ButtonToolbar>
        );
    }
});

var Button2 = React.createClass({

    render: function() {
        return (
            <ButtonGroup>
                <Button bsStyle="primary">Button1</Button>
                <Button bsStyle="success">Button2</Button>
                <Button bsStyle="info">Button3</Button>
            </ButtonGroup>
        );
    }
});

var Modal1 = React.createClass({

    getInitialState() {
        return { showModal: false };
    },

    close() {
        this.setState({ showModal: false });
    },

    open() {
        this.setState({ showModal: true });
    },

    render() {
        return (
            <div>
                <Button
                    bsStyle="primary"
                    bsSize="large"
                    onClick={this.open}
                >
                    モーダルウィンドウオープン
                </Button>

                <Modal show={this.state.showModal} onHide={this.close}>
                    <Modal.Header closeButton>
                        <Modal.Title>タイトル</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        テスとメッセージ
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.close}>閉じる</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );
    }
});

var Form1 = React.createClass({

    render: function() {
        return (
            <form>
                <Input type="text" label="Text" placeholder="Enter text" />
                <Input type="email" label="Email Address" placeholder="Enter email" />
                <Input type="password" label="Password" />
                <Input type="file" label="File" help="[Optional] Block level help text" />
                <Input type="checkbox" label="Checkbox" checked readOnly />
                <Input type="radio" label="Radio" checked readOnly />
                <Input type="select" label="Select" placeholder="select">
                    <option value="select">select</option>
                    <option value="other">...</option>
                </Input>
                <Input type="select" label="Multiple Select" multiple>
                    <option value="select">select (multiple)</option>
                    <option value="other">...</option>
                </Input>
                <Input type="textarea" label="Text Area" placeholder="textarea" />
                <ButtonInput value="Button Input" />
                <ButtonInput type="reset" value="Reset Button" />
                <ButtonInput type="submit" value="Submit Button" />
            </form>
        );
    }
});

ReactDOM.render(
    <SampleApp />,
    document.getElementById('content')
);

結果

f:id:m_shige1979:20151224235539p:plain

その他のコンポーネントの場所

http://react-components.com/
※必要な奴がない場合はここで探すしかない

所感

ないよりあったほうが良いのでちょっと調べていく必要がある
いろいろなライブラリが出てきてどれを使えばよいのか悩むところだけどいつまでもjquery一択はマズイので少し選択肢を広げていく
うーん、学習コストそこそこ高くなりそう…