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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user