React file template in WebStorm

Wouldn't it be great if when you open the "File > New" menu you could also choose "React component"?

WebStorm allows you to do this by creating custom "File templates".

Start from an existing file

The easiest way to create one is to just start from a file you already have (in our case a React component you already have) and go to "Tools > Save as file template". If the menu doesn't pop up, make sure to click anywhere inside the file to get into focus.

Configure the file template

A new dialog will open where you can customize the template. In order to do that:

• delete all the content from the original file that you don't want in your template
• give the template a name in the "Name" field. This is what will appear in the "New" menu
• set the extension - here we stick to jsx
• replace the hardcoded component name with the $NAME$ variable, to set it to the value the user input in the "New" dialog

There are a lot more variables available if you want to customize your template even more. You can find the full list in the WebStorm docs.

What next?

Now that you know how to customize the "New" menu dialog, you might want to take a look at "Live templates". These are common code snippets you can insert into your code and there's already a Github repo with the most common React live templates you might need.

If you found this useful, let me know in the comments below!