joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

Atomのatom-import-jsプラグインを使ってReact componentを自動的にインポートする

投稿日:

Pocket

概要

みなさんこんにちはcandleです。
今回はAtomとimport-jsを使って自動的に、componentのパスをインポートしてみたいと思います。
Reactは1ファイル1コンポーネントの書き方を推奨しており、開発が大規模になればなるほど、componentが増えていきます。

もしも1つのContainerで10個のコンポーネントを使うと、10行のimport文を書かなくてはなりません。
そういった面倒な作業を手助けしてくれるのがimport-jsです。

前提

Reactの環境が整っている。
前の記事に書いたcreate-react-appコマンドで作成したプロジェクトを使う事をおすすめします。
Atomがインストールされている

SPONSORED LINK


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のこの機能を使えば、高速でコーディングが可能です。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

mac のiterm2でaltキーをescに割り当て、カーソル移動を早くする

概要 皆さんこんにちはcandleです。今回はiterm2のキーを設定して、カーソル移動を楽にします。 emacsユーザーなら分かると思いますが、カーソルの高速移動はalt+fで前へalt+bで後ろへ …

openofficeの英語の自動変換をオフにする

概要 みなさんこんにちわcandleです。今回はOpen officeの英語自動変換をオフにする方法です。 実はこのテーマ、わざわざブログに書かなくてもググればいくらでも出てくるのですが、 せっかくな …

vagrant1.8で共通の.vagrant.dにあるinsecure_private_keyプライベートキーを使用する

概要 みなさんこんにちはcandleです。今回はvagrantのプライベートキーの指定の仕方です。 vagrantは1.7か1.8でそれぞれのvagrantディレトリの中に生成されるプライベートキーを …

iphoneの画面の明るさを簡単に調整するたった1つの方法

概要 みなさんこんにちはcandleです。iphone画面の画面の明るさを簡単に調整する方法を紹介します。 実はこの機能に気づくまでは、毎回「設定」から「画面表示と明るさ」で調整していました。 前提 …

wordpressでタイトルに縦線をいれるならall in one seo packを使うと便利

概要 みなさんこんにちはcandleです。今回はwordpressのタイトルに縦棒を入れる方法を紹介します。 wordpresは特にプラグインを入れないとハイフン区切りのタイトルになります。 ホーム「 …

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