Reactの5thステップの変更点

追加された行はこの色です。
削除された行はこの色です。
Reactの5thステップへ行く。
Reactの5thステップの差分を削除
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

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

*目次 [#j933814f]
#contents

*概要 [#eb6c860a]
より高度なトピックにチャレンジ。

*手順１ [#h17209c3]
-OAuth2の[[Resource Server>Reactのファースト・ステップ#d5b086af]]ではなく、

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

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

※ [[PKCE(Authorization Code Grant Flow with PKCE)>https://techinfoofmicrosofttech.osscons.jp/index.php?OAuth%202.0%20for%20Browser-Based%20Apps#c4bc526c]]するのに必要になるので。

**共通 [#wfd8974a]

***create-react-app [#r174a461]
 >create-react-app hoge

***npm start [#me65a945]
以下の方法では、3000番でのセルフホストとなる。
 >cd hoge
 >npm start

***npm run build [#ra5f127e]
-以下を実行すると、buildフォルダに出力される。
 >npm run build

-この一式をWebサイトに乗せれば、~
index.html起点の[[SPA>(MV*) UIフレームワーク]]として動作する。

**IIS [#o07a79b7]

***IISマネージャーから新規サイトを作成 [#mc06b95b]
この際のwwwroot相当を上記のbuildフォルダに設定

***必要に応じてアクセス許可を追加 [#a822d6f2]
以下のアカウントに対するアクセス許可を追加する。

-IUSER
-IIS_IUSRS

***index.htmlにアクセスすれば[[SPA>(MV*) UIフレームワーク]]として動作する。 [#g9f98950]

**その他 [#y9db474d]

***[[ASP.NET Core>ASP.NET Coreのインストールとデプロイ]] [#iaa39790]
-wwwroot配下にbuildフォルダをデプロイすれば良い。
-dotnet new reactコマンドなどで作る必要は無い。

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

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

***IIS [#ha993628]
-Deploy ReactJS Application on IIS~
https://www.c-sharpcorner.com/article/deploy-reactjs-application-on-iis/

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

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

*手順２ [#c1097143]
CRUDサンプルの[[Hooks]]化に取り組む。

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

**create-react-app hooks-app [#q7b12231]
-上記を見ても全然判らんので、~
最新のcreate-react-appをインストールして実行。
 npm install -g create-react-app
 create-react-app hooks-app

-App.jsを見ると確かに[[SFC>React#j9387807]]なっている。
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
   return (
     <div className="App">...</div>
   );
 }
 
 export default App;

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

***[[ファースト・ステップの手順２を移植>Reactのファースト・ステップ#n908d0bb]] [#zd4e12a8]
未定

***[[ファースト・ステップの手順３を移植>Reactのファースト・ステップ#gf8301c9]] [#gfb30526]
未定

**参考 [#ccc8987d]
...

*参考 [#q469d714]
Reactの5thステップ の変更点
