フォルダ構造の整理

メンテナンスが容易で、コラボレーションにも適しています.
コンテナ/プレゼンテーションモード
JSXセクション(HTMLセクション-デモンストレーション)と
stateなどの論理(JavaScriptセクション-container)を区切り、各ファイルに格納します.
ファイル名.container.js
ファイル名.presenter.js
拡張子js
dotの代わりにcamelボックスを使ってもいいです.変えても大丈夫です.

container

親構成部品-読み込み

import 함수이름 from ""
export default function(){


return(
<함수이름 / >)
}

import

に戻るとき関数(JSX部)

を書き込む

presenter

サブ構成部品-展開

export default function 함수이름(){


return(
... 
}

import emotion(emotionを基準とし、親の成分-相対)
内部変数と関数は?道具を使え!

props

:親が子供に与える変数または関数
(子は親に提供できません-データの一方向フロー)

container

import 함수이름 from ""
export default function(){


return(
<함수이름 aaa={handlerChangeWriter} 
		bbb={....} / >)
}

presenter

export default function 함수이름(props){


return(
... onChange={props.aaa}
}

aaaとbbbという名前のオブジェクトはpropsでprenterにアクセスして使用できます.

はこのように分割され、コンポーネント(部品)として使用される
ex)

左-page
中上-container(JavaScript)
中下方-gql
右上-presenter(JSX)
右下-情緒(style)