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.
