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 incrementing on what was added on the previous releases.
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 snapshot 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 both 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 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.