Projekt

Obecné

Profil

Stáhnout (1.79 KB) Statistiky
| Větev: | Revize:
1 3a515b92 cagy
# babel-plugin-transform-react-jsx
2
3
> Turn JSX into React function calls
4
5
## Example
6
7
### React
8
9
**In**
10
11
```javascript
12
var profile = <div>
13
  <img src="avatar.png" className="profile" />
14
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
15
</div>;
16
```
17
18
**Out**
19
20
```javascript
21
var profile = React.createElement("div", null,
22
  React.createElement("img", { src: "avatar.png", className: "profile" }),
23
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
24
);
25
```
26
27
### Custom
28
29
**In**
30
31
```javascript
32
/** @jsx dom */
33
34
var { dom } = require("deku");
35
36
var profile = <div>
37
  <img src="avatar.png" className="profile" />
38
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
39
</div>;
40
```
41
42
**Out**
43
44
```javascript
45
/** @jsx dom */
46
47
var dom = require("deku").dom;
48
49
var profile = dom( "div", null,
50
  dom("img", { src: "avatar.png", className: "profile" }),
51
  dom("h3", null, [user.firstName, user.lastName].join(" "))
52
);
53
```
54
55
## Installation
56
57
```sh
58
npm install --save-dev babel-plugin-transform-react-jsx
59
```
60
61
## Usage
62
63
### Via `.babelrc` (Recommended)
64
65
**.babelrc**
66
67
Without options:
68
69
```json
70
{
71
  "plugins": ["transform-react-jsx"]
72
}
73
```
74
75
With options:
76
77
```json
78
{
79
  "plugins": [
80
    ["transform-react-jsx", {
81
      "pragma": "dom" // default pragma is React.createElement
82
    }]
83
  ]
84
}
85
```
86
87
### Via CLI
88
89
```sh
90
babel --plugins transform-react-jsx script.js
91
```
92
93
### Via Node API
94
95
```javascript
96
require("babel-core").transform("code", {
97
  plugins: ["transform-react-jsx"]
98
});
99
```
100
101
## Options
102
103
### `pragma`
104
105
`string`, defaults to `React.createElement`.
106
107
Replace the function used when compiling JSX expressions.
108
109
Note that the `@jsx React.DOM` pragma has been deprecated as of React v0.12
110
111
### `useBuiltIns`
112
113
`boolean`, defaults to `false`.
114
115
When spreading props, use `Object.assign` directly instead of Babel's extend helper.