Reactのサード・ステップ

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

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

目次 †

概要 †

• 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の指定方法 †

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

1. Classによるスタイリング
   JSXではclassが予約語となっているためclassName 属性を使用する。
   　
2. インラインのスタイリング
   
   • 例１

     return (
       <button className="btn btn-default" style={{color: "red"}}/>
     );

   • 例２

     var btnstyle = {
       color: "red"
     };
     return (
       <button className="btn btn-default" style={btnstyle}/>
     );

3. CSS Modules
4. 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

Controlled Component on Form †

• 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. †

• 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 †

• fetch API でも POST したい！
  https://qiita.com/legokichi/items/801e88462eb5c84af97d

手順２ †

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

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

振返り †

• そもそもReduxってなんだっけ？

  Actions -> Reducers -> Store化

• 段取り
  • stateのprop化
  • イベントの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/

色々調べてみると、

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

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