「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
create-react-appを使用した、React の step by step。
このあたりを確認しつつ、下記ステップを進める。
# | カテゴリ | ツール/言語 | 備考 |
1 | 開発言語 | EcmaScript6 | - |
2 | トランスパイラ | Babel | - |
3 | パッケージング | Webpack | ・webpack-dev-server ・html-webpack-plugin ・style-loader |
4 | コード解析 | ESLint | - |
5 | テストツール | Jest | - |
react-appと言う名称でサンプルを生成する。
create-react-app react-app
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
npm i
npm start※ npm start( ≒ npm run-script start)で、package.jsonの
を考慮し、以下のように実装する。
手順1で生成したサンプルに追加実装を行う。
他のSPAアプリケーションからも利用するので、別フォルダに準備すると良い。
以下を流用するなどする。
create-react-appなので大文字はNG
create-react-app react-template
componentsフォルダに格納
必要そうなモジュールをインストールするように設定。
土台となる *.html ファイル
土台から呼び出される *.js ファイル
ルーティングを行う *.js ファイル
レイアウト部分を移植
冗長なコードを削除。
冗長なコードを削除。
変更不要。
変更不要。
>node server/server.js
SPAアプリケーションの起動
>npm start
ここでは、以降、難易度が上がるので、Visual Studio Codeでのデバッグ設定を行う。
Debugger for Chrome extensionをインストールする。
Debug viewを表示。
Debug viewの歯車マークを押下してlaunch.jsonを新規作成する。
launch.jsonのconfigurationsセクションに以下の要素を追加する。
{ "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }
console.log("XXX: " + JSON.stringify(state));
https://qiita.com/tomi_shinwatec/items/6563eacd88e63bda5de3
https://qiita.com/tomi_shinwatec/items/cdd319d8fce8bdb829d0
https://qiita.com/tomi_shinwatec/items/975eceda3d07b152547c
https://qiita.com/kuniken/items/19fccc27b8bfa8068d22
https://qiita.com/kuniken/items/963cb977dffd3e662e40
https://qiita.com/kuniken/items/c0f5ed06695ce52d4854
https://qiita.com/kuniken/items/b06de893c22f33499a22
https://qiita.com/kuniken/items/2fc5b782da5d302247ab
https://qiita.com/kuniken/items/a22adda392ccc30011b1
https://qiita.com/kuniken/items/・・・
https://qiita.com/kuniken/items/89c8bbef3b71d2af662d
https://qiita.com/kuniken/items/b532d4fa980b53fd6bd5
https://qiita.com/ryo_t/items/67e319f8cc41c2d96eb9
ReactでHelloWorld?とカードアプリ作成
手軽にes2015を実行する為にreplツールを調査しました
styled-componentsを使用してスタイリングを行う
ES2015を覚えるならコレ!ES2015のおすすめ学習リソース一覧
JavaScriptの関数を簡単にまとめる
JavaScriptの高階関数って何ですか?
Reactでカウンターアプリを作る!
ReactのStateとPropsの違いについて
Reactのコンポーネントをステートレスに!!!recomposeとは?
recomposeを使って電卓アプリを作る!
React Storybookを使って開発効率を爆速に!!
結局どれを使うのがいいの?Reactスターターキット比較
Prettierで書いたコードを見やすく綺麗に!
ダミーデータを簡単に生成するライブラリ、faker.jsを使ってみる
Next.jsを使ってみる