How to Set Up and Configure Browserslist with React : Ensuring That Your React App Works Optimally For Your Intended Audience.

Browserslist is a tool that helps you target specific browsers and their versions when building your React applications. It provides a simple and consistent way to define the browsers you want to support, ensuring that your app works optimally for your intended audience.

Installing Browserslist

To install Browserslist, run the following command in your project's root directory:

npm install --save-dev browserslist

Creating a .browserslistrc File

Once you have installed Browserslist, you need to create a .browserslistrc file in your project's root directory. This file should contain a list of the browsers and their versions that you want to support.

For example, the following .browserslistrc file would target the latest two versions of Chrome, Firefox, Safari, and Edge:

# .browserslistrc
> 1%
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions
last 2 Edge versions

Configuring Browserslist with React

Once you have created a .browserslistrc file, you can configure Browserslist with React by using the browserslist package. To do this, install the browserslist package by running the following command in your project's root directory:

npm install --save-dev browserslist

Once you have installed the browserslist package, you can use it to configure Browserslist with React by adding the following code to your package.json file:

{
  "browserslist": {
    "production": ["> 1%", "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions", "last 2 Edge versions"],
    "development": ["last 1 Chrome version"]
  }
}

This code will configure Browserslist to target the latest two versions of Chrome, Firefox, Safari, and Edge in production, and the latest version of Chrome in development.

Using Browserslist with React Transpilation

React uses Babel to transpile your code into a format that is compatible with the browsers you are targeting. By default, React will transpile your code to work on all modern browsers.

You can override these defaults by setting the browserslist option in your package.json file. For example, to target the latest one versions of Chrome, Firefox, Safari, and Edge, you would set the browserslist option as follows:

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

Supporting Internet Explorer

You can install a polyfill package to your project which would  extend support to Internet Explorer.

Install react-app-polyfill

npm install react-app-polyfill

Once installed you are required to import the react-app-polyfill in your react app entry point aka index.js.

Examples:

To support Internet Explorer 11 you must add the following import at entry point:

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';
// ...

Another example to support Internet Explorer 9 :

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';
// ...

Note: if you import the IE9 entry point, this will include IE10 and IE11 support.

These polyfill modules ensure the following language features are present:

• Promise (for async / await support)
• window.fetch (a Promise-based way to make web requests in the browser)
• Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
• Symbol (a built-in object used by for...of syntax and friends)
• Array.from (a built-in static method used by array spread, i.e. [...arr])

Polyfilling other language features

You can also polyfill stable language features not available in your target browsers. If you're using this in Create React App, it will automatically use the browserslist you've defined to only include polyfills needed by your target browsers when importing the stable polyfill. Make sure to follow the Internet Explorer steps above if you need to support Internet Explorer in your application.

// This must be the first line in src/index.js
import 'react-app-polyfill/stable';
// ...

If you are supporting Internet Explorer 9 or Internet Explorer 11 you should include both the ie9 or ie11 and stable modules:

For IE9:

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
// ...

For IE11:

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
// ...

Benefits of Using Browserslist with React

• Improved performance: By targeting specific browsers and their versions, you can ensure that your app is optimized for the browsers that your users are actually using. This can lead to improved performance and a better user experience.
• Reduced bundle size: By only transpiling your code for the browsers that you are targeting, you can reduce the size of your app's bundle. This can make your app load faster and use less bandwidth.
• Increased compatibility: By targeting specific browsers and their versions, you can ensure that your app is compatible with the latest browsers and devices. This can help you reach a wider audience and provide a better user experience.

Conclusion

Browserslist is a powerful tool that can help you improve the performance, reduce the bundle size, and increase the compatibility of your React applications. By following the steps outlined in this guide, you can set up and configure Browserslist with React, ensuring that your app works optimally for your intended audience.