概要
みなさんこんにちはcandleです。
今回はAtomとimport-jsを使って自動的に、componentのパスをインポートしてみたいと思います。
Reactは1ファイル1コンポーネントの書き方を推奨しており、開発が大規模になればなるほど、componentが増えていきます。
もしも1つのContainerで10個のコンポーネントを使うと、10行のimport文を書かなくてはなりません。
そういった面倒な作業を手助けしてくれるのがimport-jsです。
前提
Reactの環境が整っている。
前の記事に書いたcreate-react-appコマンドで作成したプロジェクトを使う事をおすすめします。
Atomがインストールされている
Atomのimport-jsプラグインをインストール
Atomを開いて、上のメニューの「Atom」から「Preferences…」を選びます。
左のメニューバーから「Install」を押し、検索ボックスに「import-js」と打ち込み、エンターを押します。
候補の中の「atom-import-js」をインストールします。
.importjs.jsファイルをreactプロジェクトの設置する
importjsコマンドはreactプロジェクトのルートにある.importjs.jsを参考にしてあれこれやってくれます。
今回用意したreactプロジェクトはこのような構造になります。
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── components
│ └── Input.js
├── index.css
├── index.js
└── logo.svg
.importjs.jsを作成
touch .importjs.js
内容はよくわから無いので、githubに上がっているものを参考にしました
https://github.com/Galooshi/import-js/blob/master/.importjs.js
以下を書き込みます。
module.exports = { environments: ['node'], ignorePackagePrefixes: ['lodash.'], declarationKeyword: 'import', logLevel: 'debug', excludes: [ './build/**' ] }
保存します。
実際に使ってみる
ここからは人によってReactの環境が変わってきますが、私は前回の記事の環境でやっています。
src/App.jsはこんな感じのプログラムです。
import React from 'react'; class App extends React.Component{ constructor(){ super(); this.state = { txt: 'hello world' } } update(e){ this.setState({ txt: e.target.value }) } render(){ return( <div> <p>Text: {this.state.txt}</p> <Input onChange={this.update.bind(this)}/> </div> ) } } export default App;
Input componentをcomponents/Input.jsから自動的にimportしてみたいと思います。
Atomエディタで<Input> jsxの上にカーソルをのせ「Cmmand + Shift + i」を押します。
1度目はimportjsdがそのプロジェクト配下のモジュールを認識していなく、何も出てこない場合があります。
もう1度「Cmmand + Shift + i」を押します。
すると、自動的にコンポーネントが挿入されると思います。
うまくできました。
まとめ
Atomのこの機能を使えば、高速でコーディングが可能です。