Reactの5thステップ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[React]] -> [[Redux]]
--[[Reactのファースト・ステップ]]
--[[Reactのセカンド・ステップ]]
--[[Reactのサード・ステップ]]
--[[Reactの4thステップ]]
--Reactの5thステップ
*目次 [#j933814f]
#contents
*概要 [#eb6c860a]
より高度なトピックにチャレンジ。
*手順１ [#h17209c3]
-OAuth2の[[Resource Server>Reactのファースト・ステップ#d5...
-また、create-react-appの「http://localhost:3000」でもな...
-任意のWeb/APサーバ（OAuth2のClient）でReactをホストさせ...
※ [[PKCE(Authorization Code Grant Flow with PKCE)>https:/...
**共通 [#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フレームワーク...
**その他 [#y9db474d]
***[[ASP.NET Core>ASP.NET Coreのインストールとデプロイ]] ...
-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-appl...
***ASP.NET Core [#w5e930a9]
-【Windows/Mac】ASP.NET Core で HTML ファイルを表示する -...
https://qiita.com/t-koyama/items/61a867234bb41d7c5055
***Express [#ca583985]
-脱create-react-app ~ 真面目に express × react 環境を構築...
https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7a...
*手順２ [#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のファースト...
未定
***[[ファースト・ステップの手順３を移植>Reactのファースト...
未定
**参考 [#ccc8987d]
...
*参考 [#q469d714]
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-戻る
--[[React]] -> [[Redux]]
--[[Reactのファースト・ステップ]]
--[[Reactのセカンド・ステップ]]
--[[Reactのサード・ステップ]]
--[[Reactの4thステップ]]
--Reactの5thステップ
*目次 [#j933814f]
#contents
*概要 [#eb6c860a]
より高度なトピックにチャレンジ。
*手順１ [#h17209c3]
-OAuth2の[[Resource Server>Reactのファースト・ステップ#d5...
-また、create-react-appの「http://localhost:3000」でもな...
-任意のWeb/APサーバ（OAuth2のClient）でReactをホストさせ...
※ [[PKCE(Authorization Code Grant Flow with PKCE)>https:/...
**共通 [#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フレームワーク...
**その他 [#y9db474d]
***[[ASP.NET Core>ASP.NET Coreのインストールとデプロイ]] ...
-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-appl...
***ASP.NET Core [#w5e930a9]
-【Windows/Mac】ASP.NET Core で HTML ファイルを表示する -...
https://qiita.com/t-koyama/items/61a867234bb41d7c5055
***Express [#ca583985]
-脱create-react-app ~ 真面目に express × react 環境を構築...
https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7a...
*手順２ [#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のファースト...
未定
***[[ファースト・ステップの手順３を移植>Reactのファースト...
未定
**参考 [#ccc8987d]
...
*参考 [#q469d714]
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
