Friday, 5 May, 2017 UTC
Summary
As of React 15.5, createClass is deprecated. You’ll get warnings in the console if you’re using it in your code – and, when React 16 comes out, createClass will be removed entirely.
What to do? Well, update your code, of course!
Watch the video below for how to do it, or read on.
Get the Code!
Replace createClass When replacing
React.createClass there are 2 options:- use an ES6 class
- use a stateless function
Here’s how to decide:
- Use an ES6 class if either:
- the component uses state (search for “this.state” to make sure)
- the component uses lifecycle methods like
componentDidUpdate,componentDidMount, etc.
- Use a stateless function if neither of the above is true
This post covers converting to stateless functions (another one will cover ES6 classes).
Before: createClass Here’s the old syntax. Everything is a property of an object passed to React.createClass.
import React from 'react'; var NameWithHandle = React.createClass({ propTypes: { author: React.PropTypes.shape({ name: React.PropTypes.string.isRequired, handle: React.PropTypes.string.isRequired }).isRequired }, render: function() { var { name, handle } = this.props.author; return ( <span className="name-with-handle"> <span className="name">{name}</span> <span className="handle">@{handle}</span> </span> ); } }); Here’s the same component, converted to a stateless function. It’s fewer lines of code, too!
import React from 'react'; import PropTypes from 'prop-types'; function NameWithHandle({ author }) { const { name, handle } = author; return ( <span className="name-with-handle"> <span className="name">{name}</span> <span className="handle">@{handle}</span> </span> ); } NameWithHandle.propTypes = { author: PropTypes.shape({ name: PropTypes.string.isRequired, handle: PropTypes.string.isRequired }).isRequired }; What changed?
- Props are passed as an argument: No more
this.props.whatever. The first argument to the function is an object containing the props. The code below uses the ES6 destructuring syntax (the{ author }part) which pulls the named keys out of the object and stores them in variables of the same name. - PropTypes are pulled out: Since the component is a function now, its PropTypes are a property on the function itself – instead of being a property on the object that describes the component.
- PropTypes is its own library: In React 15.5, there is no more
React.PropTypes. Instead, there’s a separate module that must be installed withnpm install prop-types, and can be imported asimport PropTypes from 'prop-types'.
You can download an example project with 9 different components, both before and after conversion from React.createClass to stateless functions. You’ll also get notified when I publish new articles like this – including the followup on converting to ES6, and how you can automate the conversion in your own code with codemods.
Get the Code!
Convert React.createClass to Stateless Function Components was originally published by Dave Ceddia at Dave Ceddia on May 03, 2017.
CodeProject