diff --git a/packages/babel-plugin-transform-react-constant-elements/README.md b/packages/babel-plugin-transform-react-constant-elements/README.md
index e2c7e2cb99..562f4d77cf 100644
--- a/packages/babel-plugin-transform-react-constant-elements/README.md
+++ b/packages/babel-plugin-transform-react-constant-elements/README.md
@@ -1,11 +1,54 @@
# babel-plugin-transform-react-constant-elements
-Treat React JSX elements as value types and hoist them to the highest scope
+Hoists element creation to the top level for subtrees that are fully static, which reduces both allocations and calls to `React.createElement`. More importantly, it tells React that the subtree hasn't changed so React can completely skip it when reconciling.
+
+This transform **should be enabled only in production** (e.g., just before minifying your code) because although it improves runtime performance, it makes warning messages more cryptic.
+
+## Example
+
+**In**
+
+```js
+const Hr = () => {
+ return
this.node = node} />
+ ```
+
+- **Composite Components**
+
+ ```js
+ const ComponentA = () =>
;
+ ```
## Installation
```sh
-$ npm install babel-plugin-transform-react-constant-elements
+npm install babel-plugin-transform-react-constant-elements
```
## Usage
@@ -23,7 +66,7 @@ $ npm install babel-plugin-transform-react-constant-elements
### Via CLI
```sh
-$ babel --plugins transform-react-constant-elements script.js
+babel --plugins transform-react-constant-elements script.js
```
### Via Node API
@@ -33,3 +76,7 @@ require("babel-core").transform("code", {
plugins: ["transform-react-constant-elements"]
});
```
+
+## References
+
+* [[facebook/react#3226] Optimizing Compiler: Reuse Constant Value Types like ReactElement](https://github.com/facebook/react/issues/3226)
diff --git a/packages/babel-plugin-transform-react-display-name/README.md b/packages/babel-plugin-transform-react-display-name/README.md
index 1eeb49cda2..5bdd354bd2 100644
--- a/packages/babel-plugin-transform-react-display-name/README.md
+++ b/packages/babel-plugin-transform-react-display-name/README.md
@@ -5,7 +5,7 @@ Add displayName to React.createClass calls
## Installation
```sh
-$ npm install babel-plugin-transform-react-display-name
+npm install babel-plugin-transform-react-display-name
```
## Usage
@@ -23,7 +23,7 @@ $ npm install babel-plugin-transform-react-display-name
### Via CLI
```sh
-$ babel --plugins transform-react-display-name script.js
+babel --plugins transform-react-display-name script.js
```
### Via Node API
diff --git a/packages/babel-plugin-transform-react-inline-elements/README.md b/packages/babel-plugin-transform-react-inline-elements/README.md
index 8d3834c3d4..17ec1d9214 100644
--- a/packages/babel-plugin-transform-react-inline-elements/README.md
+++ b/packages/babel-plugin-transform-react-inline-elements/README.md
@@ -1,11 +1,46 @@
# babel-plugin-transform-react-inline-elements
-Turn JSX elements into exploded React objects
+Replaces the `React.createElement` function with one that is more optimized for production: `babelHelpers.jsx`.
+
+This transform **should be enabled only in production** (e.g., just before minifying your code) because although it improves runtime performance, it makes warning messages more cryptic and skips important checks that happen in development mode, including propTypes.
+
+## Example
+
+**In**
+
+```javascript
+
;
+```
+
+**Out**
+
+```javascript
+babelHelpers.jsx(Baz, {
+ foo: "bar"
+}, "1");
+
+/**
+ * Instead of
+ *
+ * React.createElement(Baz, {
+ * foo: "bar",
+ * key: "1",
+ * });
+ */
+```
+
+**Deopt**
+
+```js
+// The plugin will still use React.createElement when `ref` or `object rest spread` is used
+
+
+```
## Installation
```sh
-$ npm install babel-plugin-transform-react-inline-elements
+npm install babel-plugin-transform-react-inline-elements
```
## Usage
@@ -23,7 +58,7 @@ $ npm install babel-plugin-transform-react-inline-elements
### Via CLI
```sh
-$ babel --plugins transform-react-inline-elements script.js
+babel --plugins transform-react-inline-elements script.js
```
### Via Node API
@@ -33,3 +68,7 @@ require("babel-core").transform("code", {
plugins: ["transform-react-inline-elements"]
});
```
+
+## References
+
+* [[facebook/react#3228] Optimizing Compiler: Inline React Elements](https://github.com/facebook/react/issues/3228)
diff --git a/packages/babel-plugin-transform-react-jsx-compat/README.md b/packages/babel-plugin-transform-react-jsx-compat/README.md
index dee9fd8fdb..78cf95c320 100644
--- a/packages/babel-plugin-transform-react-jsx-compat/README.md
+++ b/packages/babel-plugin-transform-react-jsx-compat/README.md
@@ -2,10 +2,30 @@
Turn JSX into React Pre-0.12 function calls
+## Example
+
+**In**
+
+```javascript
+var profile =
+

+
{[user.firstName, user.lastName].join(' ')}
+
;
+```
+
+**Out**
+
+```javascript
+var profile = React.DOM.div(null,
+ React.DOM.img({ src: "avatar.png", "class": "profile" }),
+ React.DOM.h3(null, [user.firstName, user.lastName].join(" "))
+);
+```
+
## Installation
```sh
-$ npm install babel-plugin-transform-react-jsx-compat
+npm install babel-plugin-transform-react-jsx-compat
```
## Usage
@@ -23,7 +43,7 @@ $ npm install babel-plugin-transform-react-jsx-compat
### Via CLI
```sh
-$ babel --plugins transform-react-jsx-compat script.js
+babel --plugins transform-react-jsx-compat script.js
```
### Via Node API
diff --git a/packages/babel-plugin-transform-react-jsx-self/README.md b/packages/babel-plugin-transform-react-jsx-self/README.md
index 2a60a3b501..1d131d6f1c 100644
--- a/packages/babel-plugin-transform-react-jsx-self/README.md
+++ b/packages/babel-plugin-transform-react-jsx-self/README.md
@@ -5,12 +5,12 @@ should enable this transform in dev mode.
## Example
-###In
+### In
```
```
-###Out
+### Out
```
@@ -19,7 +19,7 @@ should enable this transform in dev mode.
## Installation
```sh
-$ npm install babel-plugin-transform-react-jsx-self
+npm install babel-plugin-transform-react-jsx-self
```
## Usage
@@ -37,7 +37,7 @@ $ npm install babel-plugin-transform-react-jsx-self
### Via CLI
```sh
-$ babel --plugins transform-react-jsx-self script.js
+babel --plugins transform-react-jsx-self script.js
```
### Via Node API
diff --git a/packages/babel-plugin-transform-react-jsx-source/README.md b/packages/babel-plugin-transform-react-jsx-source/README.md
index 002c1adbd9..bb4096e3e4 100644
--- a/packages/babel-plugin-transform-react-jsx-source/README.md
+++ b/packages/babel-plugin-transform-react-jsx-source/README.md
@@ -4,12 +4,12 @@ Adds source file and line number to JSX elements.
## Example
-###In
+### In
```
```
-###Out
+### Out
```
@@ -18,7 +18,7 @@ Adds source file and line number to JSX elements.
## Installation
```sh
-$ npm install babel-plugin-transform-react-jsx-source
+npm install babel-plugin-transform-react-jsx-source
```
## Usage
@@ -36,7 +36,7 @@ $ npm install babel-plugin-transform-react-jsx-source
### Via CLI
```sh
-$ babel --plugins transform-react-jsx-source script.js
+babel --plugins transform-react-jsx-source script.js
```
### Via Node API
diff --git a/packages/babel-plugin-transform-react-jsx/README.md b/packages/babel-plugin-transform-react-jsx/README.md
index 7534e19486..1a6ce1c1b4 100644
--- a/packages/babel-plugin-transform-react-jsx/README.md
+++ b/packages/babel-plugin-transform-react-jsx/README.md
@@ -2,10 +2,60 @@
Turn JSX into React function calls
+## Example
+
+### React
+
+**In**
+
+```javascript
+var profile =
+

+
{[user.firstName, user.lastName].join(' ')}
+
;
+```
+
+**Out**
+
+```javascript
+var profile = React.createElement("div", null,
+ React.createElement("img", { src: "avatar.png", className: "profile" }),
+ React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
+);
+```
+
+### Custom
+
+**In**
+
+```javascript
+/** @jsx dom */
+
+var { dom } = require("deku");
+
+var profile =
+

+
{[user.firstName, user.lastName].join(' ')}
+
;
+```
+
+**Out**
+
+```javascript
+/** @jsx dom */
+
+var dom = require("deku").dom;
+
+var profile = dom( "div", null,
+ dom("img", { src: "avatar.png", className: "profile" }),
+ dom("h3", null, [user.firstName, user.lastName].join(" "))
+);
+```
+
## Installation
```sh
-$ npm install babel-plugin-transform-react-jsx
+npm install babel-plugin-transform-react-jsx
```
## Usage
@@ -32,7 +82,7 @@ $ npm install babel-plugin-transform-react-jsx
### Via CLI
```sh
-$ babel --plugins transform-react-jsx script.js
+babel --plugins transform-react-jsx script.js
```
### Via Node API
@@ -42,3 +92,9 @@ require("babel-core").transform("code", {
plugins: ["transform-react-jsx"]
});
```
+
+## Options
+
+* `pragma` - Replace the function used when compiling JSX expressions (Defaults to `React.createElement`).
+ - Note that the `@jsx React.DOM` pragma has been deprecated as of React v0.12
+* `useBuiltIns` - When spreading props, use Object.assign instead of Babel's extend helper (Disabled by default).