Reactの5thステップのバックアップ(No.10) - .NET 開発基盤部会 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
Reactの5thステップへ行く。
- 1 (2019-10-26 (土) 19:15:39)
- 2 (2019-10-26 (土) 19:15:53)
- 3 (2019-11-21 (木) 15:39:59)
- 4 (2019-11-21 (木) 20:09:06)
- 5 (2019-11-26 (火) 10:53:40)
- 6 (2019-12-27 (金) 20:24:47)
- 7 (2020-01-29 (水) 16:12:57)
- 8 (2020-01-30 (木) 11:59:31)
- 9 (2020-01-30 (木) 13:39:09)
- 10 (2020-04-22 (水) 15:11:02)

「.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;

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

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

参考 †

参考 †