Skip to content

DNET_ReactThirdStep

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

Reactのサード・ステップ

概要

手順１

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 JSON-RPC

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

fetch("URL", {method, headers, body}).then(...

  • const method = "POST";

  • const headers =

    • POST

      {
  'Accept': 'application/json',
  'Content-Type': 'application/x-www-form-urlencoded;'
};

    • JSON-RPC

      {
  'Accept': 'application/json',
  'Content-Type': 'application/json'
};

  • const body

    • POST

      = "xxx=XXX&yyy=YYY&zzz=ZZZ"

    • JSON-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 JSON-RPC（参考）

手順２

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

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

振返り

ポイント（手順２）

stateのprop化

React の Component（React の「コンポーネント指向」の該当節を参照）のstateを、
Redux の Container（Redux の「View」の該当節を参照）側でmapStateToPropsすることでprop化する。

イベントのActions化

  • イベントをActions（Redux の「Actions」の該当節を参照）に定義する。
  • Container（Redux の「View」の該当節を参照）側でmapDispatchToPropsして、
    Component（React の「コンポーネント指向」の該当節を参照）からActionsを呼び出せるようにする。

合わせて、Reducers、Storeを実装

  • Reducersを Store で束ねる（いずれも Redux の「ドメイン」の該当節を参照）。
  • Reducersに、initialStateを定義して、
    各処理でpropsを更新する処理を実装する。

TextBoxの双方向バインド

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

手順３

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

色々調べてみると、

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

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

移行メモ

  • 元 Wiki の「JOSN-RPC」は「JSON-RPC」の誤記のため修正した。
  • 同名の見出し（「ポイント」「参考」および参考側の各項目名）が複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, React, Redux, サード・ステップ, CRUD, fetch API, JSON-RPC, Controlled Component

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

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally