どこぞで紹介されてたReact,Redux,Node.js,MongoDB,GraphQLなどについて学べるオンライン教材FullStackOpen2019で遊んでいます。 まだPart3を開始したところですが、初心者の自分にもわかりやすく良い感じ。英語も割と平易。
環境構築は一度やったっきりで忘れがちになるのでとりあえずメモ。
Chrome 拡張機能
JSONView (ChromeでJSONデータを整形して表示する)を入れておくと便利
Reactアプリの開発
Reactでのアプリケーション開発。準備としては
- nodeをインストール
npx create-react-app アプリ名でReactアプリケーションのひな型を作成npm startでアプリケーションの起動
開発にあたってはお手軽なDBサーバであるJSON serverを使用すると便利
- インストール
npm install -g json-server - 開発環境としてインストールする場合
npm install json-server --save-dev npm run serverで起動するようpackege.jsonを修正
"scripts":{
"server":"json-server -p3001 db.json
}
HTTP Clientであるaxiosをインストール
npm install axios --save*1
バックエンドの開発
準備
npm initで設定ファイルの作成npm startで開始するように変更
"scripts":{
"start":"node index.js",
}
webアプリケーションフレームワークであるexpressをインストール
npm install express --save
nodaemonをインストールしてコード変更のたびにリスタートするようにする
npm install --save-dev nodemonnpm run watchで開始するように変更
"scripts":{
"watch":"nodemon index.js",
}
動作確認のためにREST clientをインストール(Visual Studio Code)
リクエストのbodyを変換するbody-parser libraryをインストールする
npm install body-parser
HTTP request logger midlewareのmorganをインストール
npm install morgan
その他
個人的にVisual Studio Codeで使ってる拡張パック
- Awesome Emacs Keymap
- Bracket Pair Colorizer
- Debugger for Chrome
- Japanese Language Pack for VS Code
- zenkaku
- ESLint
あとCtrl+oで半角/全角変換したいのでIMEの「プロパティ」→「詳細設定」→全般タブ、編集操作の「変更」→キー設定タブのCtrl+O・入力/変換済み文字無しにIME-オン/オフを割り当てています
E6-2で沼ってます資源が湯水のように溶けていきます助けて･･･
