「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †概要 †create-react-appを使用した、React の step by step。 このあたりを確認しつつ、下記ステップを進める。 手順1 †インストール †
サンプルの生成と実行 †生成 †react-appと言う名称でサンプルを生成する。 create-react-app react-app 構成 †create-react-appを使用した場合、configは隠蔽されているので、 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 実行 †
手順2 †概要 †
を考慮し、以下のように実装する。 対象 †手順1で生成したサンプルに追加実装を行う。 サンプルの実装 †App.jsを書換 †Menu.jsを追加 †
手順3 †
サーバの準備 †Express †Expressで実装する場合、他のSPAアプリケーションからも利用するので、別フォルダに準備すると良い。 ASP.NET Core †ASP.NET Coreで実装する場合、以下を流用するなどする。
プロジェクト生成 †ASP.NET Core React.jsテンプレート †create-react-app †create-react-appなので大文字はNG create-react-app react-template 比較 †Component †
CSS †
移植の方針 †Component †componentsフォルダに格納 CSS †
移植の開始 †
package.json †必要そうなモジュールをインストールするように設定。
*.cshtml --- > index.html †土台となる *.html ファイル
boot.js ---> index.js †土台から呼び出される *.js ファイル
routes.js †ルーティングを行う *.js ファイル
Layout.js †レイアウト部分を移植
NavMenu?.js †冗長なコードを削除。 Home.js †冗長なコードを削除。 Counter.js †変更不要。 FetchData?.js †変更不要。 実行 †WebAPI側 †
React側 †SPAアプリケーションの起動 >npm start サンプル †
手順4 †ここでは、以降、難易度が上がるので、Visual Studio Codeでのデバッグ設定を行う。 インストール †Debugger for Chrome extensionをインストールする。 デバッグ・ビューを表示 †Debug viewを表示。
歯車マークを押下 †Debug viewの歯車マークを押下してlaunch.jsonを新規作成する。 launch.jsonの設定 †launch.jsonのconfigurationsセクションに以下の要素を追加する。 { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } デバッグ実行 †デバッグ実行の設定 †
デバッグ実行の開始 †
デバッグ実行の確認 †
参考 †
参考 †React初心者のまとめ †基本編:1/3 †https://qiita.com/tomi_shinwatec/items/6563eacd88e63bda5de3 基本編:2/3 †https://qiita.com/tomi_shinwatec/items/cdd319d8fce8bdb829d0 基本編:3/3 †https://qiita.com/tomi_shinwatec/items/975eceda3d07b152547c 今からはじめるReact.js †〜準備〜 †https://qiita.com/kuniken/items/19fccc27b8bfa8068d22 〜初めてのコンポーネント〜 †https://qiita.com/kuniken/items/963cb977dffd3e662e40 〜コンポーネントをまとめる〜 †https://qiita.com/kuniken/items/c0f5ed06695ce52d4854 〜スタイルの適用〜 †https://qiita.com/kuniken/items/b06de893c22f33499a22 〜React ver0.14〜 †https://qiita.com/kuniken/items/2fc5b782da5d302247ab 〜propsとstate、それからrefs〜 †https://qiita.com/kuniken/items/a22adda392ccc30011b1 〜・・・〜 †https://qiita.com/kuniken/items/・・・ 〜画面遷移〜 †https://qiita.com/kuniken/items/89c8bbef3b71d2af662d 〜Flux〜 †https://qiita.com/kuniken/items/b532d4fa980b53fd6bd5 0からreact習得記 まとめ †https://qiita.com/ryo_t/items/67e319f8cc41c2d96eb9 [DAY 01] †ReactでHelloWorld?とカードアプリ作成 [DAY 02] †手軽にes2015を実行する為にreplツールを調査しました [DAY 03] †styled-componentsを使用してスタイリングを行う [DAY 04] †ES2015を覚えるならコレ!ES2015のおすすめ学習リソース一覧 [DAY 05] †JavaScriptの関数を簡単にまとめる [DAY 06] †JavaScriptの高階関数って何ですか? [DAY 07] †Reactでカウンターアプリを作る! [DAY 08] †ReactのStateとPropsの違いについて [DAY 09] †Reactのコンポーネントをステートレスに!!!recomposeとは? [DAY 10] †recomposeを使って電卓アプリを作る! [DAY 11] †React Storybookを使って開発効率を爆速に!! [DAY 12] †結局どれを使うのがいいの?Reactスターターキット比較 [DAY 13] †Prettierで書いたコードを見やすく綺麗に! [DAY 14] †ダミーデータを簡単に生成するライブラリ、faker.jsを使ってみる [DAY 15] †Next.jsを使ってみる create-react-app †
Qiita †
|