Create React App 2.0: What's New?

TL;DR: - In this article, we are going to go over the new updates and features added in the major release of the create-react-app tool. We will go over the changes that ReactJS announced and what we can find in this great update. We will also go over the addition of TypeScript support and how that can benefit your project.

Create React App 2.0 - The Big Reveal

On October 1, 2018, ReactJS tweeted their release announcement of Create React App 2.0.

We’ve just released Create React App 2.0, including a year’s worth of improvements. https://t.co/O2AjlHOUjppic.twitter.com/sV8YbY7IED

— React (@reactjs) October 2, 2018

The Useful Create React App

Once released, developers were excited, to say the least. If you have used ReactJS, chances are you have used the bash command:

create-react-app name-of-app

Once that command starts running, you get to sit back and relax. You will see that ReactJS is taking care of all the setup and configuration. Once it’s finished, the package.json is compiled, starting dependencies are installed, and it gives you the initial project structure. What’s in this new and flashy Create React App 2.0? Let’s check it out!

"On October 1, 2018, ReactJS tweeted their release announcement of Create React App 2.0. Once released, developers were excited, to say the least."

Tweet This

Sass and CSS Modules

Have you ever had to install Sass loaders yourself? Have you had to configure Sass throughout your project yourself? Well now, in Create React App 2.0, you can get Sass running in your project with a simple bash command and some file name changes. Run:

npm install node-sass

Change your src/App.css to src/App.scss and make sure to update that file name in the top part of src/App.js and you are ready to use and reuse your stylesheets. It’s great!

Babel 7

Babel released their Babel 7 version this year as well and it did not take long for React to switch over. You can learn all about the new Babel 7 features here. Babel is important because it converts ES6 into code that browsers can read. Babel 7 is faster, can now parse TypeScript syntax, and even gives support for the React fragment syntax.

Want to learn more about React fragments? Dive into the React docs on Fragments.

Webpack 4

React, having always used Webpack, has now updated to Webpack 4. Webpack 4 is much faster, decreases your build time, and allows you to set up a particular environment whether it's development or production.

In short, it is a module bundler for JavaScript applications and version 4 splits the bundles into a more intelligent and better performant way. There is so much that goes with Webpack 4, if you want to learn more about it, you can visit the Webpack website here.

"React has now updated to Webpack 4, a module bundler for JavaScript applications."

Tweet This

Jest 23

When Create React App 2.0 came out, they launched it with that latest version of Jest. Jest 23 is more stable and much quicker, which will help you when running tests. You’ll feel more confident with more immediate feedback and reliable results.

Jest is an open-source testing framework that has just been updated to version 23. It has some great new features. One of those updates is the new watch menu option called Interactive Snapshot Mode. You are able to look through each snapshot and review your failed ones. While reviewing you can choose to update or skip each one. Jest has a great list of some of the updates that you can find here on Jest’s blog.

PostCSS

PostCSS, a great tool with over 200 custom plugins has been added to Create React App 2.0. By using JavaScript, you are able to easily transform your CSS. Create React App did not have this neat feature, but the team at React thought that adding this in would be a great for developers. I would have to agree!

If you were to head over to PostCSS.org you would see a list of features that come with PostCSS.

• Increased code readability
• Converts modern CSS into a more readable version for browsers
• Uses CSS Modules which keeps all class and animation names local
• Utilizes stylelint, a modern CSS linter
• Offers a powerful grid system

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

Imagine being able to use a third-party platform like Apollo, MDX, or Relay Modern without extra configuration or setup. There is no longer the issue of being able to use Babel Macros without ejecting first, Create React App 2.0 is taking care of that setup for us.

Check out this tutorial on how to create a React app with MDX.

SVG

We have all seen an SVG tag:

<svg width="100" height="100">
   <circle cx=“50” cy=“50” r=“40” stroke=“blue” stroke-width=“5” fill="black" />
</svg>

