1. babel-preset-react
Babel preset for all React plugins.
babel-preset-react
Package: babel-preset-react
Created by: babel
Last modified: Fri, 21 Jul 2023 15:42:36 GMT
Version: 6.24.1
License: MIT
Downloads: 1,830,392
Repository: https://github.com/babel/babel/tree/master/packages/babel-preset-react

Install

npm install babel-preset-react
yarn add babel-preset-react

babel-preset-react

Babel preset for all React plugins.

This preset includes the following plugins/presets:

Install

You can also check out the React Getting Started page

For more info, check out the setup page on the cli and the usage docs.

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

Via .babelrc (Recommended)

.babelrc

 {
  "presets": ["react"]
}

Via CLI

 babel script.js --presets react 

Via Node API

 require("babel-core").transform("code", {
  presets: ["react"]
});

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin