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

「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る

目次 †

↑

概要 †

https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/

↑

構成 †

↑

フォルダ †

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

↑

スタック †

Node.js、React、TypeScript、webpackからなる。

↑

詳細 †

↑

Index.cshtml（土台） †

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

https://github.com/OpenTouryoProject/SampleProgram/tree/master/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/tree/master/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/tree/master/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/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/components/NavMenu.tsx

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

↑

Home .tsx †

https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactTemplate/ClientApp/components/Home.tsx

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

↑

Counter.tsx †

https://github.com/OpenTouryoProject/SampleProgram/tree/master/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/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?メソッドが返したリストの内容。

↑

参考 †

↑

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

目次 †

概要 †

構成 †

フォルダ †

スタック †

詳細 †

Index.cshtml（土台） †

boot.tsx（EntryPoint?） †

import †

renderApp †

routes.tsx（URLとDOMの紐付け） †

概要 †

表示 †

各コンポーネント †

Layout.tsx †

NavMenu?.tsx †

Home .tsx †

Counter.tsx †

FetchData?.tsx †

参考 †

Visual Studio CodeによるSPA開発 †

.NET 開発基盤部会 Wiki †

JavaScript - React †

この処理を、create-react-appで作成し、掘り下げを行う。 †

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