- 追加された行はこの色です。
- 削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>ASP.NET Core SPAテンプレート]]
* 目次 [#qe9f7c7e]
#contents
*概要 [#l323a090]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/
*構成 [#gd8d402e]
**フォルダ [#kb48d7f0]
ReactTemplate
├ ClientApp
| ├ components
| | ├ Counter.tsx
| | ├ FetchData.tsx
| | ├ Home.tsx
| | ├ Layout.tsx
| | └ NavMenu.tsx
| ├ css
| | └ site.css
| ├ boot.tsx
| └ routes.tsx
├ Controllers
| ├ HomeController.cs
| └ SampleDataController.cs
├ Views
| ├ Home
| | └ Index.cshtml
| ├ Shared
| | ├ _Layout.cshtml
| | └ Error.cshtml
| ├ _ViewImports.cshtml
| └ _ViewStart.cshtml
├ wwwroot
| └ favicon.ico
├ .gitignore
├ appsettings.Development.json
├ appsettings.json
├ npm-shrinkwrap.json
├ package.json
├ Program.cs
├ ReactTemplate.csproj
├ Startup.cs
├ tsconfig.json
├ webpack.config.js
└ webpack.config.vendor.js
**スタック [#n67dfdd6]
[[Node.js、React、TypeScript、webpack>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript]]からなる。
-[[Node.js>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Node.js]]
-[[React>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React]]
-[[TypeScript]]
-[[webpack>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?webpack]]
*詳細 [#r53540e6]
**Index.cshtml(土台) [#h9a5c536]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/Views/Home/Index.cshtml
-[[ASP.NET Core MVC]]部位
--ヘッダ
@{
ViewData["Title"] = "Home Page";
}
--フッタ
@section scripts {
<script src="~/dist/main.js" asp-append-version="true"></script>
}
--_Layout.cshtml~
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/Views/Shared/_Layout.cshtml
-React部位
<div id="react-app">Loading...</div>
**boot.tsx(EntryPoint) [#aedbff93]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/boot.tsx
「[[Index.cshtml(土台)>#h9a5c536]]」の「<div id="react-app">」の部分に、[[routes>#s21eef07]]のコンテンツをロードする。
***import [#odeaf6b7]
Node.jsのモジュールのインポート
-CSS
import './css/site.css';
-ホットロード~
AppContainerタグは、React拡張プロダクトの独自タグ。
{ AppContainer } from 'react-hot-loader';
-[[URLとDOMを仮想的に紐付け>#s21eef07]](HTML5 Historyを内部で使用)。~
BrowserRouterタグは、React拡張プロダクトの独自タグ。
{ BrowserRouter } from 'react-router-dom';
***renderApp [#k777332c]
-ReactDOM.renderメソッドを使用して、document.getElementById('react-app')で~
[[Index.cshtml>#h9a5c536]]の <div id="react-app"> 要素にAppContainerと、BrowserRouterを適用して、描画する。
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing
// configuration and injects the app into a DOM element.
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
ReactDOM.render(
<AppContainer>
<BrowserRouter children={ routes } basename={ baseUrl } />
</AppContainer>,
document.getElementById('react-app')
);
}
**routes.tsx(URLとDOMの紐付け) [#s21eef07]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/routes.tsx
***概要 [#j3ea603a]
-各種コンポーネントをインポート
-ReactRouterの定義
export const routes = <Layout>
<Route exact path='/' component={ Home } />
<Route path='/counter' component={ Counter } />
<Route path='/fetchdata' component={ FetchData } />
</Layout>;
***表示 [#ib5ad73b]
-初期表示時の描画
--<Layout></Layout> → [[Layout.tsx>#r81b2188]]
-以降の描画(URLに依存)
--<Route exact path='/' component={ Home } />([[Home.tsx>#u93fc661]]、exact は初期表示)~
--<Route path='/counter' component={ Counter } />([[Counter.tsx>#h24abebc]])
--<Route path='/fetchdata' component={ FetchData } />([[FetchData.tsx>#ae615a20]])
**各コンポーネント [#j6d5f51a]
***Layout.tsx [#r81b2188]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/components/Layout.tsx
-静的なレイアウト用のHTMLを返す"public render() {"だけ実装される。
-初期表示時の描画
--<NavMenu/> → [[NavMenu.tsx>#q8e7273b]]
--{ this.props.children } → this.props.childrenで[[routes>#s21eef07]](ReactRouter)に定義したコンテンツをロードする。
***NavMenu.tsx [#q8e7273b]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/components/NavMenu.tsx
-ナビゲーション用の静的なHTMLを返す"public render() {"だけ実装される。
-<Link>, <NavLink>コンポーネントを使用している。
***Home .tsx [#u93fc661]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/components/Home.tsx
-ホーム画面用の静的なHTMLを返す"public render() {"だけ実装される。
***Counter.tsx [#h24abebc]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/components/Counter.tsx
カウントアップ処理のテスト画面のHTMLを返す。
-constructor() {~
オブザーバーがconstructorで初期化したthis.stateを監視して再描画。
-public render() {
--onClickイベントは[[JSX>#e80902f8]]で書いてある。ここで、incrementCounterメソッドを呼び出す。
--incrementCounterメソッドがthis.setStateを呼びthis.stateを更新すると、再描画される。
***FetchData.tsx [#ae615a20]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/components/FetchData.tsx
WebAPIからデータを取得しリスト表示する処理のテスト画面のHTMLを返す。
-constructor() {
--constructorでthis.stateを初期化
--isomorphic-fetchによるfetchはWebAPI呼び出し。
--WebAPIから取得したデータをthis.setState
---forecasts: リストに表示するデータ
---loading: loading中か否か。
-public render() {~
this.state.loadingを判定して描画を変えている。
--true:Loading...の表示
<p><em>Loading...</em></p>
--false:~
renderForecastsTableメソッドが返したリストの内容。
*参考 [#n9d630d4]
**[[Visual Studio CodeによるSPA開発]] [#x23b6149]
**.NET 開発基盤部会 Wiki [#j1506b08]
***JavaScript - React [#ceafd1ff]
-JavaScript~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript
--React~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React
***[[この処理を、create-react-appで作成し、掘り下げを行う。>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React%E3%81%AE%E3%82%BB%E3%82%AB%E3%83%B3%E3%83%89%E3%83%BB%E3%82%B9%E3%83%86%E3%83%83%E3%83%97#s4a24c70]] [#sf6381c7]
----
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]]