Reactのサード・ステップ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[React]] -> [[Redux]]
--[[Reactのファースト・ステップ]]
--[[Reactのセカンド・ステップ]]
--Reactのサード・ステップ
--[[Reactの4thステップ]]
--[[Reactの5thステップ]]
*目次 [#x13aba1b]
#contents
*概要 [#x1069e65]
-create-react-appを使用した、[[React]] + [[Redux]]の step...
-[[ファースト・ステップ>Reactのファースト・ステップ]]、[[...
テンプレートをベースにしてASP.NETのCRUD処理を実装する。
*手順1 [#i946770b]
https://github.com/OpenTouryoProject/FrontendTemplates/tr...
をベースにしてASP.NETのCRUD処理を実装する。
**ポイント [#x266b8de]
***Styleの指定方法 [#qbd4bfc4]
以下があるが、基本は1、2辺りを使う。
+Classによるスタイリング~
JSXではclassが予約語となっているためclassName 属性を使用...
+インラインのスタイリング~
--例1
return (
<button className="btn btn-default" style={{color: "re...
);
--例2
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...
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 Overf...
https://stackoverflow.com/questions/31972552/adding-inlin...
***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 pr...
https://stackoverflow.com/questions/43749761/reactjs-sele...
***Each child in an array should have a unique "key" prop...
-React.jsの地味だけど重要なkeyについて~
https://qiita.com/koba04/items/a4d23245d246c53cd49d
-React.js で map() を使ってみる~
https://qiita.com/Ryosuke-Hujisawa/items/24bd369e0d614c14...
***fetch APIでPOST or JOSN-RPC [#dbbb1c5a]
-fetch API でも POST したい!~
https://qiita.com/legokichi/items/801e88462eb5c84af97d
*手順2 [#j40c0c29]
https://github.com/OpenTouryoProject/FrontendTemplates/tr...
をベースにしてASP.NETのCRUD処理を実装する。
**振返り [#s4157527]
-そもそも[[Redux]]ってなんだっけ?
>[[Actions>Redux#k776a8d8]] -> [[Reducers>Redux#g0c704a9]...
-段取り
--[[stateのprop化>#sbcf4c6a]]
--[[イベントのActions化>#o911f67e]]
--[[合わせて、Reducers、Storeを実装。>#ae448bac]]
**ポイント [#mfd9f332]
***stateのprop化 [#sbcf4c6a]
[[Component>React#m9350bfc]]のstateを、~
[[Container>Redux#h4b38b3d]]側でmapStateToPropsすることで...
***イベントの[[Actions>Redux#k776a8d8]]化 [#o911f67e]
-イベントを[[Actions>Redux#k776a8d8]]に定義する。
-[[Container>Redux#h4b38b3d]]側でmapDispatchToPropsして、~
[[Component>React#m9350bfc]]から[[Actions>Redux#k776a8d8]...
***合わせて、[[Reducers>Redux#g0c704a9]]、[[Store>Redux#f...
-[[Reducers>Redux#g0c704a9]]を[[Store>Redux#f2fe7ee5]]で...
-[[Reducers>Redux#g0c704a9]]に、initialStateを定義して、~
各処理でpropsを更新する処理を実装する。
***TextBoxの双方向バインド [#p4b1fe35]
双方向バインドを行う場合、input type="text" の onChange時...
*手順3 [#w1e983d7]
以下のレイアウト崩れの解消を行う。
-新設されたFrontendTemplateリポジトリの紹介 - OSSコンソー...
https://www.osscons.jp/joex3y5gs-537/
色々調べてみると、
-単にJSXがHTML化されたときに、~
HTMLとしてlayout崩れていたダケだった。
-RenderでJSXを返しているので、~
コンポーネント化のデメリットとして見通しが悪くはある。
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[React]] -> [[Redux]]
--[[Reactのファースト・ステップ]]
--[[Reactのセカンド・ステップ]]
--Reactのサード・ステップ
--[[Reactの4thステップ]]
--[[Reactの5thステップ]]
*目次 [#x13aba1b]
#contents
*概要 [#x1069e65]
-create-react-appを使用した、[[React]] + [[Redux]]の step...
-[[ファースト・ステップ>Reactのファースト・ステップ]]、[[...
テンプレートをベースにしてASP.NETのCRUD処理を実装する。
*手順1 [#i946770b]
https://github.com/OpenTouryoProject/FrontendTemplates/tr...
をベースにしてASP.NETのCRUD処理を実装する。
**ポイント [#x266b8de]
***Styleの指定方法 [#qbd4bfc4]
以下があるが、基本は1、2辺りを使う。
+Classによるスタイリング~
JSXではclassが予約語となっているためclassName 属性を使用...
+インラインのスタイリング~
--例1
return (
<button className="btn btn-default" style={{color: "re...
);
--例2
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...
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 Overf...
https://stackoverflow.com/questions/31972552/adding-inlin...
***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 pr...
https://stackoverflow.com/questions/43749761/reactjs-sele...
***Each child in an array should have a unique "key" prop...
-React.jsの地味だけど重要なkeyについて~
https://qiita.com/koba04/items/a4d23245d246c53cd49d
-React.js で map() を使ってみる~
https://qiita.com/Ryosuke-Hujisawa/items/24bd369e0d614c14...
***fetch APIでPOST or JOSN-RPC [#dbbb1c5a]
-fetch API でも POST したい!~
https://qiita.com/legokichi/items/801e88462eb5c84af97d
*手順2 [#j40c0c29]
https://github.com/OpenTouryoProject/FrontendTemplates/tr...
をベースにしてASP.NETのCRUD処理を実装する。
**振返り [#s4157527]
-そもそも[[Redux]]ってなんだっけ?
>[[Actions>Redux#k776a8d8]] -> [[Reducers>Redux#g0c704a9]...
-段取り
--[[stateのprop化>#sbcf4c6a]]
--[[イベントのActions化>#o911f67e]]
--[[合わせて、Reducers、Storeを実装。>#ae448bac]]
**ポイント [#mfd9f332]
***stateのprop化 [#sbcf4c6a]
[[Component>React#m9350bfc]]のstateを、~
[[Container>Redux#h4b38b3d]]側でmapStateToPropsすることで...
***イベントの[[Actions>Redux#k776a8d8]]化 [#o911f67e]
-イベントを[[Actions>Redux#k776a8d8]]に定義する。
-[[Container>Redux#h4b38b3d]]側でmapDispatchToPropsして、~
[[Component>React#m9350bfc]]から[[Actions>Redux#k776a8d8]...
***合わせて、[[Reducers>Redux#g0c704a9]]、[[Store>Redux#f...
-[[Reducers>Redux#g0c704a9]]を[[Store>Redux#f2fe7ee5]]で...
-[[Reducers>Redux#g0c704a9]]に、initialStateを定義して、~
各処理でpropsを更新する処理を実装する。
***TextBoxの双方向バインド [#p4b1fe35]
双方向バインドを行う場合、input type="text" の onChange時...
*手順3 [#w1e983d7]
以下のレイアウト崩れの解消を行う。
-新設されたFrontendTemplateリポジトリの紹介 - OSSコンソー...
https://www.osscons.jp/joex3y5gs-537/
色々調べてみると、
-単にJSXがHTML化されたときに、~
HTMLとしてlayout崩れていたダケだった。
-RenderでJSXを返しているので、~
コンポーネント化のデメリットとして見通しが悪くはある。
ページ名: