I am a big fan of anything than can be automated, especially when it comes to boiler plate plumbing.  Even more so for a Java developer like myself taking up React.  The following snippets have saved me lots of typos and errors, I will suspect it will for you too!

How to generator 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.

Note:

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

I will pick a few from the above screenshot to illustrate what code is generated.

Creates a React component class with PropTypes and ES6 module system

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

Generated Snippet

Note Component name would be taken from the file name “ManageCoursePage.js”

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

class ManageCoursePage extends Component {
  render() {
    return (
    );
  }
}

ManageCoursePage.propTypes = {};

export default ManageCoursePage;

Creates a React component class with ES6 module system

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

Generated Snippet

import React, {Component} from 'react';

class ManageCoursePage extends Component {
 render() {
 return (
 );
 }
}

export default ManageCoursePage;

Creates a React component class connected to redux with dispatch

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

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 (
    );
  }
}

export default connect(
  mapStateToProps,
)(ManageCoursePage);

Creates a React component class with PropTypes and all lifecycle methods and ES6 module system

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

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) {

  }

  componentWillUpdate(nextProps, nextState) {

  }

  componentDidUpdate(prevProps, prevState) {

  }

  componentWillUnmount() {

  }

  render() {
    return (
    );
  }
}

ManageCoursePage.propTypes = {};

export default ManageCoursePage;

Conclusion

I hope you found the above helpful in saving you time and potentially reducing typos/errors and your chances of RSI.  And of cause these are live code snippets and can be managed like other snippets for Java and other languages via Intellij Idea’s preferences under “Live Templates”.