Create-react-app was released in version 2.0 and 2 minor versions on September 26, 2018, and is currently 2.0.2

Version 2.0 was preceded by version 1.5.2, which was released in February 2018, a revolutionary change that came more than six months later.

While React itself does not require any build dependencies, it can be challenging to write a complex application without a fast test runner, producing minizer, and modular code base. From the first release, the Goal of the Create React App has been to help you focus on what matters most – your application code – and handle the build and test setup for you.

Many of the tools it relies on have since been released in new versions with new features and performance improvements: Babel 7, WebPack 4, and Jest 23. However, manually updating them and getting them to work together takes a lot of effort. This is exactly what the Create React App 2.0 contributors have been busy doing for the past few months: migrating configurations and dependencies so you don’t have to do it yourself.

Now that Create React App 2.0 is not available in beta, let’s see what’s new and how to try it out!

Pay attention to

Don't feel pressured to upgrade anything. If you are satisfied with the current feature set, performance, and reliability, you can continue with the current version! It might also be a good idea to stabilize version 2.0 a bit before switching to 2.0 in production.Copy the code

What is new

Here’s a short summary of the new features in this release:

  • 🎉 More options: You can use Sass and CSS modules directly.
  • 🐠 We updated Babel 7, including support for React fragment syntax and many bug fixes.
  • 📦 We updated to WebPack 4, which makes it smarter to automatically split JS packages.
  • 🃏 We updated to Jest 23, which includes the interactive mode for viewing snapshots.
  • 💎 You can use Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms.
  • 🌠 can now import SVG as a React component and use it in JSX.
  • 🐈 You can try removing the experimental Yarn Plug ‘n’ Play modenode_modules.
  • 🕸 You can now plug in your own proxy implementation in development to match your back-end API.
  • 🚀 You can now use packages written for the latest Version of Node without breaking the build.
  • 💄 If you only intend to target modern browsers, you can now choose to get smaller CSS packages.
  • 👷♀️ can optionally use Service Workers, which is built using Google’s Workbox.

All of these features are available out of the box – to enable them, follow the instructions below.

Use Create React App 2.0 to launch the project

You don’t need to update anything special. Starting today, when you run create-react-app it, version 2.0 of the template will be used by default. Have fun!

If for some reason you want to use the old 1.x template, you can implement create-react-app by passing –[email protected] as an argument.

Update the project to create React App 2.0

Upgrading to Create React App 2.0 should usually be simple. Package. json opens in your project’s root directory and finds React-scripts.

Then change its version to 2.0.3:

  // ... other dependencies ...
  "react-scripts": "The 2.0.3"
Copy the code

Run NPM install (or YARN, if you use it). For many projects, changing this line is enough to upgrade!

Here are some tips to get you started.

When you first run NPM start after the upgrade, you will receive a prompt asking which browsers you want to support. Press y to accept the default value. They are written to your package.json, and you can edit them at any time. If you’re only targeting modern browsers, creating a React App will use this information to generate smaller CSS packages.

If NPM Start still does not work properly after the upgrade, see the release notes for more detailed migration instructions. There are several major changes in this release, but their scope is limited, so they should not be combed for more than a few hours. Note that you can now choose to support older browsers to reduce the size of Polyfill.

If you’ve popped up before but now want to upgrade, a common solution is to find your popped commits (and any subsequent commits that change the configuration), restore them, upgrade, and then choose to pop up again. You now support out-of-the-box functionality (perhaps Sass or CSS modules?). It’s possible.

Pay attention to

Because there may be errors in the NPM, you may see warnings about unsatisfied peer dependencies. You should be able to ignore them. As far as we know, Yarn does not have this problem.Copy the code

Breakthrough change

Here is a short list of the major changes in this release:

  • Node6 is no longer supported. Upgrade to 8.x
  • Support for older browsers, such as IE 9 through IE 11, now has the option of using separate packages.
  • Import () Now the behavior of code splitting is closer to the norm, and require.ensure() is disabled.
  • The default Jest environment now contains JsDOM.
  • The support for specifying an object as a proxy setting has been replaced with support for custom proxy modules.
  • Support for.mjs extensions has been removed until the ecosystem around it stabilizes.
  • PropTypes definitions are automatically removed from production versions.

If any of these points matters to you, the 2.0.3 Release notes contain more details.

Translated from official Blog