Reactのファースト・ステップのバックアップの現在との差分(No.13)

追加された行はこの色です。
削除された行はこの色です。
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-戻る
--[[React]] -> [[Redux]]
--Reactのファースト・ステップ
--[[Reactのセカンド・ステップ]]
--[[Reactのサード・ステップ]]
--[[Reactの4thステップ]]
--[[Reactの5thステップ]]

*目次 [#r1844b11]
#contents

*概要 [#fce4a1c3]
create-react-appを使用した、[[React]] の step by step。

このあたりを確認しつつ、下記ステップを進める。
-[[React]]
-[[参考>#xf094997]]

*手順１ [#h9bbee97]

**インストール [#qf326646]
-[[npm]]（[[Node.js>JavaScript#q9fc6e24]]）をインストールしておく。

-create-react-app([[npm]] ,etc.の[[Node.js>JavaScript#q9fc6e24]]系のツール)のインストール
 npm install -g create-react-app

-以下は、既定の構成
|#|カテゴリ|ツール/言語|備考|h
|1|開発言語|EcmaScript6|-|
|2|トランスパイラ|Babel|-|
|3|パッケージング|Webpack|・webpack-dev-server&br;・html-webpack-plugin&br;・style-loader|
|4|コード解析|ESLint|-|
|5|テストツール|Jest|-|

**サンプルの生成と実行 [#of5d01d4]

***生成 [#g4b33615]
react-appと言う名称でサンプルを生成する。
 create-react-app react-app

***構成 [#m72c4465]
create-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

***実行 [#m84439c8]
-Gitなどから復元した場合は、事前に、~
[[npmのインストール・コマンド>npm#ta17153d]]で~
node_modulesを復元する必要がある。
 npm i

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

*手順２ [#n908d0bb]

**概要 [#w1a56e26]
-「[[基本的な事項>React#b58a8b20]]」
-「[[データおよびイベント連携>React#n8b8bac0]]」

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

**対象 [#k823ab14]
[[手順１>#h9bbee97]]で生成したサンプルに追加実装を行う。

**サンプルの実装 [#v725d5c8]

***App.jsを書換 [#o873f55e]
https://github.com/OpenTouryoProject/SampleProgram/blob/master/Template/SPATemplate/react_app/src/App.js

***Menu.jsを追加 [#g17a7112]
-https://github.com/OpenTouryoProject/SampleProgram/blob/master/Template/SPATemplate/react_app/src/Menu1.js
-https://github.com/OpenTouryoProject/SampleProgram/blob/master/Template/SPATemplate/react_app/src/Menu2.js

*手順３ [#gf8301c9]
-[[ココに書いた>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20SPA%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88#o6a42b95]]、移行を実施する。
-[[ASP.NET Core React.jsテンプレート>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88]] -> create-react-appで生成した土台に移行
-様々なエッセンスが移行される。

**サーバの準備 [#d5b086af]

***[[Express]] [#of9c8e5e]
[[Express]]で実装する場合、他のSPAアプリケーションからも利用するので、別フォルダに準備すると良い。
[[Express]]で実装する場合、他の[[SPA>(MV*) UIフレームワーク]]アプリケーションからも利用するので、別フォルダに準備すると良い。

-[[Expressサーバをインストール>Express#lf3a3e8d]]
-[[JSONを返すExpressサーバを準備>Express#dda1563f]]

***[[ASP.NET Core>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core]] [#o68564e4]
[[ASP.NET Core>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core]]で実装する場合、以下を流用するなどする。
-%%https://github.com/OpenTouryoProject/OpenTouryoTemplates/tree/master/root_VS2017/programs/CS/Samples/WS_sample/ASPNETWebService %%
-%%https://github.com/OpenTouryoProject/OpenTouryoTemplates/tree/master/root_VS2017/programs/CS/Samples4NetCore/Backend/ASPNETWebService %%
-https://github.com/OpenTouryoProject/OpenTouryoTemplates/tree/master/root_VS2019/programs/CS/Samples4NetCore/Backend/ASPNETWebService

**プロジェクト生成 [#d393f40a]

***[[ASP.NET Core React.jsテンプレート>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88]] [#u79ba2b4]

***create-react-app [#i774b769]
create-react-appなので大文字はNG
 create-react-app react-template

**比較 [#n04b9302]

***Component [#o26444fd]
-[[ASP.NET Core React.jsテンプレート>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88#gd8d402e]]~
componentsフォルダに格納

-[[create-react-app>#q13174a3]]~
srcフォルダに格納

***CSS [#t0d1feed]
-[[ASP.NET Core React.jsテンプレート>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88#gd8d402e]]~
cssフォルダに格納

-[[create-react-app>#q13174a3]]~
srcフォルダに（componentsと同じフォルダに同じ名称で）格納

**移植の方針 [#n7ec86c5]

***Component [#i3bf9100]
componentsフォルダに格納

***CSS [#ne8bfb7e]
-共通のCSSはcssフォルダに格納
-個別のCSSはcomponentsと同じフォルダに同じ名称で格納

**移植の開始 [#n17a9dae]
-[[ReactTemplate>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88]] ---> [[react_template>#k664661e]]
-ルートから徐々に移行をしていく。

***package.json [#b17ef035]
必要そうなモジュールをインストールするように設定。
-バージョン番号なども関係するので一筋縄ではいかない。
-結局、[[ReactTemplate>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88]]を主にして置き換えた。

*** *.cshtml --- > index.html [#u82cda8e]
土台となる *.html ファイル

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

***boot.js ---> index.js [#qfed9d77]
土台から呼び出される *.js ファイル

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

-依存関係のコピー
--\ClientApp\css\site.css ---> \src\css\site.css
--\ClientApp\css\routes.js ---> \src\[[routes.js>#o47b3a50]]

***routes.js [#o47b3a50]
ルーティングを行う *.js ファイル

-依存関係のコピー~
\src\components
--[[Layout.js>#sedb235e]]
--[[NavMenu.js>#vdaaa411]]
--[[Home.js>#o9c9c0a1]]
--[[Counter.js>#b45634e2]]
--[[FetchData.js>#y963108b]]

***Layout.js [#sedb235e]
レイアウト部分を移植

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

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

***NavMenu.js [#vdaaa411]
冗長なコードを削除。

***Home.js [#o9c9c0a1]
冗長なコードを削除。

***Counter.js [#b45634e2]
変更不要。

***FetchData.js [#y963108b]
変更不要。

**実行 [#q12079c7]

***WebAPI側 [#kcbe48df]
-[[Express]]サーバを起動
 >node server/server.js

-若しくは、[[ASP.NET Core>#o68564e4]]を起動

***[[React側>#m84439c8]] [#h1148d2e]
SPAアプリケーションの起動
[[SPA>(MV*) UIフレームワーク]]アプリケーションの起動
 >npm start

**サンプル [#g96aafcd]
-https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/SPA/React/react_template
-上記サンプルは、サーバー・サイドに[[ASP.NET Core>#o68564e4]]を利用している。

*手順４ [#v9b02d5b]
ここでは、以降、難易度が上がるので、Visual Studio Codeでのデバッグ設定を行う。

**インストール [#jb1176bc]
Debugger for Chrome extensionをインストールする。

**デバッグ・ビューを表示 [#k64623e5]
Debug viewを表示。
-「Ctrl+Shift+D」押下
-若しくは左のデバッグ・マークを押下

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

***launch.jsonの設定 [#h2be04c3]
launch.jsonのconfigurationsセクションに以下の要素を追加する。

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

**デバッグ実行 [#d6771085]

***デバッグ実行の設定 [#p20cb4aa]
-Visual Studio的操作性で、~
ソース・コードにブレーク・ポイントを設定できる。

-console.logでデバッグ情報を出力できる。~
 console.log("XXX: " + JSON.stringify(state));

***デバッグ実行の開始 [#z954a6be]
-デバッグ実行の開始の開始前に、npm startを実行しておく。

-次いで、Debug viewで、[▶]（デバッグの開始）ボタンを~
DDLから「Launch Chrome against localhost」を~
選択した状態で押下してデバッグ実行を開始する。

***デバッグ実行の確認 [#d88add7d]
-ブレーク・ポイントでブレークする。
-デバッグ・コンソールにデバッグ情報が出力される。
#ref(Debug.png,left,nowrap,デバッグ実行,60%)

**参考 [#c993f874]
-React JavaScript Tutorial in VS Code~
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
-[react:day1] Reactをはじめます＆デバッグ環境も~
https://qiita.com/ozepon/items/d5659f068ed1408f3c17

*[[次の手順へ（セカンド・ステップ）>Reactのセカンド・ステップ]] [#o818e74e]

*参考 [#xf094997]
-[[正真正銘のReactだけの不純物なしでReact入門>https://sbfl.net/blog/2019/02/20/react-only-tutorial/]]

**React初心者のまとめ [#d69ec49b]

***基本編：1/3 [#b2d44822]
https://qiita.com/tomi_shinwatec/items/6563eacd88e63bda5de3

***基本編：2/3 [#lbf10e7a]
https://qiita.com/tomi_shinwatec/items/cdd319d8fce8bdb829d0

***基本編：3/3 [#u212d229]
https://qiita.com/tomi_shinwatec/items/975eceda3d07b152547c

**今からはじめるReact.js [#o7e07d7d]

***〜準備〜 [#s30af27e]
https://qiita.com/kuniken/items/19fccc27b8bfa8068d22

***〜初めてのコンポーネント〜 [#jf169fcc]
https://qiita.com/kuniken/items/963cb977dffd3e662e40

***〜コンポーネントをまとめる〜 [#a22418c9]
https://qiita.com/kuniken/items/c0f5ed06695ce52d4854

***〜スタイルの適用〜 [#nc15b3a9]
https://qiita.com/kuniken/items/b06de893c22f33499a22

***〜React ver0.14〜 [#s4ec261d]
https://qiita.com/kuniken/items/2fc5b782da5d302247ab

***〜propsとstate、それからrefs〜 [#w2e0857f]
https://qiita.com/kuniken/items/a22adda392ccc30011b1

***〜・・・〜 [#l9a666a6]
https://qiita.com/kuniken/items/・・・

***〜画面遷移〜 [#u0d6623a]
https://qiita.com/kuniken/items/89c8bbef3b71d2af662d

***〜Flux〜 [#y9a8bcc8]
https://qiita.com/kuniken/items/b532d4fa980b53fd6bd5

**0からreact習得記 まとめ [#q0b4412f]
https://qiita.com/ryo_t/items/67e319f8cc41c2d96eb9

***[DAY 01] [#iad67bf8]
ReactでHelloWorldとカードアプリ作成

***[DAY 02] [#q9af4963]
手軽にes2015を実行する為にreplツールを調査しました

***[DAY 03] [#hbfac017]
styled-componentsを使用してスタイリングを行う

***[DAY 04] [#n229efb2]
ES2015を覚えるならコレ！ES2015のおすすめ学習リソース一覧

***[DAY 05] [#l7b4ea20]
JavaScriptの関数を簡単にまとめる

***[DAY 06] [#w1c2d4a8]
JavaScriptの高階関数って何ですか？

***[DAY 07] [#g83855ee]
Reactでカウンターアプリを作る！

***[DAY 08] [#d87b34c7]
ReactのStateとPropsの違いについて

***[DAY 09] [#meefddfb]
Reactのコンポーネントをステートレスに！！！recomposeとは？

***[DAY 10] [#abc5383a]
recomposeを使って電卓アプリを作る！

***[DAY 11] [#x1704e0b]
React Storybookを使って開発効率を爆速に！！

***[DAY 12] [#n92d1fe0]
結局どれを使うのがいいの？Reactスターターキット比較

***[DAY 13] [#qc39333e]
Prettierで書いたコードを見やすく綺麗に！

***[DAY 14] [#db825228]
ダミーデータを簡単に生成するライブラリ、faker.jsを使ってみる

***[DAY 15] [#dc382c69]
Next.jsを使ってみる

**create-react-app [#hc02a15b]
-React初心者が環境構築でつまづかないためのCreate React Appの始め方 - WPJ~
https://www.webprofessional.jp/create-react-app/

-Create React AppでReactアプリを開発する : エキサイト公式　エンジニアブログ~
https://blog.excite.co.jp/exdev/25487209/

-npm run eject で create-react-app はアプリケーションの長寿を保証する - valid,invalid~
http://ohbarye.hatenablog.jp/entry/2016/11/20/141135

***Qiita [#x7759c71]

-Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する~
https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614

-Facebook 公式ツール Create React App を使って React 開発の初歩を学ぶチュートリアル~
https://qiita.com/kent_ocean/items/d429804b5ad0d7570ece

-create-react-app が裏で何をやっているか理解する~
https://qiita.com/naohikowatanabe/items/71a8bf477216ef56a5b7
Reactのファースト・ステップ のバックアップの現在との差分(No.13)

Reactのファースト・ステップのバックアップの現在との差分(No.13)
