create-react-class

What is create-react-class?

The create-react-class package is a utility that allows you to write React components using a syntax similar to ES5, which is useful for those who are not using ES6 classes. It was extracted from the main React library when classes were introduced in ES6 to provide backward compatibility for older codebases or for those who prefer not to use ES6 syntax.

What are create-react-class's main functionalities?

Creating React components

This feature allows you to create React components using an ES5 syntax. The example shows a simple component that renders a greeting message.

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

Specifying propTypes and defaultProps

This feature allows you to specify propTypes and defaultProps for your component, which helps with type checking and setting default values for props.

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  propTypes: {
    name: PropTypes.string
  },
  getDefaultProps: function() {
    return {
      name: 'World'
    };
  },
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

Using lifecycle methods

This feature allows you to use lifecycle methods such as componentDidMount, which can be used for operations that need to happen after the component is inserted into the DOM.

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  componentDidMount: function() {
    console.log('Component did mount!');
  },
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

Other packages similar to create-react-class

react

The main React package itself now supports hooks, which can be used to write components in a functional style without classes. Hooks provide similar functionalities to lifecycle methods and state management without the need for create-react-class.

preact-compat

Preact-compat is a layer over Preact that attempts to achieve React compatibility with a smaller footprint. It allows you to use React-like components and lifecycle methods, similar to create-react-class, but with Preact's optimizations.

recompose

Recompose is a React utility belt for function components and higher-order components. It provides the ability to write components in a functional manner and can be seen as an alternative to create-react-class, especially before hooks were introduced in React.

README

create-react-class

A drop-in replacement for React.createClass.

Refer to the React documentation for more information.

Changelog

15.7.0 (October 14, 2020)

React

• Backport support for the new JSX transform to 15.x. (@lunaruan in #18299 and @gaearon in #20024)