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

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

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?） †

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';
```

ホットロード
AppContainer?タグは、React拡張プロダクトの独自タグ。
```
{ AppContainer } from 'react-hot-loader';
```

URLとDOMを仮想的に紐付け（HTML5 Historyを内部で使用）。
BrowserRouter?タグは、React拡張プロダクトの独自タグ。
```
{ BrowserRouter } from 'react-router-dom';　
```

↑

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

↑

概要 †

各種コンポーネントをインポート

ReactRouter?の定義

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={ FetchData } />
</Layout>;

↑

表示 †

初期表示時の描画
- <Layout></Layout>　→ Layout.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中か否か。