かずきのBlog@hatena

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

TypeScript JSXでReactRouter

react-routerを使うまでのメモです。ちなみに、開始地点は、以下の記事のbrowserifyを使うようにしたプロジェクトです。

blog.okazuki.jp

型定義ファイルをダウンロード

以下のコマンドをうって型定義ファイルをダウンロードしておきます。

tsd install -save react react-dom react-router

ライブラリのダウンロード

以下のコマンドを打ち込んで必要なライブラリをダウンロードします。

npm install react react-dom react-router history

ReactRouterを使う

ReactRouterを使うには、以下のような感じでいきます。Router, Route, IndexRoute, Linkあたりをimportで取り込んでおけばよさげ。

Page1とPage2というコンポーネントと、Appというコンポーネントを作ってみました。Appのthis.props.childrenにPage1とPage2を埋め込もうという感じです。

Linkでページのパスを指定してます。

/// <reference path="../typings/tsd.d.ts" />
import * as React from 'react';
import {Router, Route, IndexRoute, Link} from 'react-router';

export class Page1 extends React.Component<{}, {}> {
    render() {
        return <h1>Page1</h1>;
    }
}

export class Page2 extends React.Component<{}, {}> {
    render() {
        return <h1>Page2</h1>;
    }
}

export class App extends React.Component<React.Props<{}>, {}> {
    render() {
        return <div>
                <header>
                    <h1>React router sample</h1>
                    <Link to="/">Page1</Link>
                    <Link to="/Page2">Page2</Link>
                </header>
                <div>
                    {this.props.children}
                </div>
            </div>;
    }
}

次に、Routerを組み立てます。 Routerタグの中にRouteを仕込む感じです。pathでURLのパスを指定してcomponentで対応するコンポーネントを定義します。

/// <reference path="../typings/tsd.d.ts" />
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as Components from './components';
import {Router, Route, IndexRoute, Link} from 'react-router';

var route = <Router>
        <Route path="/" component={Components.App}>
            <IndexRoute component={Components.Page1} />
            <Route path="/Page2" component={Components.Page2} />
        </Route>
    </Router>;

ReactDOM.render(route,
    document.getElementById('content'));

HTMLはこんな感じ。

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
    <div id="content"></div>
    <script src="bundle.js"></script>
</body>
</html>

実行すると以下のような感じになります。

f:id:okazuki:20151228154951p:plain

f:id:okazuki:20151228154957p:plain

とっかかりがわかったので、あとはこのページをみて勉強しよう。

beck23.hatenablog.com