React の step by step 的なのバックアップ(No.3) - .NET 開発基盤部会 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

バックアップ一覧
ソースを表示
React の step by step 的なは削除されています。
- 1 (2018-06-07 (木) 11:04:01)
- 2 (2018-06-07 (木) 12:50:13)
- 3 (2018-06-07 (木) 14:47:17)
- 4 (2018-06-12 (火) 13:29:51)
- 5 (2018-06-12 (火) 15:10:27)
- 6 (2018-06-12 (火) 18:25:29)
- 7 (2018-06-12 (火) 22:19:25)
- 8 (2018-06-13 (水) 12:01:49)

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

戻る

目次 †

概要 †

1stステップ †

インストール †

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

構成

react-app/
  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg

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

実行 †

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

サンプルを実行する
（サンプルのルート・ディレクトリで以下コマンドを実行）。
```
npm start
```

npm start（ ≒ npm run-script start）で、
package.jsonの"start": "react-scripts start"で、
webpack開発サーバーが起動する。

2ndステップ †

サンプルの実装 †

下記の、

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

を考慮し、

以下のように実装する。

App.jsを書換 †

https://github.com/OpenTouryoProject/SampleProgram/blob/master/Template/SPATemplate/react_app/src/App.js

Menu.jsを追加 †

https://github.com/OpenTouryoProject/SampleProgram/blob/master/Template/SPATemplate/react_app/src/Menu.js

3rdステップ †

ココに書いた、移行を実施する。
様々なエッセンスが移行される。

プロジェクト生成 †

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

create-react-app react-template

移植の開始 †

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
- NavMenu?.js
- Home.js
- Counter.js
- FetchData?.js

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 †

変更不要。