DNET_React5thStep

Reactの5thステップ

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

概要

より高度なトピックにチャレンジ。

手順１

• OAuth2の Resource Server（Reactのファースト・ステップの「サーバの準備」の該当節を参照）ではなく、

• また、create-react-appの「http://localhost:3000」でもなく、

• 任意のWeb/APサーバ（OAuth2のClient）でReactをホストさせる。

※ PKCE（Authorization Code Grant Flow with PKCE）（OAuth 2.0 for Browser-Based Appsの該当節を参照）するのに必要になるので。

共通（手順１）

create-react-app

>create-react-app hoge

npm start

以下の方法では、3000番でのセルフホストとなる。

>cd hoge
>npm start

npm run build

• 以下を実行すると、buildフォルダに出力される。

  >npm run build
  

• この一式をWebサイトに乗せれば、
  index.html起点のSPAとして動作する。

IIS

IISマネージャーから新規サイトを作成

この際のwwwroot相当を上記のbuildフォルダに設定

必要に応じてアクセス許可を追加

以下のアカウントに対するアクセス許可を追加する。

• IUSER
• IIS_IUSRS

index.htmlにアクセスすればSPAとして動作する。

SPAとして動作する。

その他（手順１）

ASP.NET Core

ASP.NET Coreのインストールとデプロイ

• wwwroot配下にbuildフォルダをデプロイすれば良い。
• dotnet new reactコマンドなどで作る必要は無い。

Express

Express

IIS、ASP.NET Coreと同じだが、
Expressの機能を何処まで実装するか？がポイントになりそう。

参考（手順１）

• React開発時には、APIサーバーとReactアプリサーバーを
  別にして、プロキシを使うというベスト・プラクティス
  https://applingo.tokyo/article/1568

IIS（参考）

• Deploy ReactJS Application on IIS
  https://www.c-sharpcorner.com/article/deploy-reactjs-application-on-iis/

ASP.NET Core（参考）

• 【Windows/Mac】ASP.NET Core で HTML ファイルを表示する - Qiita
  https://qiita.com/t-koyama/items/61a867234bb41d7c5055

Express（参考）

• 脱create-react-app ~ 真面目に express × react 環境を構築する ~ - Qiita
  https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7af2439

手順２

CRUDサンプルのHooks化に取り組む。

概要（手順２）

• stateの定義をuseStateに移植。
• ライフサイクルメソッドの処理をuseEffectsやReact.memoに移植。
• this使っている部分を消す。
• Redux部分はRedux Toolkit前提で書き換える。

create-react-app hooks-app

• 上記を見ても全然判らんので、
  最新のcreate-react-appをインストールして実行。

  npm install -g create-react-app
  create-react-app hooks-app
  

• App.jsを見ると確かに SFC（React の「状態を持たないコンポーネント（SFC）」の該当節を参照）になっている。

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    return (
      <div className="App">...</div>
    );
  }
  
  export default App;

• ...で？（Reactに関して、現状、力尽きた感。

ファースト・ステップの手順２を移植

未定（Reactのファースト・ステップの「手順２」を参照）

ファースト・ステップの手順３を移植

未定（Reactのファースト・ステップの「手順３」を参照）

移行メモ

• 元 Wiki の「手順２」の「参考」および末尾の「参考」は、いずれも本文が 「...」または空だったため除去した。
• 同名の見出し（「共通」「その他」「参考」「IIS」「ASP.NET Core」「Express」）が 複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
• マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの OAuth 2.0 for Browser-Based Apps に張り替えた。
• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

---

Tags: 移行, React, 5thステップ, IIS, ASP.NET Core, Express, Hooks, SPA, PKCE