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

README.md

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.

Upgrade guide for TypeScript users:

• update to typescript >= 4.1.0 which supports the new JSX factories: https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories
• in your tsconfig.json: change jsx to react-jsxdev (development) or react-jsx (production)

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

@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?

Here you go: facebook/create-react-app#9724

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?

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