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') );
結果
その他のコンポーネントの場所
http://react-components.com/
※必要な奴がない場合はここで探すしかない
所感
ないよりあったほうが良いのでちょっと調べていく必要がある
いろいろなライブラリが出てきてどれを使えばよいのか悩むところだけどいつまでもjquery一択はマズイので少し選択肢を広げていく
うーん、学習コストそこそこ高くなりそう…