diff --git a/README.md b/README.md index 19499de1..c390f8b9 100644 --- a/README.md +++ b/README.md @@ -15,52 +15,91 @@ APIs. ### Included Scripts -`create-element-to-jsx` converts calls to `React.createElement` into JSX elements. +#### `class` - * `jscodeshift -t react-codemod/transforms/create-element-to-jsx.js ` +Transforms `React.createClass` calls into ES2015 classes. -`findDOMNode` 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. +```sh +jscodeshift -t react-codemod/transforms/class.js +``` - * `jscodeshift -t react-codemod/transforms/findDOMNode.js ` + * If `--no-super-class` is specified it will not extend + `React.Component` if `setState` and `forceUpdate` aren't being called in a + class. We do recommend always extending from `React.Component`, especially + if you are using or planning to use [Flow](http://flowtype.org/). Also make + sure you are not calling `setState` anywhere outside of your component. + +#### `create-element-to-jsx` + +Converts calls to `React.createElement` into JSX elements. + +```sh +jscodeshift -t react-codemod/transforms/create-element-to-jsx.js +``` + +#### `findDOMNode` + +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. + +```sh +jscodeshift -t react-codemod/transforms/findDOMNode.js +``` + +#### `pure-component` -`react-to-react-dom` 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. +```sh +jscodeshift -t react-codemod/transforms/pure-component.js +``` - * `jscodeshift -t react-codemod/transforms/react-to-react-dom.js ` - * 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. +#### `pure-render-mixin` -`pure-render-mixin` 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` +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` + +```sh +jscodeshift -t react-codemod/transforms/pure-render-mixin.js +``` - * `jscodeshift -t react-codemod/transforms/pure-render-mixin.js ` * If `--mixin-name=` is specified it will look for the specified name instead of `PureRenderMixin`. Note that it is not possible to use a namespaced name for the mixin. `mixins: [React.addons.PureRenderMixin]` will not currently work. -`class` transforms `React.createClass` calls into ES2015 classes. +#### `react-to-react-dom` - * `jscodeshift -t react-codemod/transforms/class.js ` - * If `--no-super-class` is specified it will not extend - `React.Component` if `setState` and `forceUpdate` aren't being called in a - class. We do recommend always extending from `React.Component`, especially - if you are using or planning to use [Flow](http://flowtype.org/). Also make - sure you are not calling `setState` anywhere outside of your component. +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. -These three scripts take an option `--no-explicit-require` if you don't have a -`require('React')` statement in your code files and if you access React as a -global. +```sh +jscodeshift -t react-codemod/transforms/react-to-react-dom.js +``` + + * 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. + +#### `sort-comp` + +Reorders React component methods to match the [ESLint](http://eslint.org/) +[react/sort-comp +rule](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md), +specifically with the [tighter constraints of the Airbnb style +guide](https://github.com/airbnb/javascript/blob/6c89f958/packages/eslint-config-airbnb/rules/react.js#L47-L57). + +```sh +jscodeshift -t react-codemod/transforms/sort-comp.js +``` ### Explanation of the ES2015 class transform @@ -96,6 +135,7 @@ global. 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)` @@ -112,4 +152,6 @@ The constructor logic is as follows: Options to [recast](https://github.com/benjamn/recast)'s printer can be provided through the `printOptions` command line argument - * `jscodeshift -t transform.js --printOptions='{"quote":"double"}'` +```sh +jscodeshift -t transform.js --printOptions='{"quote":"double"}' +```