Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
React Tutorial
babel-preset-react

babel-preset-react

By Aman Dwivedi
7 mins read
Last updated: 4 May 2023
179 views
Topics Covered

Overview

React is one of the most favoured languages when it comes to the development of User Interfaces, as it uses the concept of reusable components. The React.js library itself insists that you use the most recent JavaScript features for code that is cleaner, shorter, and easier to read. Unfortunately, the majority of the syntax is not understood by our browsers, so Babel's assistance is required here. It is in charge of translating ES5 and ES6 code into browser-compatible code or essentially backward compatibility. This shows the importance of Babel presets.

Introduction

Simply stated, Babel is a transpiler that is best known for enabling the execution of ES6-written code in browsers that do not currently support it. Babel presets are configuration settings that instruct the babel-transpiler to transpile the file in the specified mode. It is in charge of translating ES5 and ES6 code into browser-compatible code or essentially backward compatibility. Listed below are some of the most used presets.

  • ES2015
  • Env
  • React

The environment in which we want the code to be converted must be included in the presets that we use. As an illustration, the es2015 preset will change the code to es5. To es5, the preset with the value env will also convert. Additionally, it has extra features or choices. Babel will only convert the code if there is no support for the feature on the most recent versions of browsers if you want the feature to be supported on those browsers. Babel will translate the code when to react using Preset React.

The following plugins are always included in this preset :

  • @babel/plugin-syntax-jsx
  • @babel/plugin-transform-react-jsx
  • @babel/plugin-transform-react-display-name

The development option also includes the classic runtime adds :

  • @babel/plugin-transform-react-jsx-self
  • @babel/plugin-transform-react-jsx-source

When the development option is enabled, automatic runtime (available since v7.9.0) automatically adds the functionality for these plugins. Adding @babel/plugin-transform-react-jsx-self or @babel/plugin-transform-react-jsx-source will fail if automatic runtime is enabled.

Installation

  • Install the CLI and this preset : npm install --save-dev babel-cli babel-preset-react

  • Make a .babelrc config file with the preset : echo '{ "presets": ["react"] }' > .babelrc

  • Create a file to run on : echo '<h1>Hello, world!</h1>' > index.js

  • View the output : ./node_modules/.bin/babel index.js

Usage

A preset in Babel is a collection of plugins that are used to support specific language features. The two default presets that Babel employs are :

  • es2015: Adds ES2015 (or ES6) JavaScript support
  • react: JSX support is added.

Keep in mind that ES2015 is merely another name for ES6. Because we don't require or use either of ES7's two new features, we let Babel use the default es2015 preset for this project.

Beyond ES7, proposed JavaScript features may be in different stages of development. A feature could be a test idea that the community is still figuring out the specifics of ("stage 1"). Experimental ideas could be abandoned or changed at any time. Or a feature might already be "ratified," which signifies that it will be added to the upcoming JavaScript release ("stage 4").

With a Configuration File

  • Without options :
  • With options :

Via CLI

Via Node API

Let us take an example for clarity

Let us suppose there is a filescript.jsx with following code:

Compile

Compiled file

babel-preset-react Dependencies

Babel-preset-flow

A static type checker for JavaScript is the Flow. If you use Flow, a static type checker for JavaScript code, this preset is advised. The following plugins are included :

@babel/plugin-transform-flow-strip-types :

Babel-plugin-syntax-jsx, Babel-plugin-transform-react-display-name, Babel-plugin-transform-react-display-name, Babel-plugin-transform-react-display-name, Babel-plugin-transform-react-jsx, Babel-plugin-transform-react-jsx-source and Babel-plugin-transform-react-jsx-self.

Babel-plugin-syntax-jsx :

This syntax can only be parsed by Babel when this plugin is used directly. Use the transform-react-jsx plugin , or the react preset to parse and transform the JSX syntax if you want to.

Babel-plugin-transform-react-display-name :

Calls to React.createClass are made to include displayName. Included in @babel/preset-react is this plugin.

Babel-plugin-transform-react-jsx :

Make React function calls from JSX. The automatic runtime function was added in version 7.9.0. The functions that JSX compiles to will be automatically imported when this runtime is enabled.

Babel-plugin-transform-react-jsx-source :

All JSX Elements should have a __source prop. Included in @babel/preset-react is this plugin. JSX elements are given a source file and line number.

Babel-plugin-transform-react-jsx-self :

It gives JSX elements the __self prop, which React will use to produce some runtime warnings. This transform should be made available in dev mode to all React users.

Options

Both Runtimes

runtime : It can be automatic or classic. By Defaults, it is classic. It was added in the version 7.9.0. It chooses the runtime to be used.

The functions that JSX transpiles to are automatically imported by automatic. Classic doesn't import anything automatically.

development : It is a Boolean with a default value of false. This changes development-specific behaviour, including adding __source and __self.

When used in conjunction with the env option configuration or js config files, this is beneficial.

throwIfNamespace : It is a Boolean with a default value of true.

It switches between throwing an error and not throwing an error if an XML namespaced tag name is used. For instance :

<f:image />

Although this is permitted by the JSX specification, React's JSX does not yet support it, so it is disabled by default.

pure : It is a Boolean with a default value of true. It allows for the use of the @babel/plugin-transform-react-pure-annotations. Top level React method calls will be designated as pure for tree shaking.

React Automatic Runtime

importSource : It is a string, with a default value react. It was added in the version 7.9.0. Whenever importing functions, it replaces the import source.

React Classic Runtime :

pragma : It is a string , with a default value React.createElement. Replace the function that is utilised to compile JSX expressions.

pragmaFrag : It is a string , with a default value React.Fragment. The component that is used to compile JSX fragments is replaced.

useBuiltIns : It is a Boolean with a default value of false. Instead of attempting to polyfill behaviour for any plugins that call for one, I'll use the native built-in.

useSpread : It is a Boolean with a default value of false. It was added in the version 7.7.0. Instead of using Babel's extend helper or Object.assign when spreading props, use inline objects with spread elements directly.

.babelrc.js

.babelrc

Note: the env option will likely get deprecated soon

Conclusion

  • The React.js library itself suggests that you use the most recent JavaScript features for code that is cleaner, shorter, and easier to read.
  • The majority of the syntax is not understood by our browsers, so Babel's assistance is required here. It is in charge of translating ES5 and ES6 code into browsercompatible code.
  • Babel is a transpiler that is best known for enabling the execution of ES6-written code in browsers that do not currently support it.
  • Babel will only convert the code if there is no support for the feature on the most recent versions of browsers if you want the feature to be supported on those browsers.
  • Install the CLI and this preset : npm install --save-dev babel-cli babel-preset-react Make a .babelrc config file with the preset : echo '{ "presets": ["react"] }' > .babelrc Create a file to run on : echo '<h1>Hello, world!</h1>' > index.js View the output : ./node_modules/.bin/babel index.js
  • A preset in Babel is a collection of plugins that are used to support specific language features. The two default presets that Babel employs are :
    • es2015: Adds ES2015 (or ES6) JavaScript support
    • react: JSX support is added.