React Native/React: Babel Configuration

6 min readNov 20, 2023

Agenda

What is Babel?
How to enable Babel in React or React Native?
What are the Plugins in Babel?
List of useful Babel plugins in React?
List of useful Babel plugins in React Native?
api.cache(true)

What is Babel?

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into a backward-compatible version of JavaScript that can be run by older JavaScript engines, environments, such as React Native
In React Native, Babel is used to transform JSX code into regular JavaScript code, as well as to transform other modern JavaScript features, such as arrow functions and destructuring assignments.
Babel also offers support for the latest versions of JavaScript by sharing polyfills and plugins.

ES6 JavaScript:

const test = () => {
    let x = "Hello";
    console.log(`${x} World`);
}

test();

To do that, you would use Babel to transcompile the ES6 to ES5:

"use strict";

var test = function test() {
    var x = "Hello";
    console.log(x + " World");
};

test();

This ES5 version of JavaScript is compatible with older browsers or JavaScript engines.

How to enable Babel in React or React Native?

To use Babel for transpiling your code, you should install it using npm (Node package manager) and set up an .babelrc or babel.config.js configuration file where you specify the presets you need, like “env” for transpiling all ES2015-ES2020 code to ES5.

Although babel is by default enabled in React and React Native projects while creating the project. If you already have the project, there will be a .babelrc or babel.config.json file at the root of your project.

React

Step 1: To enable Babel in a React project, you generally need to install the following npm packages:

@babel/core: This is the main Babel library that does all the transformations.
@babel/preset-react: The “@babel/preset-react” preset is used to transpile JSX syntax and any other react-specific syntax.
@babel/preset-env: The “@babel/preset-env” preset is used to transpile modern JavaScript features down to ES5 for compatibility with older browsers.
@babel/cli: This is the command-line tool for Babel that you would use to manually transpile your code if you’re not using a build tool or bundler.

So in total four packages are generally needed as dev dependencies.

npm install --save-dev @babel/core @babel/preset-react @babel/preset-env @babel/cli

Step 2: Then, you would configure Babel in your project by creating a .babelrc or babel.config.js file in your project root directory like so:

For .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

For babel.config.json:

module.exports = function () {
  return {
    // These presets are used together to allow you to write modern,
    // React code that will be compatible with many browsers.
    presets: ["@babel/preset-env", "@babel/preset-react"],
  };
};

React Native

Step 1: To enable Babel in a React Native project, you generally need to install the following npm packages:

@babel/core: The main dependency that includes Babel’s core functionality.
@babel/cli: allows Babel commands to be run from the command line.
@babel/runtime: It is used for production and contains Babel’s helper functions and the regenerator runtime. It can help to reduce code duplication across compiled output.
metro-react-native-babel-preset: This is a Babel preset from Metro bundler (which React Native uses) that includes all the necessary plugins and presets for a React Native project. It includes plugins for the latest JavaScript, React, Flow, and React Native specific transformations. So in total four packages are generally needed as dev dependencies.

npm install --save @babel/core @babel/runtime
npm install --save-dev @babel/cli metro-react-native-babel-preset

Step 2: Then, you would configure Babel in your project by creating a .babelrc or babel.config.js file in your project root directory like so:

For .babelrc:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

For babel.config.json:

module.exports = function () {
  return {
    presets: ["module:metro-react-native-babel-preset"],
  };
};

// Or
module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@babel/preset-env'],
};

While metro-react-native-babel-preset covers the React Native-specific environment, you might also want to use @babel/preset-env to handle any ECMAScript features that are not supported by the JavaScript engines on the target devices.

What are the Plugins in Babel?

Babel’s code transformations are enabled by applying plugins (or presets) to your configuration file.

Get Vinay Singh’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In Babel, plugins are small bits of code that can be used to modify the AST (Abstract Syntax Tree) of your JavaScript code. They allow you to add new features, transform existing features, and generally customize the behavior of Babel during the transpilation process.

Types of plugins:

