Reactのファースト・ステップのバックアップ(No.3)

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る

目次 †

目次
概要
手順１
- インストール
- サンプルの生成と実行
  - 生成
  - 構成
  - 実行
手順２
手順３
手順４
セカンド・ステップ
参考

↑

概要 †

create-react-appを使用した、React の step by step。

このあたりを確認しつつ、下記ステップを進める。

React
参考

↑

手順１ †

↑

インストール †

npm（Node.js）をインストールしておく。

create-react-app(npm ,etc.のNode.js系のツール)のインストール
```
npm install -g create-react-app
```

以下は、既定の構成

#	カテゴリ	ツール/言語	備考
1	開発言語	EcmaScript6	-
2	トランスパイラ	Babel	-
3	パッケージング	Webpack	・webpack-dev-server ・html-webpack-plugin ・style-loader
4	コード解析	ESLint	-
5	テストツール	Jest	-

↑

サンプルの生成と実行 †

↑

生成 †

サンプルを生成する。

create-react-app react-app

↑

構成 †

configは隠蔽されているので、
カスタマイズする必要がある場合、
npm run ejectでエクスポートできる。

react_app
 ├ public
 ｜  ├ favicon.ico
 ｜  ├ index.html
 ｜  └ manifest.json
 ├ src
 ｜  ├ App.css
 ｜  ├ App.js
 ｜  ├ App.test.js
 ｜  ├ index.css
 ｜  ├ index.js
 ｜  ├ logo.svg
 ｜  ├ Menu.js
 ｜  └ registerServiceWorker.js
 ├ .gitignore
 ├ package.json
 ├ package-lock.json
 └ README.md

↑

実行 †

Gitなどから復元した場合は、事前に、
npmのインストール・コマンドで
node_modulesを復元する必要がある。
```
npm i
```

サンプルを実行する
（サンプルのルート・ディレクトリで以下コマンドを実行）。
```
npm start
```
※ npm start（ ≒ npm run-script start）で、package.jsonの
"start": "react-scripts start"が実行され、webpack開発サーバが起動する。

↑

手順２ †

↑

概要 †

「基本的な事項」
「データおよびイベント連携」

を考慮し、以下のように実装する。

↑

対象 †

手順１で生成したサンプルに追加実装を行う。

↑

手順３ †

ココに書いた、移行を実施する。
ASP.NET Core React.jsテンプレート -> create-react-app
様々なエッセンスが移行される。

↑

プロジェクト生成 †

↑

ASP.NET Core React.jsテンプレート †

↑

create-react-app †

create-react-appなので大文字はNG

create-react-app react-template

↑

比較 †

↑

Component †

ASP.NET Core React.jsテンプレート
componentsフォルダに格納

create-react-app
srcフォルダに格納

↑

CSS †

ASP.NET Core React.jsテンプレート
cssフォルダに格納

create-react-app
srcフォルダに（componentsと同じフォルダに同じ名称で）格納

↑

移植の方針 †

↑

Component †

componentsフォルダに格納

↑

CSS †

共通のCSSはcssフォルダに格納
個別のCSSはcomponentsと同じフォルダに同じ名称で格納

↑

移植の開始 †

ReactTemplate ---> react_template
ルートから徐々に移行をしていく。

↑

package.json †

必要そうなモジュールをインストールするように設定。

バージョン番号なども関係するので一筋縄ではいかない。
結局、ReactTemplateを主にして置き換えた。

↑

*.cshtml --- > index.html †

土台となる *.html ファイル

\Views\Home\Index.cshtml
\Views\Shared\_Layout.cshtml
- --- > \public\index.html

↑

boot.js ---> index.js †

土台から呼び出される *.js ファイル

\ClientApp?\boot.js --- > \src\index.js

依存関係のコピー
- \ClientApp?\css\site.css ---> \src\css\site.css
- \ClientApp?\css\routes.js ---> \src\routes.js

↑

routes.js †

ルーティングを行う *.js ファイル

依存関係のコピー
\src\components

↑

Layout.js †

レイアウト部分を移植

\src\App.js --- > \src\components\Layout.js

依存関係のコピー
- \src\App.css --- > \src\components\Layout.css
- \src\logo.svg --- > \src\components\logo.svg

↑

NavMenu?.js †

冗長なコードを削除。

↑

Home.js †

冗長なコードを削除。

↑

Counter.js †

変更不要。

↑

FetchData?.js †

変更不要。

↑

Expressサーバの準備 †

JSONを返すExpressサーバを準備する。

↑

実行 †

↑

React側 †

↑

WebAPI側 †

Expressサーバを起動

node server/server.js

↑

サンプル †

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

↑

手順４ †

ここでは、以降、難易度が上がるので、
Visual Studio Codeでのデバッグ設定を行う。

↑

インストール †

Debugger for Chrome extensionをインストールする。

↑

デバッグ・ビューを表示 †

Debug viewを表示。

「Ctrl+Shift+D」押下
若しくは左のデバッグ・マークを押下

↑

歯車マークを押下 †

Debug viewの歯車マークを押下してlaunch.jsonを新規作成する。

↑

launch.jsonの設定 †

launch.jsonのconfigurationsセクションに以下の要素を追加する。

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

↑