1 | # 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.
|