Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>React Pure To ClassNew to Visual Studio Code? Get it now.

React Pure To Class

Max Shishkin

|
63,238 installs
| (3) | Free
Convert pure react components to class components
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Replaces pure functional react components with class components. Works both for JavaScript and TypeScript.

Select a block of code, choose React Pure To Class from the Command Palette.

Demo

Turns this:

function MyComponent(props) {
  return (
    <div className="my-component">
      {props.children}
    </div>
  );
}

into this:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      props,
    } = this;

    return (
      <div className="my-component">
        {props.children}
      </div>
    );
  }
}

It makes some assumptions about functions that can be transformed:

  • function should has zero or one argument (i.e. props, though the name me be different)
  • the argument, if present, should be an identifier (foo => {..}) or object pattern(({ foo }) => {...}). This means array patterns (([foo]) => {...}) and default function parameters ((foo = defaultFoo) => {...}) don't work. props is always an object and default props are handled differently in React
  • the functions should not appear inside other functions, be property of an objects or method of a class

Extension options:

reactPureToClass.reactComponent - string, where to find base react component, defaults to React.Component.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft