「[[.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]] -[[参考>#q7983de8]] *手順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] サンプルを生成する。 create-react-app react-app ***構成 [#m72c4465] 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 -様々なエッセンスが移行される。 **プロジェクト生成 [#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>#yba6911c]] ***routes.js [#o47b3a50] ルーティングを行う *.js ファイル -依存関係のコピー~ \src\components --[[Layout.js>#kf777a49]] --[[NavMenu.js>#j676656f]] --[[Home.js>#pe557d0e]] --[[Counter.js>#bd2efd46]] --[[FetchData.js>#i29f7031]] ***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] 変更不要。 **[[Express]]サーバの準備 [#of9c8e5e] [[JSONを返すExpressサーバ>Express#dda1563f]]を準備する。 **実行 [#q12079c7] ***[[React側>#nd9d45b2]] [#h1148d2e] ***WebAPI側 [#kcbe48df] [[Express]]サーバを起動 node server/server.js **サンプル [#g96aafcd] https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/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的操作性で、ソース・コードにブレーク・ポイントを設定できる。 ***デバッグ実行の開始 [#z954a6be] Debug viewで、[▶](デバッグの開始)ボタンを~ DDLから「Launch Chrome against localhost」を~ 選択した状態で押下してデバッグ実行を開始する。 **参考 [#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初心者のまとめ [#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