Reactの5thステップ

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

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

目次 †

概要 †

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

手順１ †

• OAuth2のResource Serverではなく、

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

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

※ PKCE(Authorization Code Grant Flow with PKCE)するのに必要になるので。

共通 †

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として動作する。 †

その他 †

ASP.NET Core †

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

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なっている。...で？

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

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

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

参考 †

参考 †