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: about 2 months 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: 2023-11-02T06:04:42.000Z (11 months ago)
• Last Synced: 2024-04-14T10:15:38.638Z (5 months ago)
• Topics: babel, babel-plugin, react
• Language: JavaScript
• Homepage:
• Size: 334 KB
• Stars: 161
• Watchers: 2
• Forks: 18
• 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"

  ]

}

```