![](https://suwaru.tokyo/images/2019/11/react_01-1024x684.jpg)
こんにちは。iQeda [@iQeeeda] です。
普段は Vue.js を使うことが多く vue-cli
コマンドで環境を作ってしまうのですが、
業務で React を使うことになり、簡単に環境構築できるコマンドないかなーと探してみました。
今回は create-react-app
コマンドでかんたんに React プロジェクトを構築する方法、SASS の導入方法、ESLint を AirBnB 構成にする方法を解説します。
create-react-app
数年前、webpack や babel を入れて、設定ファイルを書くのが辛すぎて挫折してしまいました…
現在では create-react-app
コマンドを使うと、
それを全部やってくれて、設定ファイルまで隠蔽してくれます。(優しい時代)
プロジェクトの作成、ブラウザで表示する
今回 yarn
コマンドを使うのでインストールしておいてください。
Mac 環境の人は brew install yarn
で使えるようになるはずです。
# create-react-app コマンド導入
yarn global add create-react-app
# React プロジェクトを作成
create-react-app [プロジェクト名]
cd [プロジェクト名]
# dev-server でブラウザ表示する
yarn start
SASS を導入する
CSS の可読性をあげる SASS を導入します。
yarn add node-sass --save
index.css
から index.scss
にリネームしてください。
css ファイルとして読み込んでいた箇所を scss に修正しましょう。
import './index.scss';
たったこれだけで SASS が使えるようになります。
ESLint の設定
ESLInt を導入するとエディターやコマンドラインに JavaScript の文法エラーを表示してくれます。
公式サイトではエディターの ESLint プラグインをそのまま使えばいいよって説明ですが、
たとえば AirBnb の ESLint 構成などにしたいときがあると思います。
※ AirBnb の JavaScript 記述ルールは厳格なことで有名
下記のライブラリを追加してください。
yarn add -D eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier
プロジェクト直下に .eslintrc
を作成してください。
{
"extends": [
"react-app",
"airbnb",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react"
],
"plugins": ["jsx-a11y", "prettier"]
}
package.json
の scripts
に "lint": "eslint ."
を追加します。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint ."
},
コマンドで yarn lint
で実行されたら設定完了。
エディターにプラグインが入っていればエラー表示されるはずです。
Git コミット前にチェックが走るように設定
yarn add -D husky lint-staged
プロジェクト直下に .huskyrc.json
と .lintstagedrc.json
を作成します。
{
"hooks": {
"pre-commit": "lint-staged"
}
}
husky がコミット前に lintstage を呼びますが、そのときの処理を lintstage.json
に記述します。
{
"*.+(js|jsx)": ["eslint --fix", "git add"],
"*.+(json|css|md)": ["prettier --write", "git add"]
}
参考) Extend “Create React App” with AirBnB’s ESLint config, Prettier, Flow and React Testing Library.
関連記事
お仕事ください!
僕が代表を務める 株式会社 EeeeG では Web 制作・システム開発・マーケティング相談を行っています。 なにかお困りごとがあれば、Twitter DM や Web サイトからお気軽にご相談ください。
カテゴリ「Develop」の最新記事
コメント