This one is a simple circle but some SVG tags can get pretty long and confusing. SVG’s are great because they allow for cleaner looking lines, richer color, and change your images into code.

What if I told you that now you can import an SVG as a React component?

Simply import the component at the top:

import SVGIcon from "./svgicon";

And use it down within the file:

<SVGIcon name="image" width={50} fill={red} /> or <SVGIcon />

This can give a lot of flexibility in where you use your SVG’s and allows for better readability.

Yarn Plug’n’Play

Hmmm, getting rid of the node_modules seems far-fetched but this experimental Yarn Plug’n’Play allows for just that. If you look at the bullet points in this GitHub PR conversation, you’ll see that there are some awesome aspects to it:

• Installs ran using Plug'n'Play are up to 70% faster than regular ones.
• Starting from this PR, Yarn will now be on the path to make yarn install a no-op on CI (Continuous Integration).
• Yarn will now be able to tell you precisely when you forgot to list packages in your dependencies.
• Your applications will boot faster through a hybrid approach of static resolutions.

This is something that if you want to try out in your React project, go ahead. This feature is just a fun new add-on that is completely optional.

Here you'll see Dan Abramov trying out Yarn Plug-n-Play:

I’m trying out Yarn Plug’n’Play and it’s pretty incredible. This GIF is not speeded up. I literally created a project in five seconds (on a warm cache). No node_modules. It works. pic.twitter.com/AjJP5vXxEi

— Dan Abramov (@danabramov) <a href="https://twitter.com/danabramov/status/1047583342072406022?ref_src=twsrc%5Etfw">October 3, 2018</a>

Proxy Implementation

Want to configure your own proxy? Create React App 2.0 let’s you do that now!

All you need to do is install the dependency:

npm install http-proxy-middleware

And then create a file called src/setupProxy.js. Once you import that dependency, you are ready to go! It’s that easy to get it started!

Use packages written for latest Node versions

Use any Node version package and with the help of Babel 7 and Webpack 4, it won’t break the build. You will not need to do any addition configuration and will feel confident that it’s being bundled correctly.

A Smaller CSS Bundle

Chances are you are going to be pointing your project towards modern browsers. If you decide to only target those, maybe a smaller CSS bundle would be beneficial for your project and you could experience faster load times by making fewer requests.

Avoid targeting the following:

-webkit -ms

in your CSS and that will help in keeping those bundled. Instead point the browsers to the package.json.

Service Workers

Service workers are now opt-in and are built using Google’s Workbox. Workbox is a JavaScript library that gives offline support to your project. It can help with your project’s performance and resilience by caching assets such as:

• Fonts
• Images
• JavaScript
• CSS
• Other files

The Addition of TypeScript

TypeScript, an Object-oriented programming language, can be beneficial to use versus JavaScript. Some strong benefits of using TypeScript are:

• It can help find errors more efficiently.
• Checks for "types" being correct.
• Same syntax as JavaScript, so easy to start with.

When starting your React project with create-react-app, simply add to the bash command:

--typescript

to add TypeScript to your project.

Add TypeScript To Create React App Project

There are two ways to get TypeScript active in your project.

Add it into an already existing project:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or add it in at the beginning of a new project:

npx create-react-app name-of-app --typescript

Files that end in .js change to .tsx and you are good to go.

src/index.js --> src/index.tsx

If you add TypeScript to an already existing project, be sure to restart your development server to get the new changes going. You can find the documentation on this new TypeScript addition here.

Moving Forward with Create React App 2.0

With React’s new Create React App 2.0 being released, the next thought is, “Should I update all my past projects to 2.0?”. Unless it’s broken, just leave it as is. But in the future, when using the command create-react-app to start your project, you’ll know you have so many new features to help you build an amazing project.

To find out which version of Create React App you are using in a particular project, head on over to your package.json and find this line telling you which version you are currently utilizing:

"react-scripts": "2.0.3"

This is also the place where you would update to 2.0 if desired.

Happy coding!