Why use React CreateReactClass?

Question

I want to use this package with React: https://github.com/naikus/svg-gauge

The example for React is using CreateReactClass see below:

Do I need this? Why are they using this? The docs don't mention the reason behind using CreateReactClass. Can you use this package w/o CreateReactClass?

import React from "react";
import CreateReactClass from "create-react-class";
import Gauge from "svg-gauge";

const defaultOptions = {
  animDuration: 1,
  showValue: true,
  max: 100
  // Put any other defaults you want. e.g. dialStartAngle, dialEndAngle, radius, etc.
};

const Component = CreateReactClass({
  displayName: "Gauge",
  componentDidMount() {
    this.renderGauge(this.props);
  },

  shouldComponentUpdate(nextProps, nextState) {
    const {props} = this;
    if(props.value !== nextProps.value) {
      this.renderGauge(nextProps);
    }
    return false;
  },

  render() {
    return (
      <div className="gauge-container" ref={el => this.gaugeEl = el}></div>
    );
  },

  renderGauge(props) {
    const gaugeOptions = Object.assign({}, defaultOptions, props);
    if(!this.gauge) {
      this.gauge = Gauge(this.gaugeEl, gaugeOptions);
    }else {
      this.gauge.setValueAnimated(props.value, gaugeOptions.animDuration);
    }
  }
});

Answer 1

Originally, React.createClass was the only way you declared components. Class components and functional stateless components were added later. With the release of React 16, React.createClass was removed, but it was moved to the separate create-react-class package to make upgrading easier on codebases that relied heavily on React.createClass. You can read a bit more about the deprecation of React.createClass here

So the example for that project is just using the create-react-class package, but you should be able to use a class or function component instead.

Answer 2

You can use createReactClass if you don't want to use ES6 in your project since Class keyword is ES6 specification. You can read more in React doc