New features of Create-React-App version 3.0

Finally the stable official support for React Hooks!

NOTE: 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.

Create-React-App which is arguably one of the most popular boilerplates of all times with 67,000 stars and used by over 5,000 projects on GitHub released its third version (3.0.0) a 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.

NOTE: 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 the new features in Create-React-App v 3.0.0

Support for React hooks

React introduced Hooks officially in version 16.8 which allowed changes to the way components can be written introducing things like stateful logic in functional components usually meant for classes alone. This new development encourages writing purer components and more optimal React code. However, there are rules set in place by the React team to prevent abuse of hooks and these rules are that:

• Hooks cannot be called from regular functions but only from functional components.
• Hooks are to be used only at the top level of your functional component and not inside nested functions or even conditional statement blocks.

In this new version, alongside the support of the use of Hooks, Create-React-App ships with an ESLint plugin called eslint-plugin-react-hooks that enforces these rules and other syntax conventions of hooks. This way, builds are sure to fail when any rule is broken. You can learn more about this plugin here and also how to make your IDE display these linting output here.

Linting support for TypeScript

Aside from the React hooks linting, this new version also ships with support to lint TypeScript code through the typescript-eslint plugin. You can see the list of rules enforced through this plugin in the link here or setup your IDE to reflect them from this guide. You can easily use TypeScript in your React application with a line of command:

    yarn create-react-app my-typescript-app --typescript

Browserlist support

You can now use the browserlist config in your React project’s package.json file to control the browser output of your JavaScript files. Another exciting thing is that one configuration can be used for the development environment and another entirely different one can be used for production. A typical example can be this:

json
1"browserslist": {
2        "production": [
3          ">0.2%",
4          "not dead",
5          "not op_mini all"
6        ],
7        "development": [
8          "last 1 chrome version",
9          "last 1 firefox version",
10          "last 1 safari version"
11        ]
12      }
Copy

Here, the production build will target all browsers that cover more than 0.2% of global usage which is almost every browser, while the development build will only target the last versions of Chrome, Firefox and Safari.

With this kind of clarity, you can install a babel polyfill as a project dependency and then import it in your root JavaScript file and browserlist will now include them when needed. By default, browserslist default targets a almost all browsers in production, you can change the default settings though from the guide here.

PostCSS Normalize support

This new version ships with support for Normalize.css so to handle a reset CSS, by default PostCSS Normalize will be used. It will use your browserlist settings to produce styles that fit each browser covered in the config. Remember to always add @import-normalizeat the beginning of any of your CSS files to activate it. Read more about this change here.

Absolute imports with jsconfig.json and tsconfig.json

So in this new version, we can now have a less stressful way to access import paths for our Node path environments, we no longer have to be bothered about all the paths complexities with slashes that becomes clumsy at some point. We can now have absolute import paths for both JavaScript and TypeScript files alike, this makes for more presentable code. To set this up, create a jsconfig.json file for JavaScript (or tsconfig.json for TypeScript) in the root directory and copy in the code below:

json
1{
2      "compilerOptions": {
3        "baseUrl": "src"
4      },
5      "include": ["src"]
6    }
Copy

With this your import statement that was initially like this:

    import Sidebar from 'project_name/src/components/Sidebar';

Can be as simple as this:

    import Sidebar from 'components/Sidebar';

Jest 24

This version also brings a Jest update to life. Jest is a unit testing framework that runs in a Node JS environment instead of a browser. From the old Jest version 23 to the new version 24.7.1, this new Jest version ships with a lot of new features including improved asset messages and logs, support for TypeScript and a lot of bug fixes.

Breaking changes

Some of these new features will introduce breaking changes to your project’s workflow and it is very important that you be aware.

• The --watchAll=false from Jest replaces the --no-watch flag which is now removed from the start script.
• Both the NODE_ENV and PUBLIC_URL status has now been changed into readonly.
• Custom functions has now been added to generate asset manifest.
• There are some differences in snapshot serialisation in Jest and it may lead to slight changes to your tests after upgrading.

The official change log for this version can be found here.

Conclusion

Now you have seen all the new features of the React popular boilerplate, my favorite is the browserlist support. Read the breaking changes and upgrade your version today. Happy hacking!