Reactの環境構築について

React #2 Advent Calendar 2017の19日目のエントリです。

Reactについてのだいぶ大雑把なメモです。

まずは環境構築について

atomのパッケージを準備する

入れるのは
– react-snippets
– language-babel
– linter
– linter-eslint
の4つです。

一つずつ簡単に記述します。

react-snippets

その名の通りReactのスニペットを使えます。
Reactのスニペット一覧はココにあります。

language-babel

JSX,ES6のシンタックスハイライトを適用してくれます。
その他の機能もありますが、あまり使っていません。

【参考】
ReactをAtomパッケージ開発に使ってみた | To Be Decided

linter, linter-eslint

コードの解析をしてくれます。

eslintが不調だったのでpc上からeslintを全部削除してから以下の手順を行ってみました。

大まかな手順は、この2つのパッケージを入れた後に、プロジェクトにESLintをローカルインストール。
$ npm install --save-dev eslint

ESLintを対話形式で.eslintrcファイルを作成します。
$ ./node_modules/.bin/eslint --init

これを実行すると怒涛の質問が始まる。
googleやAirBnBのものも選べるみたいだけど、セミコロンの有無とか今までと若干違うところがあったので自分で選択した。
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Double
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript

これで.eslintrc.jsファイルがプロジェクト内に作成される。

eslintが効いているかコマンド試してみる。
$ .node_modules/.bin/eslint fileName.jsx
これでエラーが表示されたら、効いている証拠である。
ちなみに--fixを最後につけると修正してくれる。

次にこれをatom上で実行させてみる。
いろんなサイトで出ているようなリアルタイムのエラー表示はしてくれないんだけど、以下のように設定する。


linter-eslintの設定から「Fix errors on save」のチェックマークにチェックを付ける。

すると保存したら自動的に修正してくれる。

【参考】eslint

 

その他

他にも有名どころに「React」というパッケージがあったりしたんですけど、
auto-compileとかemmetとかreact-snippetsが入っているおかげで不要になってしまった。

emmetの編集

emmetはデフォルトではJSXでは使えないので、キーマップからJSXでも使えるように編集します。

 

その他いろいろ参考になった記事

 

reactの概要がわかりやすいと思った記事

Reactってなにそれおいしいの?〜導入から基本の実装〜 – Qiita

 

即時関数について

http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e

 

アロー関数の即時関数について

http://analogic.jp/arrow-function/#immediate-function

 

importの{}について

export側で「default」がついている→import側で波括弧なし
export側で「default」がついていいない→import型で{}が必要
http://blog.kyanny.me/entry/2015/08/12/231125
http://qiita.com/HIGAX/items/28f3bec814928b7395da

 

Spread Attributesについて

このスプレッド演算子を使うことでpropsのバケツリレーを避けることができます。
http://horicdesign.com/js/react-redux-connection.html
http://www.yoheim.net/blog.php?q=20161204

「Reactの環境構築について」への1件のフィードバック

コメントを残す