Improve readme

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 <file>`
+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 <file>
+```
 
- * `jscodeshift -t react-codemod/transforms/findDOMNode.js <file>`
+ * 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 <file>
+```
+
+#### `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 <file>
+```
+
+#### `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 <file>
+```
 
- * `jscodeshift -t react-codemod/transforms/react-to-react-dom.js <file>`
- * 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 <file>
+```
 
- * `jscodeshift -t react-codemod/transforms/pure-render-mixin.js <file>`
  * If `--mixin-name=<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 <file>`
- * 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 <file>
+```
+
+ * 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 <file>
+```
 
 ### 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 <file> --printOptions='{"quote":"double"}'`
+```sh
+jscodeshift -t transform.js <file> --printOptions='{"quote":"double"}'
+```