Introducing Create-React-App Version 2.0

So what’s New in Create-React-App V 2?

Introducing the new features of Create React App V 2.0: A year of improvement in a single dependency update…

what you see when you run npm start

Create React App is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project — Guil Hernandez

Create-React-App which is arguably one of the most popular boilerplates of all times with 56,000 :star:️ on github released her second version (2.0.3) few days ago; with a whole lot of improvements. Even though we all know react does not require build dependencies, it however depends on a lot of important tools to make the magic we see when we run npm start. Some of these tools include Babel, Webpack and Jest and a host of others which handle making code lighter for production, all kinds of testing and helping code to be modular and generally ease the way we code...

Over time, these tools get updated to newer versions and it starts to become a pain to keep up with create-react-app and the new versions of its supporting tools.

So the team of 167+ contributors who dedicated their lives to the maintenance of our lovely boilerplate came up with this very powerful version.

In this article, we shall quickly look at what’s new in create-react-app v 2.0.3 .

Updates

The following tools were updated to the latest versions with their relative support and bug fixes.

• Babel 7 : This newest babel update which has incorporated transpiling shiny new react features like fragments has become compatible with create-react-app 2. yay!

• Webpack 4: we all know how fast this new version 4 is and how it intuitively modulates bundles and let us not forget the mode shiny feature. These features are all now supported bug-free on this new create-react-app version.

• Jest 23: jest became really fast with jest 23 and also got this really new and shiny feature of the interactive snapshot mode, such a life saver!

More Styling Options

Out-the-box usage is now available for sass and css modules.

Sass:In create-react-app version 1.x we saw that sass was supported alright, but it demanded some initial configurations and even some packages to make sure all things ran as expected. Now with the new version 2.0, you just have to do npm install node-sass and rename css files and boom!

CSS Modules:with css modules, you can use a css class in a number of files without errors. This new version makes this available without any configuration.

Lighter CSS Bundles

With the new create-react-app version, you can target modern browser clients specifically in the browser list specification of your package.json file. This makes the bundles really smaller by not always modifying styles to suit ms and webkit unless it is needed.

Yarn Plug’n’Play Mode

This feature remimds me of how the new Vue 3.x version is structured for the minimalist developer. Here, you can pick the modules to a kind of table file instead of having node_modules folder.

Share and reuse components

Since boilerplating is all about time-saving, you can use Bit to quickly share the components in any component directory into a reusable collection. Components can then be discovered and used in multiple applications. With CRA v2 this workflow is made even smoother than before.

Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms

We remember the problem of using Babel Macros in the first version of create-react-app, the difficulties of use without ejecting. In this new and shiny version, third party libraries say Apollo, MDX, Relay Modern now work out f the box without any additional configurations except the ones in their different docs.

Packages for Node Versions

Now that we have Webpack 4 and Babel 7 supported, we can pretty much use any Node version we want to without ever worrying about breaking the build. Bundling and Transpiling code out of the box is now going to be handled with Babel and Webpack and smoothly still.

SVG as a React Component

Normally during SVG imports we used to have to use the SVG as source attribute for the image in the first version of create-react-app; Now in this new version, we simply import and use as attributes directly in your markup.

Service Worker and Workbox

We are now in the era of Native App-yness on the web, a lot of web applications are now made to become really progressive. Google has an awesome tool that really facilitates building Progressive Web Apps called Workbox . In create-react-app version 2, service workers are optional (this is owing to the fact that debugging deployments can be a pain).

List of Some Breaking Changes

• No more support for Node version 6 :stuck_out_tongue_winking_eye:.
• Jsdom is now included in the default jest environment.
• All formerly existing support for .mjs has been cut pending the time when the ecosystem stabilizes.
• Support for older browsers such as Internet Explorer 9 to Internet Explorer 11 is now optional with a separate package
• PropType definitions have been automatically removed from all production builds.
• Custom proxy module support replaces initial support for specifying object as proxy setting.
• Require.ensure() has been disabled.
• Code splitting with import() now acts closer to its specification.

Starting a New Project

If you want to start a new project, simply run create-react-app; it would automatically use the new version of the template without you having to specify it.

Although, if you do not want to use the new version (which is now the default version) you can pass in the following arguments:

Upgrading from 1.x to 2.x

To upgrade a non-ejected project from version 1 to version 2

• go to the root folder of the project.
• open package.json file
• go under dependencies and locate “react-scripts”
• change the version to 2.0.3
• run npm install (or yarn install if you use yarn)

If you spot any issues, check out the more detailed migration instructions in the release notes .

To Upgrade or Not to Upgrade

Yes! upgrade to 2.x if you are starting a brand new project. You should however stick to 1.x if you are in the middle of a 1.x project already as there are no major dangers of staying put.

Did you know?

You can share react components easily between projects in the cloud withBit.

Bit helps you turn your components into building blocks which can be organized and used across your different projects and apps.

It’s workflow lets you seamlessly isolate components from different projects, organize them for your team and sync them across your projects, while making changes to your components’ code from any of these projects.

Here is how it works.

Conclusion

Here is the official blog post . It is rumored that the very next 2.x version will ship with support for typescript. This has been a major developer concern for a while now and the team is working strongly to make is a reality before the year runs out :speak_no_evil: