Reactのサード・ステップのバックアップ(No.9)

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る

目次 †

↑

概要 †

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

↑

手順１ †

https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/SPA/React/react_template

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

↑

ポイント †

↑

Styleの指定方法 †

以下があるが、基本は１、２辺りを使う。

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 †

stateによって値を管理するComponent。
textもdrop downも、この方法に従う。
value、defaultValue、onChangeを設定する。
- value: stateの値
- defaultValue: （初期化した）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 †

以下のように処理できる。

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}) ;

↑

参考 †

↑

Styleの指定方法 †

今からはじめる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

↑

手順２ †

https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/SPA/React/redux_template

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

↑

振返り †

そもそもReduxってなんだっけ？
Actions -> Reducers -> Store化

段取り

↑

ポイント †

↑

stateのprop化 †

Componentのstateを、
Container側でmapStateToProps?することでprop化する。

↑

イベントのActions化 †

イベントをActionsに定義する。
Container側でmapDispatchToProps?して、ComponentからActionsを呼び出せるようにする。

↑

合わせて、Reducers、Storeを実装 †

ReducersをStoreで束ねる。
Reducersに、initialStateを定義して、
各処理でpropsを更新する処理を実装する。

↑

TextBox?の双方向バインド †

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

↑

手順３ †

以下のレイアウト崩れの解消を行う。

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

↑

手順４ †

手順１のコンポーネント分割を行う。
多分、サブ・コンポーネント化すればイケると思う。

↑

手順５ †

手順２のコンポーネント分割を行う。
多分、サブ・コンポーネント化すればイケると思う。

↑

参考 †

正真正銘のReactだけの不純物なしでReact入門

React/Redux約三年間書き続けたので知見を共有します | Enigmo Life

SPA フルリニューアル計画における技術選定や設計思想（2019年2月版） - 30歳からのプログラミング

React 副作用分割パターン - mizdra

↑

Reactのファースト・ステップ †

↑

Reactのサード・ステップ のバックアップ(No.9)

目次 †

概要 †

手順１ †

ポイント †

Styleの指定方法 †

Controlled Component on Form †

Each child in an array should have a unique "key" prop. †

fetch APIでPOST or JOSN-RPC †

参考 †

Styleの指定方法 †

Controlled Component on Form †

Each child in an array should have a unique "key" prop. †

fetch APIでPOST or JOSN-RPC †

手順２ †

振返り †

ポイント †

stateのprop化 †

イベントのActions化 †

合わせて、Reducers、Storeを実装 †

TextBox?の双方向バインド †

手順３ †

手順４ †

手順５ †

参考 †

Reactのファースト・ステップ †

Reactのセカンド・ステップ †

Reactのサード・ステップのバックアップ(No.9)