React-bootstrapを試してみました #React

以前の記事でReactを少し触ってみました。
http://qiita.com/zuzuwen/items/bb0d4d2d9cdab5920f49
続きで今度はbootstrapテーマを適応させてみました。

1.「package.json」にreact-bootstrapを記載

package.json

"dependencies": {
...
    "react-bootstrap": "0.30.8",
...
}

2.ButtonとButtonToolbarをimportする

MyBootstrapComponent.tsx

/// <reference path="../node_modules/@types/react/index.d.ts" />
import * as React from "react";
import { Button, ButtonToolbar } from 'react-bootstrap';

export default class MyBootstrapComponent extends React.Component<{ prop: any }, {}> {
    render() {
        return (<div>
            <h2>Buttons</h2>
            <ButtonToolbar>
                <Button>Default</Button>
                <Button bsStyle="primary">Primary</Button>
                <Button bsStyle="success">Success</Button>
                <Button bsStyle="info">Info</Button>
                <Button bsStyle="warning">Warning</Button>
                <Button bsStyle="danger">Danger</Button>
                <Button bsStyle="link">Link</Button>
            </ButtonToolbar>
        </div>);
    }
}

App.tsx

/// <reference path="../node_modules/@types/react/index.d.ts" />
/// <reference path="../node_modules/@types/react-dom/index.d.ts" />
import * as React from "react";
import * as ReactDOM from "react-dom";
import MyBootstrapComponent from "./MyBootstrapComponent";

window.onload = () => {
 ...

    ReactDOM.render(<MyBootstrapComponent prop=""/>, document.getElementById('bootstrapbutton'));
};

3.スタイルシート適応とdiv追加

Index.html

...
<head>
...
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
</head>
...
<body>
...
    <div id="bootstrapbutton"></div>
...
</body>
...