CODEWITHSUNDEEP
javascriptclassreactjs
John Doe
John Doe

Reputation: 403

Warning: Accessing reactClass via the main React package is deprecated

After a few online tutorials, whenever I try to open a simple web-page that implements React Js in the following way:

    var Letter = React.createClass({
        render: function() {
            return (
                <div>
                {this.props.children}
                </div>
            );
        }
    });

    var destination = document.querySelector("#container");

    ReactDOM.render(
        <div>
            <Letter>A</Letter>
            <Letter>E</Letter>
            <Letter>I</Letter>
            <Letter>O</Letter>
            <Letter>U</Letter>
        </div>,
        destination
    );

I get the following:

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass

from the google chrome web developer console.

How does one convert a createClass() component to a Javascript class?

Upvotes: 0

Views: 786

Answers (1)

John Doe
John Doe

Reputation: 403

Only transform a createClass component when:

  1. There are no mixins on the class or options['pure-component'] is true.
  2. Have no class to deprecated APIs. If this script finds any calls to isMounted, getDOMNode, replaceProps, replaceState or setProps it will skip the component.
  3. Component does not use argument in methods
  4. Has a convertible getInitialState()
  5. Has primitive right-hand side values unlike > foo: getStuff()

To convert component to an ES6 class component: Replace var A = React.createClass(spec) with class A extends React.component {spec}

So to answer your question, convert your Letter component to:

    class Letter extends React.Component {
        render() {
            return (
                <div>
                {this.props.children}
                </div>
            );
        }
    }

For more information, visit the following guide in github

Upvotes: 1

Related Questions