https://github.com/neolegends/babel-plugin-transform-react-create-element
Shorten JSX `React.createElement` calls using a local variable
https://github.com/neolegends/babel-plugin-transform-react-create-element
babel-plugin jsx react
Last synced: about 1 month ago
JSON representation
Shorten JSX `React.createElement` calls using a local variable
- Host: GitHub
- URL: https://github.com/neolegends/babel-plugin-transform-react-create-element
- Owner: NeoLegends
- License: mit
- Created: 2020-04-16T15:11:58.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-20T11:34:38.000Z (about 6 years ago)
- Last Synced: 2026-04-30T16:33:33.968Z (about 1 month ago)
- Topics: babel-plugin, jsx, react
- Language: TypeScript
- Size: 149 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-transform-react-create-element
Shorten JSX `React.createElement` calls using a local variable.
Compiles
```jsx
import React from 'react';
const Component = () => (
Hello, World!
);
```
to
```jsx
import React from 'react';
const _createElement = React.createElement;
const Component = () => (
_createElement('div', {}, 'Hello, World!')
);
```
instead of
```jsx
import React from 'react';
const Component = () => (
React.createElement('div', {}, 'Hello, World!')
);
```
## How?
Install via `npm install -D babel-plugin-transform-react-create-element` or `yarn add -D babel-plugin-transform-react-create-element`.
In your `.babelrc`:
```
{
"plugins": [
"babel-plugin-transform-react-create-element",
]
}
```
It works by translating any found calls to `React.createElement` to use the newly inserted local variable instead.
As such, it automatically respects any existing JSX pragmas in the file and does not interfer with their use.
## Why?
Performance. In particular in conjunction with the way webpack transforms imports.
Also created to solve https://github.com/facebook/create-react-app/issues/5435.
## License
MIT
Loosely based on https://github.com/facebook/create-react-app/pull/6219.