Reactをより深く理解するために基礎理解後に知るべき周辺技術

React基礎やJSX以外にも知っておくべき事が結構ありますね(^▽^;)

ルーティングやデザイン周り、実際に現場での開発を考えるとテスト手法も大切。

そして何よりReactを学ぶと、大抵Redux(Flux)の話も出てきます。

今回はそこらへんの周辺技術について、触り程度ですが調べてみました。

Material-UI

Material-UIはGoogleが提唱するデザインのUIコンポーネント。

2018年5月に正式版(v1)が導入されてましたが、今回はv0を利用。

<最終成果物のイメージ>

ジャンケンの結果と成績をタグで切り替えられる画面。

ジャンケンの判定や結果を記録するJyankenクラス。

サンプルコードのメインロジック。

各コンポーネントの説明。

・MuiThemeProviderというテーマで括る

・Paperは影をつけるコンテナー

・タグはTabsとTabコンポーネントで作る

・table → Table

・tbody → TableBody

・tr → TableRow

・th → TableHeader

・th → TableHeaderColumn

ルーティング

SPAでURLでページ切り替えるためのライブラリーにReact Routerがあります。

importで以下を追加呼び出し。

Indexクラスのrenderメソッドを変更。

Linkコンポーネントはaタグに相当するもので、toへアクセスしたのに相当。

Routerコンポーネントはpathで指定したURLにアクセスすると、componentで指定したコンポーネントが実行、exactを指定すると完全一致時のみ実行されます。

POINTReact RouterはBrowserRouterコンポーネントで括る必要がある!!

テスティング

Mochaを使ったユニット試験の一例。

package.jsonを修正。

ユニット試験のサンプルコード。

Nightmareを使ったE2Eテストの一例。

E2Eテストのサンプルコード。

E2Eは色んなライブラリがあり、コレ!!というものは決まってないようですね。

その中でもNightmareが活発に開発されている模様。

Redux

大規模なアプリではMVCのMCの役割を担うReduxが導入されています。

■ Reduxの特徴

・Stateやイベントの集中管理

・イベント → State管理 → ビュー変更の一方向

・シンプルでサイズが小さい

・サーバー等の通信機能は含まれていない

Reduxを採用すると誰が書いても同じような構成となり保守性は◯。

ただコード量が増えるので、シンプルな場合、生産性が下がる可能性も・・・