When JSX is used, automatically import 'react' and createElement appropriately

Author: jayphelps

config/babel.dev.js

@@ -41,6 +41,16 @@ module.exports = {
       // Resolve the Babel runtime relative to the config.
       // You can safely remove this after ejecting:
       moduleName: path.dirname(require.resolve('babel-runtime/package'))
+    }],
+    // Turns JSX into createElement() calls
+    [require.resolve('babel-plugin-transform-react-jsx'), {
+      pragma: 'createElement',
+    }],
+    // Import react automatically, as need, when JSX is used
+    [require.resolve('babel-plugin-jsx-pragmatic'), {
+      module: 'react',
+      import: 'createElement',
+      export: 'createElement'
     }]
   ]
 };

config/babel.prod.js

@@ -39,6 +39,16 @@ module.exports = {
       // You can safely remove this after ejecting:
       moduleName: path.dirname(require.resolve('babel-runtime/package'))
     }],
+    // Turns JSX into createElement() calls
+    [require.resolve('babel-plugin-transform-react-jsx'), {
+      pragma: 'createElement',
+    }],
+    // Import react automatically, as need, when JSX is used
+    [require.resolve('babel-plugin-jsx-pragmatic'), {
+      module: 'react',
+      import: 'createElement',
+      export: 'createElement'
+    }]
     // Optimization: hoist JSX that never changes out of render()
     // Disabled because of issues:
     // * https://github.com/facebookincubator/create-react-app/issues/525

config/eslint.js

@@ -190,7 +190,6 @@ module.exports = {
     'react/no-deprecated': 'warn',
     'react/no-direct-mutation-state': 'warn',
     'react/no-is-mounted': 'warn',
-    'react/react-in-jsx-scope': 'warn',
     'react/require-render-return': 'warn',
 
     // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules

package.json

@@ -33,9 +33,11 @@
     "babel-eslint": "6.1.2",
     "babel-jest": "15.0.0",
     "babel-loader": "6.2.5",
+    "babel-plugin-jsx-pragmatic": "1.0.2",
     "babel-plugin-transform-class-properties": "6.11.5",
     "babel-plugin-transform-object-rest-spread": "6.8.0",
     "babel-plugin-transform-react-constant-elements": "6.9.1",
+    "babel-plugin-transform-react-jsx": "6.8.0",
     "babel-plugin-transform-regenerator": "6.14.0",
     "babel-plugin-transform-runtime": "6.15.0",
     "babel-preset-latest": "6.14.0",

template/src/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 

template/src/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';