feat: use new jsx transform (#192)

This updates the @babel/preset-react configuration to use the new JSX transform, which no longer requires React to be imported into source files.

It also updates our eslint-config to no longer require that React be imported into source files as well.

This works because our babel (7.9.0+) and react (16.14.0+) versions are high enough that they can take advantage of the new JSX transform.

BREAKING CHANGE: Note that this means this version of frontend-build has a new peer dependency on react > 16.14.0, to ensure that it has the new JSX transform available.

.eslintignore

@@ -0,0 +1,5 @@
+coverage/*
+dist/
+node_modules/
+__mocks__/
+__snapshots__/

config/babel.config.js

@@ -1,7 +1,11 @@
 module.exports = {
   presets: [
     '@babel/preset-env',
-    '@babel/preset-react',
+    [
+      '@babel/preset-react', {
+        runtime: 'automatic',
+      },
+    ],
   ],
   plugins: [
     '@babel/plugin-proposal-object-rest-spread',

example/package.json

@@ -14,8 +14,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "devDependencies": {
     "react-test-renderer": "16.13.1"

example/src/App.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import appleUrl, { ReactComponent as Apple } from './apple.svg';
 import appleImg from './apple.jpg';
 

example/src/App.test.jsx

@@ -1,5 +1,4 @@
 /* eslint-disable global-require */
-import React from 'react';
 import renderer from 'react-test-renderer';
 import App from './App';
 

example/src/index.jsx

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

package.json

@@ -32,7 +32,7 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.10.4",
     "@babel/preset-react": "7.10.4",
-    "@edx/eslint-config": "1.1.6",
+    "@edx/eslint-config": "1.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.2",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.2.6",
@@ -81,5 +81,8 @@
   "devDependencies": {
     "@commitlint/cli": "11.0.0",
     "@commitlint/config-angular": "11.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.14.0 || ^17.0.0"
   }
 }