David Boyne

Technical Lead @Comparethemarket. Organiser of Agile-Peterborough. Speaker & evangelist of JavaScript, Agile Principles and helping others.

Creating React templates in WebStorm

When working with React you will often find yourself creating a number of components. If you’re like me then you might write a component and copy and paste that component to make your next component.

This is fine… but it can get boring.

I recently came across some WebStorm templates thanks to Cory House and his mention of React templates in his Pluralsight course.

I thought I would share some of the React templates mentioned in the course with you.

Firstly we need to be able to add templates.

So lets dive in.

Creating templates in Webstorm

Templates can help us define the base foundations of any file we create. So lets utilise this feature and create some templates for React.

Creating templates in WebStorm is very straightforward. So how do we do create them?

First open Webstorm/Preferences

Then go to Editor/File and Code Templates

Then click the plus icon + to add a new template

Now your setup and ready to go. Next lets add our templates.

Class extends React.Component – Template

This is a basic template that will create a component using Class extends React.Component.

As you can see using $NAME will take our filename and populate our Component.

Template

Copy and paste the following into your new template

React Component Template
import React, {PropTypes} from 'react';

class $NAME extends React.Component {

    render() {
    
    }
    
}

$NAME .propTypes = {};

$NAME .defaultProps = {};

export default $NAME;

Template Output Example

So if we now create a new file called Button using our template will we get the following output.

import React, {PropTypes} from 'react';

class Button extends React.Component {

    render() {

    }

}

Button.propTypes = {};

Button.defaultProps = {};

export default Button;

React Stateless Component – Template

This is a basic template that will create us a stateless React component.

Template

Copy and paste the following into your new template

React Stateless Component Template
import React, { PropTypes } from 'react'

const $NAME = (props) => {
	return (
		
	);
}

$NAME .propTypes = {}

export default $NAME

Template Output Example

Lets create a Button component again with the stateless component template.

import React, { PropTypes } from 'react'

const Button = (props) => {
    return (

    );
}

Button.propTypes = {}

export default Button

Workflow

Automating the boring and repetitive tasks is key. It allows us to spend more time being creative.

I know this could form a small part of your React workflow, but everything counts.

Thanks to Cory House for sharing his React templates.

If you have any questions just tweet me, or leave a comment.

SHARE