【環境構築】ゼロからreactアプリ作成まで
Node.jsのインストール
下記でLTS(Long Term Support)版をインストールする
https://nodejs.org/ja/
IDE/エディターのインストール
好きなものを
特にこだわりがなければVS Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Yarnをインストール
npmが改良されたパッケージマネージャであるYarnをインストールする
npm install --global yarn
バージョン確認
yarn --version
create-react-appのインストール
yarn global add create-react-app
Reactアプリケーションの作成
create-react-app hello-world
typescriptを使う場合
npx create-react-app hello-world --typescript # or yarn create react-app hello-world --typescript
[オプション]ESLintとPrettierの導入
`create react app eslint prettier` でググると方法が出てくる
Qiitaだと情報古い可能性が高いため随時公式Docを参照のこと
注意
create-react-appでESLintが初期状態で含まれており、間違った導入をするとエラーになる
その場合、yarn startするとターミナルにエラーと対処方法が出てくるのでそれに従う
ESLint公式
Prettier公式
Prettier公式 - ESLintとの連携方法について
[オプション]各種ツールの導入
- コミット前に自動的にESLintとPrettierを実行 → lint-staged や husky
- CSSのLinter → Stylelint