Syntax plugins: These plugins allow you to use new syntax features that are not yet supported by all browsers. For example, the @babel/plugin-syntax-jsx plugin allows you to use JSX syntax in your code.
Transform plugins: These plugins are used to modify the AST of your code. For example, the @babel/plugin-transform-react-jsx plugin transforms JSX code into regular JavaScript code that can be understood by browsers.
Code generation plugins: These plugins generate new code based on the existing code in your AST. For example, the @babel/plugin-proposal-decorators plugin generates code for decorators, which is a proposed JavaScript feature.

Benefits of using plugins:

Extend the functionality of Babel: Plugins allow you to add new features to Babel that are not available by default.
Customize the behavior of Babel: You can use plugins to tailor the behavior of Babel to your specific needs.
Improve the performance of your code: Some plugins can help to improve the performance of your code by optimizing the AST.

How to use plugins:

Install the plugin: You can install plugins using NPM or Yarn. For example, to install the @babel/plugin-syntax-jsx plugin, you would run the following command:

npm install @babel/plugin-syntax-jsx

Configure your Babel config file: You need to add the plugin to your babel.config.js file. The specific format will vary depending on the type of plugin.

module.exports = {
  ...
  ...
  plugins: ['@babel/plugin-syntax-jsx'],
};

Here are some additional resources that you may find helpful:

Babel plugin documentation: https://babeljs.io/docs/plugins
List of Babel plugins: https://babeljs.io/docs/plugins-list
Babel blog post on plugins: https://babeljs.io/

List of useful Babel plugins in React?

Here are some useful Babel plugins often used in React development:

@babel/plugin-transform-react-jsx: This is the plugin that handles converting JSX into React.createElement calls that can be executed by the browser.
@babel/plugin-transform-react-inline-elements: This plugin transforms React JSX elements to inline their object literals improving runtime speed.
@babel/plugin-proposal-class-properties: This plugin allows developers to use the class properties syntax, which means you can use the simplified syntax to declare class methods and you can pass arrow functions and bound methods inside your React components.
@babel/plugin-syntax-dynamic-import: This plugin enables support for the dynamic import() function syntax, which allows you to asynchronously load and run modules.
@babel/plugin-proposal-optional-chaining: This plugin allows the use of optional chaining syntax in JavaScript which provides an easier way to access nested properties without checking if the property exists or not.
@babel/plugin-transform-runtime: The transform-runtime plugin makes sure that helper functions are inserted once in your code and that they reuse the code.
@babel/plugin-proposal-nullish-coalescing-operator: This plugin allows the use of the nullish coalescing operator (“??”) in JavaScript, which provides a way to set default values for undefined or null values.

List of useful Babel plugins in React Native?

Some useful Babel plugins often used in React Native development:

@babel/plugin-transform-react-jsx: This plugin transpiles JSX to JavaScript.
@babel/plugin-proposal-class-properties: Allows the use of an updated syntax for class properties, including properties used in React components.
@babel/plugin-transform-runtime: Reduces duplication in Babel-compiled output.
@babel/plugin-proposal-optional-chaining: This enables the optional chaining “?” feature in your React Native project.
@babel/plugin-syntax-dynamic-import: Babel plugin to enable dynamic imports in your JavaScript code, which is particularly useful for code splitting.
@babel/plugin-proposal-nullish-coalescing-operator: Transpiles the nullish coalescing operator “??”.
@babel/plugin-proposal-decorators: This Babel plugin is mainly used for supporting decorator syntax.

api.cache(true)

The api.cache(true) in babel.config.js in React Native enables caching of the Babel configuration function. This means that Babel will only evaluate the configuration function once, and then reuse the cached result for subsequent compilations. This can improve the performance of the build process.

Here is an example of how to use api.cache(true) in babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

In this example, the api.cache(true) function is called at the top of the module. This tells Babel to cache the result of the configuration function. The configuration function itself returns an object that defines the presets and plugins that Babel should use.

Other config function API: https://babeljs.io/docs/config-files#config-function-api