material-uiというものがあるというのを聞きました。
Reactでマテリアルデザインを再現するのにいい感じみたいですね。
プロジェクト作成
Visual StudioでTypeScriptのプロジェクトを作ります。 プロジェクトをPowerShellで開いてnpm initを打ち込んでとりあえずEnter連打してpackage.jsonを作ります。
以下のコマンドをうちこんで、必要なファイルを取り込みます。
npm install react react-dom material-ui react-tap-event-plugin --save
tsd install react react-dom material-ui
typingsフォルダをすべてのファイルを表示状態にしてプロジェクトに取り込んでおきます。package.jsonもついでに。
TypeScript ビルドをTSXを応答、モジュールシステムのCommonJSにしておきます。
ビルドイベントでビルド前にこれを
cd $(ProjectDir) npm install
ビルド後にこれを
cd $(ProjectDir) browserify scripts\init.js -o bundle-init.js browserify scripts\app.js -o bundle.js
scripts/init.jsとscripts/app.tsxを作って下準備完成。
めんどい下準備
なんかiOS対策っぽいのしないといけないちっく。init.jsに以下のスクリプトを書いておきます。
var injectTapEventPlugin = require('react-tap-event-plugin'); // Needed for onTouchTap // Can go away when react 1.0 release // Check this repo: // https://github.com/zilverline/react-tap-event-plugin injectTapEventPlugin();
お試し
デモサイトにコントロールごとに使い方が書いてあるので、それを見て写経します。
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import {AppBar, FlatButton, Dialog} from 'material-ui'; interface AppState { isDialogOpen: boolean; } class App extends React.Component<{}, AppState> { constructor(prop: {}) { super(prop); this.state = { isDialogOpen: false } as AppState; } private handleClick() { this.setState({ isDialogOpen: true } as AppState); } private handleCloseClick() { this.setState({ isDialogOpen: false } as AppState); } render() { return <div> <AppBar title='マテリアルUIサンプル' iconElementRight={<FlatButton label='ダイアログ' onClick={this.handleClick.bind(this) } />} /> <div style={{ margin: '200px 0 0 0', textAlign: 'center'}}> <h1>ダイアログ使ってみた</h1> <Dialog modal={true} title='Sample dialog' actions={[<FlatButton label='閉じる' onClick={this.handleCloseClick.bind(this) } />]} open={this.state.isDialogOpen}> <p>ダイアログを出してみた</p> </Dialog> </div> </div>; } } ReactDOM.render(<App />, document.getElementById('content'));
実行するとこんな感じに。
ソースコード
GitHubにあげておきました。