「[[マイクロソフト系技術情報 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 <div id="react-app">Loading...</div> **boot.tsx(EntryPoint) [#aedbff93] https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/boot.tsx ***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]] --<NavMenu/> → [[NavMenu.tsx>#q8e7273b]] -以降の描画(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] 静的なレイアウト用のHTMLを返す"public render() {"だけ実装される。 ***NavMenu.tsx [#q8e7273b] https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/components/NavMenu.tsx -ナビゲーション用のHTMLを返す"public render() {"だけ実装される。 -データ・バインディング(タグ、コンポーネント名?) { this.props.children } → <Route ・・・ /> ***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 -オブザーバーがconstructorで初期化したthis.stateを監視して再描画。 -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 -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] -JavaScript - .NET 開発基盤部会 Wiki~ https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript ---- Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]]