はじめに

遅ればせながら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が一番メジャーっぽい。

$ npm install classnames --save
$ npm install -D @types/classnames

ロガー

$ npm install --save redux-logger
$ npm i -D @types/redux-logger

.gitignoreをどこかから持ってくる。自分の場合は過去のプロジェクトの.gitignoreをコピって使います。 ↓.gitignoreをまとめたgithubがあるのでオススメ

https://github.com/github/gitignore

GitHubにプッシュ

以下コマンドでgit のリモートブランチが設定されていないことを確認します（もしcloneした先のリモートブランチが設定されていたら削除）

$ git remote -v

GitHubにリポジトリを作成し、以下のようにリモートブランチに追加する

$ git remote add origin https://github.com/〜〜.git
$ git remote -v    // 追加したリモートブランチが表示される

Netlifyへのデプロイ

GitHubとNetlifyを連携して、GitHubにプッシュされた資源をNetlifyにデプロイします。 Netlifyにデプロイする設定に関しては他のサイトが多々あるのでそちらを参考。以下サイトはシンプルでわかりやすい。 https://qiita.com/NaokiIshimura/items/9f12805af85c9be22814

ReactToolkit特有の設定として、Buildの設定を記載する必要があります。上記サイトの設定に加えて、以下の設定を適用します。

Basic Build Settingsの設定に以下を記載（my-appはデフォルトのアプリ名。変更している場合は変更後の値を設定する）

base directory: my-app
build command: npm run build
public directory: my-app/build/

（余談）頻繁に出現するエラー

頻繁に出現するわりにググって解決しにくいエラーをまとめました。

引数を別途定義しないといけない場合（TS2322）

引数は合っているように見えるけどエラーになる。

<AudioList songNumbers={songNums} />

songNumbersの部分にTS2322: Type ‘{ songNumbers: number[]; }’ is not assignable to type ‘IntrinsicAttributes & number[]‘. Property ‘songNumbers’ does not exist on type ‘IntrinsicAttributes & number[]‘.

NGな書き方。

export function AudioList(songNumbers: numbers[]) {

OKな書き方。配列とか複数の引数を持つ場合は引数をまとめて別途定義が必要みたい。

interface AudioListProps {
  songNumbers: number[] 
}

export function AudioList({songNumbers}: AudioListProps) {

FEATURED TAGS

aws ddd java kotlin rails ruby wordpress

ABOUT ME

温泉ソムリエエンジニア。サーバ構築からアプリケーションの開発まで手広く対応。Web系・サーバサイドの開発が特に得意

IntelliJでReactToolkitのアプリを作成しNetlifyに公開する

TOC