or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

create-react-class

create-react-class is a drop-in replacement for React.createClass, providing legacy API for creating React component classes. It maintains the original createClass interface including lifecycle methods, mixins support, and automatic method binding, serving as a compatibility layer for legacy React applications migrating from createClass syntax to newer React versions.

Package Information

Package Name: create-react-class
Package Type: npm
Language: JavaScript
Installation: npm install create-react-class

Core Imports

import createReactClass from "create-react-class";

For CommonJS:

const createReactClass = require("create-react-class");

For browser globals (UMD):

<script src="https://unpkg.com/create-react-class/create-react-class.min.js"></script>
<script>
  // Available as global createReactClass
</script>

Basic Usage

import React from "react";
import createReactClass from "create-react-class";

// Create a component class using the legacy API
const MyComponent = createReactClass({
  getInitialState() {
    return { count: 0 };
  },

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  },

  render() {
    return React.createElement("div", null,
      React.createElement("p", null, `Count: ${this.state.count}`),
      React.createElement("button", { onClick: this.handleClick }, "Increment")
    );
  }
});

// Use the component
React.render(React.createElement(MyComponent), document.getElementById("root"));

Capabilities

Component Class Creation

Creates React component classes using the legacy createClass API with automatic method binding and lifecycle support.

/**
 * Creates a React component class from a specification object
 * @param {ComponentSpec} spec - Component specification containing methods and configuration
 * @returns {ComponentConstructor} React component class constructor
 */
function createReactClass(spec: ComponentSpec): ComponentConstructor;

interface ComponentSpec {
  // Required method
  render(): ReactElement;
  
  // Lifecycle methods (optional)
  getInitialState?(): object | null;
  getDefaultProps?(): object;
  getChildContext?(): object;
  componentWillMount?(): void;
  UNSAFE_componentWillMount?(): void;
  componentDidMount?(): void;
  componentWillReceiveProps?(nextProps: object, nextContext?: object): void;
  UNSAFE_componentWillReceiveProps?(nextProps: object, nextContext?: object): void;
  shouldComponentUpdate?(nextProps: object, nextState: object, nextContext?: object): boolean;
  componentWillUpdate?(nextProps: object, nextState: object, nextContext?: object): void;
  UNSAFE_componentWillUpdate?(nextProps: object, nextState: object, nextContext?: object): void;
  componentDidUpdate?(prevProps: object, prevState: object, prevContext?: object): void;
  componentWillUnmount?(): void;
  
  // Configuration (optional)
  displayName?: string;
  mixins?: Mixin[];
  statics?: { [key: string]: any };
  propTypes?: { [key: string]: PropTypeValidator };
  contextTypes?: { [key: string]: PropTypeValidator };
  childContextTypes?: { [key: string]: PropTypeValidator };
  autobind?: boolean;
  
  // Static lifecycle methods (optional)
  getDerivedStateFromProps?(props: object, state: object): object | null;
  
  // Advanced (optional)
  updateComponent?(): void;
  
  // Custom methods (optional)
  [methodName: string]: any;
}

interface ComponentConstructor {
  new (props?: object, context?: object, updater?: object): ComponentInstance;
  displayName?: string;
  defaultProps?: object;
  propTypes?: { [key: string]: PropTypeValidator };
  contextTypes?: { [key: string]: PropTypeValidator };
  childContextTypes?: { [key: string]: PropTypeValidator };
  getDerivedStateFromProps?: (props: object, state: object) => object | null;
}

interface ComponentInstance {
  props: object;
  state: object | null;
  context: object;
  refs: { [key: string]: any };
  
  // Methods available on instances
  setState(partialState: object | ((prevState: object, props: object) => object), callback?: () => void): void;
  forceUpdate(callback?: () => void): void;
  
  // Legacy methods (deprecated)
  isMounted(): boolean;
  replaceState(newState: object, callback?: () => void): void;
}

interface Mixin {
  // Any valid ComponentSpec properties
  [key: string]: any;
}

type PropTypeValidator = (props: object, propName: string, componentName: string) => Error | null;

Lifecycle Method Policies

The createClass system supports different method composition policies:

DEFINE_ONCE: Method can only be defined once (e.g., render, shouldComponentUpdate)
DEFINE_MANY: Method can be defined multiple times, all versions will be called (e.g., lifecycle methods)
DEFINE_MANY_MERGED: Method results are merged if defined multiple times (e.g., getInitialState, getDefaultProps)

Automatic Method Binding

All non-React methods defined in the spec are automatically bound to the component instance unless autobind: false is specified.

const Component = createReactClass({
  handleClick() {
    // 'this' is automatically bound to component instance
    console.log(this.props.name);
  },
  
  render() {
    return React.createElement("button", { onClick: this.handleClick }, "Click me");
  }
});

Mixin Support

Components can include mixins to share functionality across multiple components.

const TimerMixin = {
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: Date.now() });
    }, 1000);
  },
  
  componentWillUnmount() {
    clearInterval(this.timer);
  }
};

const TimedComponent = createReactClass({
  mixins: [TimerMixin],
  
  getInitialState() {
    return { time: Date.now() };
  },
  
  render() {
    return React.createElement("div", null, new Date(this.state.time).toString());
  }
});

Static Methods and Properties

Define static methods and properties using the statics configuration.

const Component = createReactClass({
  statics: {
    customMethod() {
      return "I'm a static method";
    },
    
    VERSION: "1.0.0"
  },
  
  render() {
    return React.createElement("div", null, Component.customMethod());
  }
});

PropTypes and Context Integration

Full support for PropTypes validation and React context.

const Component = createReactClass({
  propTypes: {
    name: PropTypes.string.isRequired,
    age: PropTypes.number
  },
  
  contextTypes: {
    theme: PropTypes.string
  },
  
  childContextTypes: {
    user: PropTypes.object
  },
  
  getChildContext() {
    return {
      user: { name: this.props.name, age: this.props.age }
    };
  },
  
  render() {
    const theme = this.context.theme || "default";
    return React.createElement("div", { className: theme }, this.props.name);
  }
});

Migration from React.createClass

This package provides a seamless migration path from the deprecated React.createClass:

Before (React <16):

const Component = React.createClass({
  render() {
    return React.createElement("div", null, "Hello");
  }
});

After (React 16+):

import createReactClass from "create-react-class";

const Component = createReactClass({
  render() {
    return React.createElement("div", null, "Hello");
  }
});

Error Handling

The package includes comprehensive error checking and provides detailed error messages for:

Missing required render method
Invalid component specifications
Method name conflicts
Mixin composition errors
PropTypes validation errors (development mode)

All errors include component names and helpful debugging information when available.

Development vs Production

Development: Includes warnings, PropTypes validation, and debugging information
Production: Strips development-only code for smaller bundle size
Environment detection via process.env.NODE_ENV

Browser Compatibility

Supports all browsers that React supports, with automatic polyfills for older environments through the build process.