This repository contains a collection of codemod scripts for use with JSCodeshift that help update React APIs.
npx react-codemod <transform> <path> [...options]
transform- name of transform, see available transforms below.path- files or directory to transform- use the
--dryoption for a dry-run and use--printto print the output for comparison
This will start an interactive wizard, and then run the specified transform.
Converts calls to React.createElement into JSX elements.
npx react-codemod create-element-to-jsx <path>Renames the experimental unstable_handleError lifecycle hook to componentDidCatch.
npx react-codemod error-boundaries <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.
npx react-codemod findDOMNode <path>Converts manual function bindings in a class (e.g., this.f = this.f.bind(this)) to arrow property initializer functions (e.g., f = () => {}).
npx react-codemod manual-bind-to-arrow <path>Converts ES6 classes that only have a render method, only have safe properties (statics and props), and do not have refs to Functional Components.
The wizard will ask for 2 options -
- Use arrow functions?: converts to arrow function. Converts to
functionby default. - Destructure props?: will destructure props in the argument where it is safe to do so.
npx react-codemod pure-component <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
npx react-codemod pure-render-mixin <path>- The wizard will ask to optionally override
mixin-name, and look for it instead ofPureRenderMixin. Note that it is not possible to use a namespaced name for the mixin.mixins: [React.addons.PureRenderMixin]will not currently work.
Replaces React.PropTypes references with prop-types and adds the appropriate import or require statement. This codemod is intended for React 15.5+.
npx react-codemod React-PropTypes-to-prop-types <path>- In addition to running the above codemod you will also need to install the
prop-typesNPM package.
Adds UNSAFE_ prefix for deprecated lifecycle hooks. (For more information about this codemod, see React RFC #6)
npx react-codemod rename-unsafe-lifecycles <path>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.
npx react-codemod react-to-react-dom <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.
Converts calls like React.DOM.div(...) to React.createElement('div', ...).
npx react-codemod React-DOM-to-react-dom-factories <path>Replaces View.propTypes references with ViewPropTypes and adds the appropriate import or require statement. This codemod is intended for ReactNative 44+.
npx react-codemod ReactNative-View-propTypes <path>Reorders React component methods to match the ESLint react/sort-comp rule. (Defaults to ordering of the Airbnb style guide.
npx react-codemod sort-comp <path>As of Babel 7.9.0, when using runtime: automatic in @babel/preset-react or @babel/plugin-transform-react-jsx, you will not need to explicitly import React for compiling jsx. This codemod removes the redundant import statements. It also converts default imports (import React from 'react') to named imports (e.g. import { useState } from 'react').
The wizard will ask for 1 option -
- Destructure namespace imports as well?: If chosen, namespace imports like
import * as Reactwill also be converted. By default, it's false, so only default imports (import React) are converted.
npx react-codemod update-react-imports <path>- Determine if mixins are convertible. We only transform a
createClasscall to an ES6 class component when:
- There are no mixins on the class, or
options['pure-component']is true, themixinsproperty is an array and it only contains pure render mixin (the specific module name can be specified usingoptions['mixin-module-name'], which defaults toreact-addons-pure-render-mixin)
- Ignore components that:
- Call deprecated APIs. This is very defensive, if the script finds any identifiers called
isMounted,getDOMNode,replaceProps,replaceStateorsetPropsit will skip the component - Explicitly call
this.getInitialState()and/orthis.getDefaultProps()since an ES6 class component will no longer have these methods - Use
argumentsin methods since arrow functions don't havearguments. Also please notice thatargumentsshould be very carefully used and it's generally better to switch to spread (...args) instead - Have inconvertible
getInitialState(). Specifically if you have variable declarations likevar props = ...and the right hand side is notthis.propsthen we can't inline the state initialization in theconstructordue to variable shadowing issues - Have non-primitive right hand side values (like
foo: getStuff()) in the class spec
- Transform it to an ES6 class component
- Replace
var A = React.createClass(spec)withclass A extends React.Component {spec}. If a component uses pure render mixin and passes the mixins test (as described above), it will extendReact.PureComponentinstead - Remove therequire/importstatement that imports pure render mixin when it's no longer being referenced - Pull out all statics defined on
staticsplus the few special cased statics likechildContextTypes,contextTypes,displayName,getDefaultProps(), andpropTypesand transform them tostaticproperties (static propTypes = {...};) - IfgetDefaultProps()is simple (i.e. it only contains a return statement that returns something) it will be converted to a simple assignment (static defaultProps = ...;). Otherwise an IIFE (immediately-invoked function expression) will be created (static 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 —getDefaultPropsshould not contain any side-effects - Transform
getInitialState()- If there's nogetInitialState()or thegetInitialState()function is simple (i.e., it only contains a return statement that returns something) then we don't need a constructor;statewill be lifted to a property initializer (state = ...;)- However, if the RHS of
returncontains references tothisother thanthis.propsand/orthis.context, we can't be sure about what you'll need fromthis. We need to ensure that our property initializers' evaluation order is safe, so we deferstate's initialization by moving it all the way down until all other property initializers have been initialized - IfgetInitialState()is not simple, we create aconstructorand convertgetInitialState()to an assignment tothis.state constructoralways havepropsas the first parameter- We only put
contextas the second parameter when (one of) the following things happen ingetInitialState():- It accesses
this.context, or - There's a direct method call
this.x(), or thisis referenced alone
- It accesses
- Rewrite accesses to
this.propstopropsand accesses tothis.contexttocontextsince the values will be passed asconstructorarguments- Remove simple variable declarations like
var props = this.props;andvar context = this.context
- Remove simple variable declarations like
- Rewrite top-level return statements (
return {...};) tothis.state = {...}- Add
return;after the assignment when the return statement is part of a control flow statement (not a direct child ofgetInitialState()'s body) and not in an inner function declaration
- Add
- However, if the RHS of
- Transform all non-lifecycle methods and fields to class property initializers (like
onClick = () => {};). All your Flow annotations will be preserved - It's actually not necessary to transform all methods to arrow functions (i.e., to bind them), but this behavior is the same ascreateClass()and we can make sure that we won't accidentally break stuff - Generate Flow annotations from
propTypesand put it on the class (this only happens when there's/* @flow */in your code andoptions['flow']istrue)
- Flow actually understands
propTypesincreateClasscalls but not ES6 class components. Here the transformation logic is identical to how Flow treatspropTypes - Notice that Flow treats an optional propType as non-nullable
- For example,
foo: React.PropTypes.numberis valid when you pass{},{foo: null}, or{foo: undefined}as props at runtime. However, when Flow infers type from acreateClasscall, only{}and{foo: undefined}are valid;{foo: null}is not. Thus the equivalent type annotation in Flow is actually{foo?: number}. The question mark on the left hand side indicates{}and{foo: undefined}are fine, but whenfoois present it must be anumber
- For example,
- For
propTypesfields that can't be recognized by Flow,$FlowFixMewill be used
React.createClassis no longer present in React 16. So, if acreateClasscall cannot be converted to a plain class, the script will fallback to using thecreate-react-classpackage.
- Replaces
React.createClasswithReactCreateClass. - Adds a
requireorimportstatement forcreate-react-class. The import style is inferred from the import style of thereactimport. The default module name can be overridden with the--create-class-module-nameoption. - Prunes the
reactimport if there are no more references to it.
npx react-codemod class <path>To pass more options directly to jscodeshift, use --jscodeshift="...". For example:
npx react-codemod --jscodeshift="--run-in-band --verbose=2"See all available options here.
Options to recast's printer can be provided
through jscodeshift's printOptions command line argument
npx react-codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"If you're not explicitly importing React in your files (eg: if you're loading React with a script tag), you should add --explicit-require=false.
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.
react-codemod is MIT licensed.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent