joppot

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

ソフトウェア

Atom imports React component using import-js 2.2.0

投稿日:


Abstract

Hello everybody it’s me candle.

In this time we will import the component path into the file using import-js and Atom automatically.

React recommends to write one component in one file, when development becomes to be big, the number of component increase.

If you use 10 components with one Container, you need to write 10 import statements.
import-js helps us from such troublesome work.

Precondition

Already exist React web environment
I recommend you use the react project created by create-react-app command which I wrote the before article.
Atom was installed in your computer.



Install import-js plugin of Atom

Launch Atom and select “Preferences…” from “Atom” of the top menu.

Click the “Install” at the left menu bar, enter “import-js” in the search box, push the Enter Key.
Install “atom-import-js” in the search results.


Put the .importjs.js file into a react project

The importjs command will do such a thing with reference to .importjs.js in the root of the react project.
Ok I prepared the react project that has such structure in this time.

├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── components
│ └── Input.js
├── index.css
├── index.js
└── logo.svg



Create the .importjs.js

touch .importjs.js

I don’t know about the setting of imporjs, so refer to the file on the github.
https://github.com/Galooshi/import-js/blob/master/.importjs.js

Write this.

module.exports = {
  environments: ['node'],
  ignorePackagePrefixes: ['lodash.'],
  declarationKeyword: 'import',
  logLevel: 'debug',
  excludes: [ './build/**' ]
}

Save it.

We use it

From this part, react development environment is different between each engineer. but I try to do at the above environment.

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;

We try to insert the “Input component” from components/Input.js automatically.
Move the cursor on the <Input> jsx and push “Command + Shift + i”.

The first time importjsd does not recognize the module under the project, so sometime nothing will come out.
Push “Command + Shift + i” again.
Then, I think that the component will be inserted automatically.

It works good.

Conclusion

With this feature of Atom, coding will be much more high speed.

スポンサードリンク

If you think this article is good, share it please

-ソフトウェア
-, ,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

Fix emacs powerline character gets corruption(mojibake) on Mac standard terminal or iTerm2

Abstract Hello everyone it’s me candle. In this time I will show you how to fix emacs powerline character corruption(mojibake). I am referring to this site. https://griffio.github.io/utils/2016/01/26/Spacemacs-OSX-Term/ I will explain both iterm2 and mac standard terminal. In my case I launch the Emacs with iterm2, the arrow of powerline gets garbled. Let’s fix. Precondition You use emacs Your emacs was installed powerline. You use emacs with iTerm2 or mac standard terminal.

Hide Google Chrome 70 “For quick access, place your bookmarks …” bar

Abstract Hello everyone it’s me candle. I usually use Safari. Sometimes using Google Chrome, I forget how to turn off the bookmark bar. First I will write two important things. Google Chrome 70 turn off the book mark bar by default. In the top page of Google Chrome 70, the bookmark bar is definitely displayed Condition You use Google Chrome Turn off it Open Google Chrome, choose “Settings” from the menu icon in the top right. If you turn off “Show bookmarks bar” in the second “Design” area from the top, bookmark bar disappears. It’s over Conclusion Simple is best.

Connect to host mysql from docker container of “docker for Mac”

Abstract Hello everyone it’s me candle. In this post I will show you how to connect to the host mysql from the docker container of mac. For example, you may connect to mysql when running rails, wordpress etc on docker. You may prepare docker of mysql, but it can’t hold data, it is troublesome such as startup time. Then I think that it is very useful if docker can access to the host mysql. Precondition You use docker for mac

Build flycheck + eslint environment supporting to react + es6 in Emacs.

Abstract Hello everyone it’s me candle. In this time let’s build emacs + eslint. There are many other syntax check packages such as jsHint, jsxHint, etc which check the coding rule of javascript. According to web info, these packages seem to be unable to adapt well with the latest javascript writing format such as React and es6. Nowadays eslint became to be mainstream. It has become used not only in emacs but also everywhere. I’m also emacs user, try it! I’m not a node JS and Elisp professional, it may contains useless writing or wrong writing. Please go easy on …

Using vc to manage git on emacs25

Abstract Hello everyone it’s me candle. In this article we would like to use vc(version controll) which is included by deault in emacs. It seems that vc supports to both subversion and git, not git-specific functions. If you want to use git with emacs in earnest, I recommend magit. On the other hand, since vc is installed in by default, it is good for user who want to use it easily. Precondition You use emacs You have a basic git skill. vc-git configuration of emacs Although vc supports to git, ‘git add’ and ‘git reset HEAD’ do not exist. I …


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.