ASP.NET Core React.jsテンプレートのバックアップ差分(No.8)

追加された行はこの色です。
削除された行はこの色です。
「[[マイクロソフト系技術情報 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/SpaTemplate/Template/SPATemplate/ReactTemplate

**スタック [#n67dfdd6]
[[Node.js、React、TypeScript、webpack>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript]]からなる。

**JSX [#e80902f8]
-JSXはJSの拡張言語で、React 要素を簡便な形式で作成する文法がある。
--Razor的（制御構文とXMLマークアップの混在）。
--仮想DOMをXMLマークアップで扱う。
--このXMLマークアップは、標準のHTML5 + 拡張属性。

-拡張子
--本来はJSXの*.jsx。
--ASP.NET CoreのテンプレートではTypeScriptを併用しているため、*.tsx。

**webpack [#o6e19a04]
-*.tsxのimportをwebpackが処理。
-JSXをTypeScript ---> JSX ---> JSに変換。

*詳細 [#r53540e6]

**Index.cshtml（土台） [#h9a5c536]
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/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/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/Views/Shared/_Layout.cshtml

-React部位
 <div id="react-app">Loading...</div>

**boot.tsx（EntryPoint） [#aedbff93]
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/boot.tsx

「[[Index.cshtml（土台）>#h9a5c536]]」の<div id="react-app">に、[[routes>#s21eef07]]のコンテンツをロードする。
「[[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/blob/SpaTemplate/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/blob/SpaTemplate/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/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/components/NavMenu.tsx

-ナビゲーション用の静的なHTMLを返す"public render() {"だけ実装される。
-<Link>, <NavLink>コンポーネントを使用している。

***Home .tsx [#u93fc661]
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/components/Home.tsx

-ホーム画面用の静的なHTMLを返す"public render() {"だけ実装される。

***Counter.tsx [#h24abebc]
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/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/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/components/FetchData.tsx

WebAPIからデータを取得しリスト表示する処理のテスト画面のHTMLを返す。

-constructor() {
--constructorでthis.stateを初期化
--isomorphic-fetchによるはfetchはWebAPI呼び出し。
--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~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript
--React~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React

----
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]]
ASP.NET Core React.jsテンプレート のバックアップ差分(No.8)

ASP.NET Core React.jsテンプレートのバックアップ差分(No.8)
