This repository contains a collection of codemod scripts based for use with JSCodeshift that help update React APIs.
npm install -g jscodeshift
git clone https://github.com/reactjs/react-codemod.git
or download a zip file fromhttps://github.com/reactjs/react-codemod/archive/master.zip
- Run
npm install
in the react-codemod directory jscodeshift -t <codemod-script> <path>
- Use the
-d
option for a dry-run and use-p
to print the output for comparison
Transforms React.createClass
calls into ES2015 classes.
jscodeshift -t react-codemod/transforms/class.js <path>
- If
--no-super-class
is specified it will not extendReact.Component
ifsetState
andforceUpdate
aren't being called in a class. We do recommend always extending fromReact.Component
, especially if you are using or planning to use Flow. Also make sure you are not callingsetState
anywhere outside of your component.
Converts calls to React.createElement
into JSX elements.
jscodeshift -t react-codemod/transforms/create-element-to-jsx.js <path>
Updates this.getDOMNode()
or this.refs.foo.getDOMNode()
calls inside of
React.createClass
components to React.findDOMNode(foo)
. Note that it will
only look at code inside of React.createClass
calls and only update calls on
the component instance or its refs. You can use this script to update most calls
to getDOMNode
and then manually go through the remaining calls.
jscodeshift -t react-codemod/transforms/findDOMNode.js <path>
jscodeshift -t react-codemod/transforms/pure-component.js <path>
Removes PureRenderMixin
and inlines shouldComponentUpdate
so that the ES2015
class transform can pick up the React component and turn it into an ES2015
class. NOTE: This currently only works if you are using the master version
(>0.13.1) of React as it is using React.addons.shallowCompare
jscodeshift -t react-codemod/transforms/pure-render-mixin.js <path>
- If
--mixin-name=<name>
is specified it will look for the specified name instead ofPureRenderMixin
. Note that it is not possible to use a namespaced name for the mixin.mixins: [React.addons.PureRenderMixin]
will not currently work.
Updates code for the split of the react
and react-dom
packages (e.g.,
React.render
to ReactDOM.render
). It looks for require('react')
and
replaces the appropriate property accesses using require('react-dom')
. It does
not support ES6 modules or other non-CommonJS systems. We recommend performing
the findDOMNode
conversion first.
jscodeshift -t react-codemod/transforms/react-to-react-dom.js <path>
- After running the automated codemod, you may want to run a regex-based
find-and-replace to remove extra whitespace between the added requires, such
as
codemod.py -m -d src --extensions js '(var React\s*=\s*require\(.react.\);)\n\n(\s*var ReactDOM)' '\1\n\2'
using https://github.com/facebook/codemod.
Reorders React component methods to match the ESLint react/sort-comp rule. (Defaults to ordering of the Airbnb style guide.
jscodeshift -t react-codemod/transforms/sort-comp.js <path>
- Ignore components with calls to deprecated APIs. This is very defensive, if
the script finds any identifiers called
isMounted
,getDOMNode
,replaceProps
,replaceState
orsetProps
it will skip the component. - Replaces
var A = React.createClass(spec)
withclass A (extends React.Component) {spec}
. - Pulls out all statics defined on
statics
plus the few special cased statics likepropTypes
,childContextTypes
,contextTypes
anddisplayName
and assigns them after the class is created.class A {}; A.foo = bar;
- Takes
getDefaultProps
and inlines it as a staticdefaultProps
. IfgetDefaultProps
is defined as a function with a single statement that returns an object, it optimizes and transformsgetDefaultProps() { return {foo: 'bar'}; }
intoA.defaultProps = {foo: 'bar'};
. IfgetDefaultProps
contains more than one statement it will transform into a self-invoking function like this:A.defaultProps = function() {…}();
. Note that this means that the function will be executed only a single time per app-lifetime. In practice this hasn't caused any issues –getDefaultProps
should not contain any side-effects. - Binds class methods to the instance if methods are referenced without being
called directly. It checks for
this.foo
but also traces variable assignments likevar self = this; self.foo
. It does not bind functions from the React API and ignores functions that are being called directly (unless it is both called directly and passed around to somewhere else) - Creates a constructor if necessary. This is necessary if either
getInitialState
exists in theReact.createClass
spec OR if functions need to be bound to the instance. - When
--no-super-class
is passed it only optionally extendsReact.Component
whensetState
orforceUpdate
are used within the class.
The constructor logic is as follows:
- Call
super(props, context)
if the base class needs to be extended. - Bind all functions that are passed around,
like
this.foo = this.foo.bind(this)
- Inline
getInitialState
(and removegetInitialState
from the spec). It also updates access ofthis.props.foo
toprops.foo
and addsprops
as argument to the constructor. This is necessary in the case when the base class does not need to be extended wherethis.props
will only be set by React after the constructor has been run. - Changes
return StateObject
fromgetInitialState
to assignthis.state
directly.
Options to recast's printer can be provided
through the printOptions
command line argument
jscodeshift -t transform.js <path> --printOptions='{"quote":"double"}'
The scripts in this repository are provided in the hope that they are useful, but they are not officially maintained, and we generally will not fix community-reported issues. They are a collection of scripts that were previously used internally within Facebook or were contributed by the community, and we rely on community contributions to fix any issues discovered or make any improvements. If you want to contribute, you're welcome to submit a pull request.