One of the better practices in React is breaking our view to as many reusable components as possible. To make the test a bit easier, we can set WebStorm to auto generate React Component files.

Setup

1. Open WebStorm
2. Click Ctrl+Enter
3. Select "Edit File Template"
4. Click green + on left top
5. Name it "React Component"
6. Set extension to: "js" (or "jsx")
7. Click "enable live templates"
8. Paste this to main edit view:

#set ($clean = ${StringUtils.sub(${NAME}, "_", "-")})
#set ($component = ${StringUtils.removeAndHump(${clean}, "-")})

const $component = () => (
  #[[$END$]]#
);

export default $component;

Usage

Anywhere in WebStorm where file adding dialog pops-up (e.g. Ctrl+Enter) you can now select "React Component"

Set the name of the file (both "-" and "_" are supported) and viola - a new Dumb ReactJS ES2015 compatible component is created.

const HelloWorld = () => (
  <h1>Hi</h1>
);

export default HelloWorld;

Summary

This is just a small taste of what WebStorm's file creation and Live Templates can do. Do explore more.