Reactのサード・ステップの変更点

追加された行はこの色です。
削除された行はこの色です。
Reactのサード・ステップへ行く。
Reactのサード・ステップの差分を削除
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-戻る
--[[React]] -> [[Redux]]
--[[Reactのファースト・ステップ]]
--[[Reactのセカンド・ステップ]]
--Reactのサード・ステップ
--[[Reactの4thステップ]]
--[[Reactの5thステップ]]

*目次 [#x13aba1b]
#contents

*概要 [#x1069e65]
-create-react-appを使用した、[[React]] + [[Redux]]の step by step。
-[[ファースト・ステップ>Reactのファースト・ステップ]]、[[セカンド・ステップ>Reactのセカンド・ステップ]]で作成した、~
テンプレートをベースにしてASP.NETのCRUD処理を実装する。

*手順１ [#i946770b]
https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/SPA/React/react_template

をベースにしてASP.NETのCRUD処理を実装する。

**ポイント [#x266b8de]

***Styleの指定方法 [#qbd4bfc4]
以下があるが、基本は１、２辺りを使う。

+Classによるスタイリング~
JSXではclassが予約語となっているためclassName 属性を使用する。~
　
+インラインのスタイリング~
--例１
 return (
   <button className="btn btn-default" style={{color: "red"}}/>
 );
--例２
 var btnstyle = {
   color: "red"
 };
 return (
   <button className="btn btn-default" style={btnstyle}/>
 );
+CSS Modules
+CSS in JS

***Controlled Component on Form [#rcd1419f]
-stateによって値を管理するComponent。
-textもdrop downも、この方法に従う。
-value、defaultValue、onChangeを設定する。
--value: stateの値
--defaultValue: （&color(red){初期化した};）stateの値
--onChange: stateの変更処理

-注意
--onChangeでは、stateの一部を変更するようにする。

***Each child in an array should have a unique "key" prop. [#cdd0f014]
mapでループする場合、JSXのelementにkeyプロパティを追加する。

***fetch APIでPOST or JOSN-RPC [#d921284c]
以下のように処理できる。
 fetch("URL", {method, headers, body}).then(...

-const method = "POST";
-const headers =
--POST
 {
   'Accept': 'application/json',
   'Content-Type': 'application/x-www-form-urlencoded;'
 };
--JOSN-RPC
 {
   'Accept': 'application/json',
   'Content-Type': 'application/json'
 };

-const body
--POST
 = "xxx=XXX&yyy=YYY&zzz=ZZZ"

--JOSN-RPC
 = JSON.stringify({xxx:XXX, yyy: YYY, zzz: ZZZ}) ;

**参考 [#k99e88ef]

***Styleの指定方法 [#d711455b]
-今からはじめるReact.js〜スタイルの適用〜~
https://qiita.com/kuniken/items/b06de893c22f33499a22
-Reactのコンポーネントのスタイリングをどうやるか~
https://qiita.com/lightnet328/items/218eb1c4a347302cc340
-javascript - Adding inline styles to react - Stack Overflow~
https://stackoverflow.com/questions/31972552/adding-inline-styles-to-react

***Controlled Component on Form [#n3433193]
-React.jsでFormを扱う~
https://qiita.com/koba04/items/40cc217ab925ef651113
-ReactのsetStateで配列の一部を変更する~
https://qiita.com/mr_04v/items/1f0f74efc3060cb25ecf

-select
--pure react で `<select>` を使う~
https://qiita.com/noobar/items/44046425daae9771cc8d
--javascript - ReactJS: Select with default value from props without onChange event? - Stack Overflow~
https://stackoverflow.com/questions/43749761/reactjs-select-with-default-value-from-props-without-onchange-event

***Each child in an array should have a unique "key" prop. [#pa274fbb]
-React.jsの地味だけど重要なkeyについて~
https://qiita.com/koba04/items/a4d23245d246c53cd49d
-React.js で map() を使ってみる~
https://qiita.com/Ryosuke-Hujisawa/items/24bd369e0d614c1424a4

***fetch APIでPOST or JOSN-RPC [#dbbb1c5a]
-fetch API でも POST したい！~
https://qiita.com/legokichi/items/801e88462eb5c84af97d

*手順２ [#j40c0c29]
https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/SPA/React/redux_template

をベースにしてASP.NETのCRUD処理を実装する。

**振返り [#s4157527]
-そもそも[[Redux]]ってなんだっけ？
>[[Actions>Redux#k776a8d8]] -> [[Reducers>Redux#g0c704a9]] -> [[Store>Redux#f2fe7ee5]]化

-段取り
--[[stateのprop化>#sbcf4c6a]]
--[[イベントのActions化>#o911f67e]]
--[[合わせて、Reducers、Storeを実装。>#ae448bac]]

**ポイント [#mfd9f332]

***stateのprop化 [#sbcf4c6a]
[[Component>React#m9350bfc]]のstateを、~
[[Container>Redux#h4b38b3d]]側でmapStateToPropsすることでprop化する。

***イベントの[[Actions>Redux#k776a8d8]]化 [#o911f67e]
-イベントを[[Actions>Redux#k776a8d8]]に定義する。
-[[Container>Redux#h4b38b3d]]側でmapDispatchToPropsして、~
[[Component>React#m9350bfc]]から[[Actions>Redux#k776a8d8]]を呼び出せるようにする。

***合わせて、[[Reducers>Redux#g0c704a9]]、[[Store>Redux#f2fe7ee5]]を実装 [#ae448bac]
-[[Reducers>Redux#g0c704a9]]を[[Store>Redux#f2fe7ee5]]で束ねる。
-[[Reducers>Redux#g0c704a9]]に、initialStateを定義して、~
各処理でpropsを更新する処理を実装する。

***TextBoxの双方向バインド [#p4b1fe35]
双方向バインドを行う場合、input type="text" の onChange時を[[Redux]]化する必要がある。

*手順３ [#w1e983d7]
以下のレイアウト崩れの解消を行う。

-新設されたFrontendTemplateリポジトリの紹介 - OSSコンソーシアム~
https://www.osscons.jp/joex3y5gs-537/

色々調べてみると、

-単にJSXがHTML化されたときに、~
HTMLとしてlayout崩れていたダケだった。

-RenderでJSXを返しているので、~
コンポーネント化のデメリットとして見通しが悪くはある。

*[[次の手順へ（4thステップ）>Reactの4thステップ]] [#o87cc9c1]
Reactのサード・ステップ の変更点
