Category: Developer Productivity and Hacks

If you’re a fan of automation (and who isn’t?), IntelliJ IDEA’s code snippets are a game-changer for React development. As a Java developer diving into React, I’ve found these snippets invaluable for reducing typos, boilerplate, and the dreaded RSI (Repetitive Strain Injury). This guide walks you through generating React components using IntelliJ IDEA’s live templates, saving you time and effort.

How to Generate Snippets in IntelliJ IDEA

Before we go any further here is how to generate code snippet in IntelliJ Idea

•  Simply type abbreviation name of the required snippet in the editor in the target file and press ⇥
• You can further narow the list suggestions by IntelliJ Idea by typing more characters of your abbrevation.

Example: shortcuts to create snippets on Intellij Idea on a Mac:

1. Type ​`​rccp` in your editor
2. Then press ⇥ to generate.

Note:

• Component name would be taken from the file name, example “ManageCoursePage.js”
• For those on Visual Studio Code IDE the Code generation for React can be achieved with the Typescript React Code Snippet Extention

React Code Snippet Examples

1. React Component Class with PropTypes

Abbreviation: rcp
Steps:

1. Type rcp in the editor.
2. Press Tab to generate the snippet.

Generated Snippet:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ManageCoursePage extends Component {
  render() {
    return <div>{/* Your code here */}</div>;
  }
}

ManageCoursePage.propTypes = {};
export default ManageCoursePage; 

2. React Component Class with ES6 Module System

Abbreviation: rcc
Steps:

1. Type rcc in the editor.
2. Press Tab to generate the snippet.

Generated Snippet:

 import React, { Component } from 'react';

class ManageCoursePage extends Component {
  render() {
    return <div>{/* Your code here */}</div>;
  }
}

export default ManageCoursePage;

3. React Component Class Connected to Redux with Dispatch

Abbreviation: rdc
Steps:

1. Type rdc in the editor.
2. Press Tab to generate the snippet.

Generated Snippet:

import React, { Component } from 'react';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return {};
}

function mapDispatchToProps(dispatch) {
  return {};
}

class ManageCoursePage extends Component {
  render() {
    return <div>{/* Your code here */}</div>;
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage); 

4. React Component Class with PropTypes and Lifecycle Methods

Abbreviation: rcfc
Steps:

1. Type rcfc in the editor.
2. Press Tab to generate the snippet.

Generated Snippet:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ManageCoursePage extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillReceiveProps(nextProps) {}

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  componentWillUpdate(nextProps, nextState) {}

  componentDidUpdate(prevProps, prevState) {}

  componentWillUnmount() {}

  render() {
    return <div>{/* Your code here */}</div>;
  }
}

ManageCoursePage.propTypes = {};
export default ManageCoursePage; 

Customising IntelliJ Snippets

To create or modify snippets in IntelliJ IDEA:

1. Open Preferences > Editor > Live Templates.
2. Add new templates or tweak existing ones to match your development style.

These templates can also be shared across teams to maintain consistency and reduce onboarding time.

Congratulations! You’ve successfully set up Jest for TypeScript testing in React and NodeJS and integrated IntelliJ IDEA to 10x your workflow. Now! No excuses not to follow a test-driven approach (TDD) and automated testing, which will eventually lead to faster development and more confidence in shipping more frequently

Conclusion

IntelliJ IDEA snippets are a fantastic way to save time and reduce errors when working with React. Whether you’re generating PropTypes, lifecycle methods, or Redux-connected components, these templates make development faster and less repetitive. Explore IntelliJ’s live template feature to customise your workflow and share these snippets with your team for maximum efficiency.

For more automation tips, check out IntelliJ IDEA’s documentation on live templates.

For more resources

• Jest Official Documentation
• ts-jest Configuration Guide