かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

TypeScript + Reactでbootstrap

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

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

npm install react-bootstrap bootstrap --save
tsd install react-bootstrap -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

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

https://react-bootstrap.github.io/components.html#forms

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

f:id:okazuki:20160124202039p:plain