2 posts tagged


Hadi Hariri on Developing Without a Mouse

Ilya Gelman

Hadi Hariri shows us how to use IntelliJ-based IDEs such as WebStorm in a very effective way without touching the mouse.

On Thursdays we post videos that we believe are worth watching and that can make you a better front-end developer. Have such a video to share? Share with us

Video   WebStorm

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.


  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 = () => (  

export default $component;


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 = () => (  

export default HelloWorld;


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

React   Tips   WebStorm