「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
https://github.com/OpenTouryoProject/SampleProgram/tree/SpaTemplate/Template/SPATemplate/ReactTemplate
スタック †
Node.js、React、TypeScript、webpackからなる。
JSX †
- JSXはJSの拡張言語で、React 要素を簡便な形式で作成する文法がある。
- Razor的(制御構文とXMLマークアップの混在)。
- 仮想DOMをXMLマークアップで扱う。
- このXMLマークアップは、標準のHTML5 + 拡張属性。
- 拡張子
- 本来はJSXの*.jsx。
- ASP.NET CoreのテンプレートではTypeScriptを併用しているため、*.tsx。
webpack †
- *.tsxのimportをwebpackが処理。
- JSXをTypeScript ---> JSX ---> JSに変換。
詳細 †
Index.cshtml(土台) †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/Views/Home/Index.cshtml
boot.tsx(EntryPoint?) †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/boot.tsx
「Index.cshtml(土台)」の<div id="react-app">に、routesのコンテンツをロードする。
import †
Node.jsのモジュールのインポート
- CSS
import './css/site.css';
renderApp †
- ReactDOM.renderメソッドを使用して、document.getElementById?('react-app')で
Index.cshtmlの <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の紐付け) †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/routes.tsx
概要 †
表示 †
- 以降の描画(URLに依存)
- <Route exact path='/' component={ Home } />(Home.tsx、exact は初期表示)
- <Route path='/counter' component={ Counter } />(Counter.tsx)
- <Route path='/fetchdata' component={ FetchData? } />(FetchData.tsx)
各コンポーネント †
Layout.tsx †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/components/Layout.tsx
- 静的なレイアウト用のHTMLを返す"public render() {"だけ実装される。
- 初期表示時の描画
- <NavMenu?/> → NavMenu.tsx
- { this.props.children } → this.props.childrenでroutes(ReactRouter?)に定義したコンテンツをロードする。
NavMenu?.tsx †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/components/NavMenu.tsx
- ナビゲーション用の静的なHTMLを返す"public render() {"だけ実装される。
- <Link>, <NavLink?>コンポーネントを使用している。
Home .tsx †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/components/Home.tsx
- ホーム画面用の静的なHTMLを返す"public render() {"だけ実装される。
Counter.tsx †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/ReactTemplate/ClientApp/components/Counter.tsx
カウントアップ処理のテスト画面のHTMLを返す。
- constructor() {
オブザーバーがconstructorで初期化したthis.stateを監視して再描画。
- public render() {
- onClickイベントはJSXで書いてある。ここで、incrementCounterメソッドを呼び出す。
- incrementCounterメソッドがthis.setStateを呼びthis.stateを更新すると、再描画される。
FetchData?.tsx †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/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を判定して描画を変えている。
- false:
renderForecastsTable?メソッドが返したリストの内容。
参考 †
.NET 開発基盤部会 Wiki †
Tags: :.NET開発, :.NET Core, :ASP.NET, :ASP.NET Web API, :ASP.NET SPA