react-routerを使うまでのメモです。ちなみに、開始地点は、以下の記事のbrowserifyを使うようにしたプロジェクトです。
型定義ファイルをダウンロード
以下のコマンドをうって型定義ファイルをダウンロードしておきます。
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><htmllang="ja"><head><metacharset="utf-8" /><title>TypeScript HTML App</title><linkrel="stylesheet"href="app.css"type="text/css" /></head><body><divid="content"></div><scriptsrc="bundle.js"></script></body></html>
実行すると以下のような感じになります。
とっかかりがわかったので、あとはこのページをみて勉強しよう。