babel-preset-react-app

What is babel-preset-react-app?

babel-preset-react-app is a Babel preset that is used in Create React App projects. It includes a set of Babel plugins and configurations optimized for React applications, ensuring compatibility with the latest JavaScript features and JSX syntax.

What are babel-preset-react-app's main functionalities?

JSX Syntax Transformation

Transforms JSX syntax into JavaScript. This allows you to write HTML-like syntax in your JavaScript files, which is then converted to React.createElement calls.

const element = <h1>Hello, world!</h1>;

ES6+ Syntax Transformation

Transforms modern JavaScript syntax (ES6+) into a version of JavaScript that is compatible with older browsers. This includes features like arrow functions, template literals, destructuring, etc.

const sum = (a, b) => a + b;

Class Properties

Allows the use of class properties syntax in React components, making it easier to define state and methods without needing a constructor.

class MyComponent extends React.Component { state = { count: 0 }; }

Optional Chaining

Enables the use of optional chaining, which allows you to safely access deeply nested properties without having to check if each reference in the chain is null or undefined.

const name = user?.profile?.name;

Other packages similar to babel-preset-react-app

babel-preset-env

babel-preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). It is more general-purpose compared to babel-preset-react-app, which is specifically optimized for React applications.

babel-preset-react

babel-preset-react is a Babel preset that includes plugins for transforming JSX and React-specific syntax. While it provides similar functionality to babel-preset-react-app, it does not include the additional optimizations and configurations tailored for Create React App projects.

babel-preset-typescript

babel-preset-typescript is a Babel preset that allows Babel to transform TypeScript code into JavaScript. It is useful for projects that use TypeScript, whereas babel-preset-react-app is focused on JavaScript and JSX transformations.

README

babel-preset-react-app

This package includes the Babel preset used by Create React App.
Please refer to its documentation:

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.

Usage in Create React App Projects

The easiest way to use this configuration is with Create React App, which includes it by default. You don’t need to install it separately in Create React App projects.

Usage Outside of Create React App

If you want to use this Babel preset in a project not built with Create React App, you can install it with the following steps.

First, install Babel.

Then install babel-preset-react-app.

npm install babel-preset-react-app --save-dev

Then create a file named .babelrc with following contents in the root folder of your project:

{
  "presets": ["react-app"]
}

This preset uses the useBuiltIns option with transform-object-rest-spread and transform-react-jsx, which assumes that Object.assign is available or polyfilled.

Usage with Flow

Make sure you have a .flowconfig file at the root directory. You can also use the flow option on .babelrc:

{
  "presets": [["react-app", { "flow": true, "typescript": false }]]
}

Usage with TypeScript

Make sure you have a tsconfig.json file at the root directory. You can also use the typescript option on .babelrc:

{
  "presets": [["react-app", { "flow": false, "typescript": true }]]
}

Absolute Runtime Paths

Absolute paths are enabled by default for imports. To use relative paths instead, set the absoluteRuntime option in .babelrc to false:

{
  "presets": [["react-app", { "absoluteRuntime": false }]]
}