「[[.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]
より高度なトピックにチャレンジ。
*手順1 [#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
*手順2 [#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に関して、現状、力尽きた感。
***[[ファースト・ステップの手順2を移植>Reactのファースト・ステップ#n908d0bb]] [#zd4e12a8]
未定
***[[ファースト・ステップの手順3を移植>Reactのファースト・ステップ#gf8301c9]] [#gfb30526]
未定
**参考 [#ccc8987d]
...
*参考 [#q469d714]