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 *

関連記事

Write haml with Atom

English 日本語 Abstract Hello everybody, it’s candle. In this time we will write haml with Atom. I’m coding with emacs for all time. but sotimes I use atom. When I open a haml file, there is no coloring and syntax, I try to add plugin. Premise You have Atom editor.

Construct an Atom of eslint corresponding to react + es6

Abstract Hello everyone it’s me candle. This time we will introduce Atom + eslint It is awesome easy to install it. Nowadays eslint became to be mainstream. It has become used not only in Atom but also everywhere. Precondition Node is installed Atom is Installed

How to add extension to Ungoogled chromium

English 日本語 Abstract Hello everybody, It’s candle. I don’t use Google Chrome so much because I am firefox user, but sometimes I need to use Chrome for extensions. Google Chrome is slow, and there are some personal information protection is loose. Detail is here. https://github.com/Eloston/ungoogled-chromium So, I use ungoogled chromium. The problem of ungoogle chromium is that is not easy to install extensions. In this article, I’ll show you how to install plugins. This article is according to the under link. https://github.com/Eloston/ungoogled-chromium/blob/master/FAQ.md Premise Ungoogled chromium has been installed

Develop React in emacs in rjsx-mode

English 日本語 Abstract Hello everyone this is candle. In this time I would like to introduce rjsx-mode of major-mode for react development of emacs. The development of “react” has been tried and errored between emacs users, such as using web-mode or js2-jsx-mode of js2-mode. Also I had been used js2-jsx-mode before rjsx-mode. Since rjsx-mode is an extension of js2-mode, users of js2-mode can use it without discomfort. rjsx-mode has auto complete function of jsx. it’s fantastic. Precondition You use emacs You use melpa or el-get

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


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.