https://gist.github.com/azu/d5e92de127f76545ffc2 の続き
- コンポーネント名のディレクトリを作成
index.jsをおき、そこにコンポーネントを定義する
コンポーネントの分類(TODO: 気に入ってない)
components/project/にプロジェクトに強く依存するコンポーネントcomponents/ui/にLinkやButtonといった汎用コンポーネントcomponents/utils/に数値の整形表示や汎用だが、見た目に依存するコンポーネントcomponents/shapes/再利用したいReact.PropTypesのモジュール(コンポーネントではない)
をそれぞれ配置している。
理由
コンポーネントには親子関係があるものも存在する。
例) ListとListItem、propsの値によってプレースホルダ的な表示に切り替えたいコンポーネントなど
全てのコンポーネント.jsがcomponents/project/以下に並べて存在する混乱しやすいので、
全てのコンポーネントをディレクトリの中に入れることで並べて問題無いようにしている。
index.jsをデフォルトとしているのは、require("./component/ImageViewer") のようなディレクトリ名で読み込みできるため。
コンポーネントの親子関係がある or コンポーネントの中身が条件で変わる場合は、 そのコンポーネントディレクトリ以下で自由に行う。
コンポーネントディレクトリ間で相互にrequireする必要があるコンポーネントは設計的におかしい依存になっているか、
そのコンポーネントを共通コンポーネントとして、ui/またはutils/ディレクトリに移動する。
これにより、components/project/ 以下は相互依存がないコンポーネントとして区切ることができるのが理想的状態。
(もちろん例外は出てくるはず)
- Project/ui どこのディレクトリに置くべきものか考える
- コンポーネント名でディレクトリを作る
index.jsを配置するBaseComponentを継承したコンポーネントクラスを作成render(){}を実装し、何を表示するかを決める- 外から受け取りたい値(
props)を決め、static propTypes = {}を実装するstatic propTypes = {}の項目はそれぞれReact.PropTypes.string.isRequiredのようにisRequiredをつける
App.jsなどに作成したコンポーネントをおいて、値を渡して表示する- 値がnull つまり
isRequiredがあると警告がでる場合、nullの場合にどういう表示になるかをコンポーネントで実装する - nullの場合も実装ができたら、不要な
isRequiredは外す