Quick Add React Component to Webstorm

Boris Dinkevich

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.

Popular