Reactで開発を進める際に、まず画面全体の設計を行うのが大事です。全体を囲むコンポーネント、そして画面の各要素を構成するコンポーネントと順番に作っていきます。それをやらずに開発を進めると後で修正が大変でしょう。 そこで使ってみたいのがReact Velocityです。コンポーネント設計を行い、スケルトンコードを生成します。

React Velocityの使い方

例です。Webブラウザ上で自由に画面を構成できます。

Redux版。

作成した画面構成をダウンロードすると、こんな感じにファイルが生成されます。

React Velocityはあくまでもスケルトンコードで、イベントなどが実装される訳ではありません。とは言え、まずはReact Velocityで画面構成を作っておけば、コンポーネント間の関連も可視化されるので分かりやすくなるでしょう。

React VelocityはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

React Velocity apjs/ReactVelocity: react prototyping tool