Update React transform READMEs from babel.github.io [skip ci] (#4903)

* Update React transform READMEs from babel.github.io [skip ci]

* Drop inline-elements polyfill message (move to website)
This commit is contained in:
Brian Ng
2016-11-28 19:50:17 -06:00
committed by Henry Zhu
parent 51e8fd1868
commit 4a14202e92
7 changed files with 182 additions and 20 deletions

View File

@@ -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
<Baz foo="bar" key="1"></Baz>;
```
**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
<Foo ref="bar" />
<Foo {...bar} />
```
## 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)