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:
@@ -2,10 +2,60 @@
|
||||
|
||||
Turn JSX into React function calls
|
||||
|
||||
## Example
|
||||
|
||||
### React
|
||||
|
||||
**In**
|
||||
|
||||
```javascript
|
||||
var profile = <div>
|
||||
<img src="avatar.png" className="profile" />
|
||||
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
|
||||
</div>;
|
||||
```
|
||||
|
||||
**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 = <div>
|
||||
<img src="avatar.png" className="profile" />
|
||||
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
|
||||
</div>;
|
||||
```
|
||||
|
||||
**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).
|
||||
|
||||
Reference in New Issue
Block a user