joppot

The program absolutely runs in copy paste

Software

Atom imports React component using import-js 2.2.0

投稿日:

Pocket

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.

SPONSORED LINK


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

-Software
-, ,

執筆者:


comment

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

関連記事

How to prevent preview from scrolling back to top in Atom’s Markdown

English 日本語 Abstract Hello everyone, it’s candle. Atom has a markdown preview function from the beginning. When markdown’s sentence becomes long, every time you edit it, the preview back to the top. And, you have to scroll every time to check. It is so tough, we will put a plug-in that will automatically adjust the preview. Premise Atom has been installed

Import React components using Emacs and import-js2.2.0

Abstract Hello everybody it’s me candle. In this time we will import the component path with emacs and import-js. 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. Caution It worked well on the react web but in react native import-js didn’t successfully find out the component. Probably I think that there are some lack of the setting of import-js. Precondition Already exist React web environment I …

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.

How to send pdf from Mac to iphone or ipod using iBooks

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you how to send a pdf file from Mac to iphone or ipod. Sometimes I want to read the pdf document in the train, so I wrote the article about it. Before you send a pdf file to the iphone, you add the pdf to iBooks app. Then you will send the pdf with itunes. Precondition Mac PC iphone or ipod or ipad pdf file

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

Profile


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.

スポンサードリンク

Archives