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

目次

概要

手順1

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

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

ポイント

Styleの指定方法

以下があるが、基本は1、2辺りを使う。

  1. Classによるスタイリング
    JSXではclassが予約語となっているためclassName 属性を使用する。
     
  2. インラインのスタイリング
    • 例1
      return (
        <button className="btn btn-default" style={{color: "red"}}/>
      );
    • 例2
      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の指定方法

Controlled Component on Form

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

fetch APIでPOST or JOSN-RPC

手順2

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

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

振返り

そもそもReduxってなんだっけ?

ポイント

stateのprop化

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

イベントのActions

合わせて、ReducersStoreを実装

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

TextBox?の双方向バインド

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

手順3

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

手順4

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

参考

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

Reactのセカンド・ステップ


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-09-28 (金) 10:11:29 (17d)