Somurie Engineer's Blog

はじめに 遅ればせながらReact-Toolkitの存在を知りました。 試しに使ってみたら生産性が高い！ 今回はIntelliJでReact-Toolkitを使ったシステムを開発する最初の手順をまとめてみました。 自分がまだReact開発に慣れていないので備忘録として細かいことも書きます笑 パッケージのインストール そもそもパッケージのインストールコマンドから書き出します。たまにしか使わないと忘れてしまう。 リリース時に使うものはnpm -i。開発のみで使用するTypeScriptなどはnpm -i -Dです。 npm -i [パッケージ名] （npm でも良い） npm -i -D [パッケージ名] （ npm install -Dや npm install --save-devでも良い） 設定方法 React公式テンプレートからテンプレートを作成する React公式のテンプレートがあるのでそこからclone $ git clone https://github.com/reduxjs/cra-template-redux.git ReduxTypeScriptのテンプレートを作成 $ npx create-react-app my-app --template redux-typescript これだけでもうテンプレート機能が動きます。以下コマンドで実行。 $ npm start 私はIntelliJを使っているのでRun -> Edit Configuration から~/my-app/package.jsonをnpm startするように設定し実行します。 追加パッケージをインストール パッケージを必要に応じて追加する。 Material-UIを使う場合 $ npm install @material-ui/core @material-ui/icons axiosを使う場合 $ npm i axios react-router ESLint TypeScript Pluginのインストール（ESLintとは違うみたいだけどちょっとまだよく分かっていない） $ npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier 複数classをclassNameに設定するライブラリ。過去にはclsxを使っていたが、classnamesが一番メジャーっぽい。