create-react-app v3, What's new?

Celý článek

When you're looking to setup your React developer environment, create-react-app is one of the go to ways to go about it. This package allows you to do so with minimal configuration as it creates most of the boilerplate code needed to get you up and running. The React team recently unveiled version 3 of create-react-app and it brings some exciting new features increamenting on what was added on the previous releases.

https://twitter.com/iansu/status/1120402844815908865

Some of the things to look out in the latest release include:

• Jest 24
• Hooks support
• Typescript linting
• browserslist support in @babel/preset-env
• Absolute imports with jsconfig.json / tsconfig.json
• PostCSS Normalize

It's good to note that some of these features may cause breaking changes in existing projects so this is something to look out for if you'll be upgrading. Let's look at why we should be excited about each of the above features

Jest 24

This version of create-react-app has upgraded from Jest 23 to Jest 24 which introduces some exciting new testing features such as Typescript Support, Improved Assertion Messages, test.todo , fixes for some older issues among other things. You can read more about what changes were introduced on this Jest blogpost.

One thing to note is that there are some differences in snaoshot serialisation and it may require some slight changes to your tests after upgrading.

Hooks Support

Many React developers were excited by the announcement of Hooks in React 16.8 as they changed the way components are written allowing the use of stateful logic in functional components. This allows developers to write even purer components and increase the optimization of their applications. In this version of create-react-app the Rules of Hooks are enforced with eslint-plugin-react-hooks causing the build to fail if you are breaking any of these rules which are:

• Only call Hooks from React function components.
• Only call Hooks from custom Hooks

This helps avoid making deploying applications that may crash due to the bugs introduced by breaking these rules.

Typescript Linting

This version of create-react-app also introduces linting for Typescript files which should come in very handy in projects making use of Typescript. You can checkout the list of rules enforced to check for your project's compatibility. Visual Studio Code cab also setup the editor to display error messages using this guide.

browserslist Support

The . browserslist config in your package.json is now used to control the output of your Javascript files and separate configurations may be used for bith development and production as shown below:

...
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
...

This is aimed to improve overall developer experience while maintaining compatibility with many browsers in production.

Removed --no-watch flag

The --no-watch flag was removed from the start script and replaced with --watchAll=false from Jest. This changes how to disable watching of files for changes and running tests against them.

Absolute imports with jsconfig.json and tsconfig.json

Another new addition is supporting drttingg baseUrl in jsonconfig.json for Javascript projects and tsconfig.json for Typescript projects allowing us to have an absolute import paths for our files. This helps us write cleaner code. However, this feature only supports two options for baseUrl , these are node_modules which is the default and src . To configure the baseUrl to src for a Javascript project, create a jsconfig.json file and add the following code into it:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

For Typescript projects, do the same but in a tsconfig.json file instead.

PostCSS Normalize Support

You can now include a version of Normalize.css in your project that will use your browserslist setting to generate the appropriate styles for your target browsers. To include it simply add @import-normalize at the top of one of your CSS files.

Conclusion

With create-react-app we see a couple of steps taken towards improve the overall React development experience as well as the overall quality of applications develops. React has an exciting future and this is yet another indicator of more good things to come.