- 追加された行はこの色です。
- 削除された行はこの色です。
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>React]]
*目次 [#r1844b11]
#contents
*概要 [#fce4a1c3]
create-react-appを使用した、[[React]] の step by step。
このあたりを確認しつつ、下記ステップを進める。
-[[React]]
-[[参考>#xf094997]]
*手順1 [#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開発サーバが起動する。
*手順2 [#n908d0bb]
**概要 [#w1a56e26]
-「[[基本的な事項>React#b58a8b20]]」
-「[[データおよびイベント連携>React#n8b8bac0]]」
を考慮し、以下のように実装する。
**対象 [#k823ab14]
[[手順1>#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
*手順3 [#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で生成した土台に移行
-様々なエッセンスが移行される。
**[[Express]]サーバの準備 [#of9c8e5e]
他のSPAアプリケーションからも利用するので、別フォルダに準備すると良い。
***[[Expressサーバをインストール>Express#lf3a3e8d]] [#d3eab285]
***[[JSONを返すExpressサーバを準備>Express#dda1563f]] [#ad763391]
**プロジェクト生成 [#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
***[[React側>#m84439c8]] [#h1148d2e]
SPAアプリケーションの起動
>npm start
**サンプル [#g96aafcd]
-https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/Express
-%%https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/Express %% (ASP.NETに移行したので削除された)
-https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/SPA/React/react_template
*手順4 [#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]
*[[次の手順(セカンド・ステップ)>Reactのセカンド・ステップ]] [#o818e74e]
*参考 [#xf094997]
**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