「[[マイクロソフト系技術情報 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]]