WebStorm out of the box doesn't come with a ready-made template for React.js components with the requires and exports all ready, it would make life easier when you start to design many components to have a new-file React Component template ready.
So the question is: how do I create a WebStorm React component?
1.) Go into settings (alt+ctrl+s)
2.) Start typing "file and code templates"
3.) Press the green + button on the upper left side
4.) in the field Name, just write "React Component" and Extension JS (everyone has their own preference there, so feel free to change...)
5.) Best practice dictates file naming as I did which is: fileName in camel case and ComponentName with first capital and then camel casing. Yet again, you can do whatever suits you best. So I went with this code:
"use strict";
var React = require('react');
var ${NAME} = React.createClass({
render: function(){
return (
);
}
});
#set( $upper = $NAME.toString().substring(0,1).toUpperCase() )
#set( $rest = $NAME.toString().substring(1))
#set( $capped = "$upper$rest" )
module.exports = $upper$rest;
Copy Paste the above code and press OK.
Now when you right click for new file, you will have "React Component" with all the initial best practice code usage, all warm and ready for you to just start adding any additional code.
Hope this helps out.