diff --git a/config/babel.dev.js b/config/babel.dev.js index d122f108150..d8cda417877 100644 --- a/config/babel.dev.js +++ b/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' }] ] }; diff --git a/config/babel.prod.js b/config/babel.prod.js index f53094ababd..d1f861d0e16 100644 --- a/config/babel.prod.js +++ b/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 diff --git a/config/eslint.js b/config/eslint.js index 72ba9eb52bb..852418b7853 100644 --- a/config/eslint.js +++ b/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 diff --git a/package.json b/package.json index a6bf6f384ab..341b6ec702b 100644 --- a/package.json +++ b/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", diff --git a/template/src/App.js b/template/src/App.js index d7d52a7f38a..3702bece368 100644 --- a/template/src/App.js +++ b/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'; diff --git a/template/src/index.js b/template/src/index.js index 54c5ef1a427..4cde536003a 100644 --- a/template/src/index.js +++ b/template/src/index.js @@ -1,4 +1,3 @@ -import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css';