React+Redux+TypeScript事始め
はじめに
普段はAngularを使っているので、他のフレームワークを触ってみようと思った今日このごろ。
Vueは超絶軽く触ったことがあるので今回はReact。
JSXがパッと見とっつきにくかったので後回しにしてたけど、ちゃんと向き合うことにする。
TL;DR.
インストール
手作業でファイルを作ってもいいけど、Facebook作成のcreate-react-appがあるのでそれを使う。
$ npm install -g create-react-app # TSを使いたいからオプション指定 $ create-react-app react-sample --typescript
サンプルプログラムを作る
いつも?通りToDoリストを作ることにする。
今回Reactのサンプルなので、せっかくだからReduxも導入することにする。
インストールは下記の通りでOK。
# 必要なライブラリのインストール $ npm install -save redux react-redux # 実装時楽したいので型定義もインストール $ npm install --save-dev @types/react @types/react-redux
サンプルの実装はReduxの公式サイトのサンプルプログラムを参考にしてTSへリファクタしていくことにする。
今回のリファクタリングの方針は下記の通りにした。
ちなみにこれがベストかどうかはわからないので、あくまで今回の方針とする。
- DOM作ってるところは
.tsx
にする - component周りはclassにする
- propTypesの代わりにTSのinterfaceを使う
サンプルコード
全量は流石に多いのでGitに上げた。
ActionとかReducerは型つけたぐらいなので、Componentとinterfasceをサンプルとして載せとく。
Component
import React, { Component } from 'react'; import { ITodoProps } from '../commons/interfaces'; export default class Todo extends Component<ITodoProps, {}> { render() { return ( <li onClick={this.props.onClick} style={{ textDecoration: this.props.completed ? 'line-through' : 'none' }} > {this.props.text} </li> ); } }
interface
export interface ITodoProps { completed: boolean; id: number; onClick: any; text: string } export interface ITodoListProps { todos?: Array<ITodoProps>; toggleTodo: any; } export interface ILinkProps { active: boolean; children: string; onClick: any; filter: string } export interface IState { todos: Array<any>; visibilityFilter: string; }
まとめ
今回は簡単にReact + Reduxのチュートリアルをやってみた。
JSX(TSX)の書き方はとっつき肉かなって思ってたけど、意外とそうでもなかった。
Reactが学習コスト低めって言われている理由がちょっとわかった気がする。
そのうちオリジナルの何かを作ろうと思った。
それでは今回はこの辺で。