Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vslinko/babel-plugin-react-require
Babel plugin that adds React import declaration if file contains JSX tags
https://github.com/vslinko/babel-plugin-react-require
babel babel-plugin react
Last synced: 7 days ago
JSON representation
Babel plugin that adds React import declaration if file contains JSX tags
- Host: GitHub
- URL: https://github.com/vslinko/babel-plugin-react-require
- Owner: vslinko
- License: mit
- Created: 2015-06-09T11:56:49.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-07-23T07:57:00.000Z (5 months ago)
- Last Synced: 2024-10-30T03:41:23.717Z (about 1 month ago)
- Topics: babel, babel-plugin, react
- Language: JavaScript
- Homepage:
- Size: 343 KB
- Stars: 159
- Watchers: 2
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-babel - react-require - Adds React import declaration if file contains JSX tags. (Plugins / React)
- awesome-f2e-libs - **babel-plugin-react-require** - 自动为 jsx 语法加 react 引用。 (babel / 非 JavaScript 编译工具)
- awesome-fe - **babel-plugin-react-require** - 自动为 jsx 语法加 react 引用。 (babel / 非 JavaScript 编译工具)
README
# babel-plugin-react-require
Babel plugin that adds React import declaration if file contains JSX tags.
This plugin is only about stateless components that doesn't extends `React.Component`.
If you want to use any other React functions then you should import their by yourself.## Example
Your `component.js` that contains this code:
```js
export default function Component() {
return (
);
}
```will be transpiled into something like this:
```js
import React from 'react';export default function Component() {
/* this part will be transpiled by babel itself as usual */
return (
React.createElement('div')
);
}
```## Usage
* Install `babel-plugin-react-require`.
```
npm install babel-plugin-react-require --save-dev
```* Add `react-require` into `.babelrc`. This plugin should be defined before `transform-es2015-modules-commonjs` plugin because it's using ES2015 modules syntax to import `React` into scope.
```json
{
"plugins": [
"react-require"
]
}
```