Quick Add React Component to Webstorm
Last updated on Jul 15, 2016

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.

Back to all articles
We are leading front-end consultancy specializing in React, React Native, and Angular. We build web and mobile apps, train teams and consult on complex projects.

Tel AvivIsrael

New York CityUSA

© 500Tech. Building high-quality software since 2012.