Skip to content

Instantly share code, notes, and snippets.

@iansu

iansu/README.md

Last active Oct 24, 2020
Embed
What would you like to do?
Using React 17 and the new JSX transform with Create React App 4.0 Alpha

Using React 17 and the new JSX transform with Create React App 4.0 Alpha

Create React App 4.0 is currently in alpha and supports using React 17 and the new JSX transform. To use it, follow these instructions.

Create a new app

Create a new app with npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

Update to React 17

Edit package.json in the new app and change the version numbers for react and react-dom to 17.0.0-rc.2 (the latest version of React 17 at the time of this writing). The updated versions should look like this:

  "react": "^17.0.0-rc.2",
  "react-dom": "^17.0.0-rc.2",

Disable ESLint rules

Create React App's current ESLint configuration will warn you when using JSX without importing React. You can disable these rules by updating the eslintConfig section in package.json. The updated config should look like this:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "react/jsx-uses-react": "off",
      "react/react-in-jsx-scope": "off"
    }
  },

Save your changes to package.json and run either npm install or yarn.

Remove React imports

Open src/App.js and delete the line import React from 'react' from the top of the file. Start your app (with either npm run start or yarn start) and everything should continue to work, even though you're no longer importing React!

Resources

For more information about the new JSX transform in React 17 see the post from the React Blog and the Babel release announcement.

@thetric

This comment has been minimized.

Copy link

@thetric thetric commented Sep 29, 2020

Upgrade guide for TypeScript users:

@iansu Will CRA 4.0 handle the switch from react-jsxdev to react-jsx automatically?

@iansu

This comment has been minimized.

Copy link
Owner Author

@iansu iansu commented Sep 29, 2020

@thetric we probably should try to handle that in a nice way since we autogenerate the tsconfig. Can you please open an issue for this so we can add it to the milestone for 4.0?

@thetric

This comment has been minimized.

Copy link

@thetric thetric commented Sep 29, 2020

@alissonmbr

This comment has been minimized.

Copy link

@alissonmbr alissonmbr commented Sep 30, 2020

Webpack 5 is coming soon, is current in v5.0.0-rc.3. There is plan to use webpack 5 on create-react-app 4? And also has plans to use webpack 5 Module Federation without ejecting?

@Hongbo-Miao

This comment has been minimized.

Copy link

@Hongbo-Miao Hongbo-Miao commented Sep 30, 2020

Thanks for the upgrading guide. Will give it a try!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.