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

  • フッタ
    @section scripts {
        <script src="~/dist/main.js" asp-append-version="true"></script>
    }
  • 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>;

表示

  • 初期表示時の描画
  • 以降の描画(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でroutesReactRouter?)に定義したコンテンツをロードする。

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を判定して描画を変えている。
  • true:Loading...の表示
    <p><em>Loading...</em></p>
  • false:
    renderForecastsTable?メソッドが返したリストの内容。

参考

Visual Studio CodeによるSPA開発

.NET 開発基盤部会 Wiki


Tags: :.NET開発, :.NET Core, :ASP.NET, :ASP.NET Web API, :ASP.NET SPA


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-05-15 (火) 11:54:58 (7d)