UNPKG

1.06 kBMarkdownView Raw
1# babel-plugin-transform-react-constant-elements
2
3> Treat React JSX elements as value types and hoist them to the highest scope
4
5## Example
6
7**In**
8
9```js
10const Hr = () => {
11 return <hr className="hr" />;
12};
13```
14
15**Out**
16
17```js
18const _ref = <hr className="hr" />;
19
20const Hr = () => {
21 return _ref;
22};
23```
24
25**Deopts**
26
27- **Spread Operator**
28
29 ```js
30 <div {...foobar} />
31 ```
32
33- **Refs**
34
35 ```js
36 <div ref="foobar" />
37 <div ref={node => this.node = node} />
38 ```
39
40## Installation
41
42```sh
43npm install --save-dev babel-plugin-transform-react-constant-elements
44```
45
46## Usage
47
48### Via `.babelrc` (Recommended)
49
50**.babelrc**
51
52```json
53{
54 "plugins": ["transform-react-constant-elements"]
55}
56```
57
58### Via CLI
59
60```sh
61babel --plugins transform-react-constant-elements script.js
62```
63
64### Via Node API
65
66```javascript
67require("babel-core").transform("code", {
68 plugins: ["transform-react-constant-elements"]
69});
70```
71
72## References
73
74* [[facebook/react#3226] Optimizing Compiler: Reuse Constant Value Types like ReactElement](https://github.com/facebook/react/issues/3226)