.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処理を実装する。

振返り

ポイント

stateのprop化

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

イベントのActions

合わせて、ReducersStoreを実装

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

TextBox?の双方向バインド

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

手順3

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

色々調べてみると、

  • 単にJSXがHTML化されたときに、
    HTMLとしてlayout崩れていたダケだった。
  • RenderでJSXを返しているので、
    コンポーネント化のデメリットとして見通しが悪くはある。

次の手順へ(4thステップ)


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