azu/Reactコンポーネントの作成ステップ.md

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/ 以下は相互依存がないコンポーネントとして区切ることができるのが理想的状態。 (もちろん例外は出てくるはず)

1. Project/ui どこのディレクトリに置くべきものか考える
2. コンポーネント名でディレクトリを作る
3. index.jsを配置する
4. BaseComponentを継承したコンポーネントクラスを作成
5. render(){}を実装し、何を表示するかを決める
6. 外から受け取りたい値(props)を決め、static propTypes = {} を実装する
   • static propTypes = {}の項目はそれぞれ React.PropTypes.string.isRequiredのようにisRequiredをつける
7. App.jsなどに作成したコンポーネントをおいて、値を渡して表示する
8. 値がnull つまり isRequired があると警告がでる場合、nullの場合にどういう表示になるかをコンポーネントで実装する
9. nullの場合も実装ができたら、不要なisRequiredは外す