create-react-app v3, What's new?
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-appand 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
- Absolute imports with
- 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
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.
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.
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 config in your
production as shown below:
"not op_mini all"
"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
--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
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
jsconfig.json file and add the following code into it:
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-normalizeat the top of one of your CSS files.
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.