かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

TypeScript + Reactでbootstrap

react-bootstrapを使うととても簡単です。

以下のコマンドで必要なものがインストールできます。

npm install react-bootstrap bootstrap --save
tsd install react-boosstrap -save

index.htmlではbootstrapのcssを読み込んでおきましょう。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>ReactApplication</title>
    <meta charset="utf-8" />
    <link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div id="content"></div>
    <script src="Scripts/es6-promise.min.js"></script>
    <script src="Scripts/fetch.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

こんな感じで使えます。

import * as React from 'react';
import {Grid, Nav, NavItem, Navbar, Row, Col, Input, ButtonInput} from 'react-bootstrap';

export default class IndexPage extends React.Component<{}, {}> {
    render() {
        return (
            <div>
                <Navbar>
                    <Navbar.Header>
                        <Navbar.Brand>
                            <a href='#'>React-bootstrap</a>
                        </Navbar.Brand>
                    </Navbar.Header>
                    <Nav bsStyle='tabs' activeKey={1}>
                        <NavItem eventKey={1}>Nav Item 1</NavItem>
                        <NavItem eventKey={2}>Nav Item 2</NavItem>
                        <NavItem eventKey={3}>Nav Item 3</NavItem>
                    </Nav>
                </Navbar>
                <Grid>
                    <Row>
                        <Col md={6}>
                            md=6
                        </Col>
                        <Col md={3}>
                            md=3
                        </Col>
                        <Col md={3}>
                            md=3
                        </Col>
                    </Row>
                    <Row>
                        <Col md={12}>
                            <form>
                                <Input type='text' label='なまえ' />
                                <ButtonInput type='submit' value='送信' />
                            </form>
                        </Col>
                    </Row>
                </Grid>
            </div>
        );
    }
}

こんな雰囲気になります。

f:id:okazuki:20160124201708p:plain

細かいコンポーネントは以下のページを見ながらやれば迷いません。

React-Bootstrap

bootstrapなのでcss差し替えるだけでがらっと見た目変わるのいい感じですね。

f:id:okazuki:20160124202039p:plain