![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -戻る --[[React]] -> [[Redux]] -戻る（[[React]] -> [[Redux]]） --[[Reactのファースト・ステップ]] --[[Reactのセカンド・ステップ]] --Reactのサード・ステップ --[[Reactの4thステップ]] --[[Reactの5thステップ]] --...[[Reactのファースト・ステップ２]] *目次 [#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を返しているので、~ コンポーネント化のデメリットとして見通しが悪くはある。
