or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-babel-preset-react

Babel preset for all React plugins, providing comprehensive JSX transformation and React development support.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/babel-preset-react@6.24.x

To install, run

npx @tessl/cli install tessl/npm-babel-preset-react@6.24.0

index.mddocs/

Babel Preset React

Babel Preset React is a comprehensive Babel configuration preset that bundles all the essential plugins and transformations needed for React development. It provides JSX syntax transformation, Flow type checking support, React-specific optimizations, and development-time enhancements for source mapping and component introspection.

Package Information

  • Package Name: babel-preset-react
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev babel-preset-react

Core Imports

The preset is used through Babel configuration rather than direct imports. It's consumed by Babel through standard preset mechanisms:

Via .babelrc:

{
  "presets": ["react"]
}

Via package.json babel field:

{
  "babel": {
    "presets": ["react"]
  }
}

Via CLI:

babel script.js --presets react

Via Node API:

const babel = require("babel-core");

const result = babel.transform("code", {
  presets: ["react"]
});

Basic Usage

Setting up React JSX transformation

  1. Install the preset:
npm install --save-dev babel-cli babel-preset-react
  1. Create a .babelrc configuration file:
{
  "presets": ["react"]
}
  1. Transform React JSX code:
// Input (JSX)
const element = <h1>Hello, world!</h1>;

// Output (after transformation)
const element = React.createElement("h1", null, "Hello, world!");

Environment-specific configuration

The preset automatically includes development-specific plugins when NODE_ENV is set to development:

NODE_ENV=development babel script.js --presets react

Capabilities

JSX Syntax Transformation

Core JSX syntax parsing and transformation to React.createElement calls.

// Preset Configuration Object (actual export from src/index.js)
export default {
  presets: [
    presetFlow  // babel-preset-flow
  ],
  plugins: [
    transformReactJSX,        // babel-plugin-transform-react-jsx
    transformSyntaxJSX,       // babel-plugin-syntax-jsx
    transformReactDisplayName // babel-plugin-transform-react-display-name
  ],
  env: {
    development: {
      plugins: [
        // Development plugins array is empty in current version
      ]
    }
  }
}

Flow Type Integration

Includes babel-preset-flow for Flow type checking support, allowing you to use Flow type annotations alongside React components.

Flow Type Example:

// @flow
type Props = {
  name: string,
  age: number
};

function UserProfile(props: Props) {
  return <div>Name: {props.name}, Age: {props.age}</div>;
}

React Display Name Enhancement

Automatically adds displayName property to React components for better debugging experience in React DevTools.

Before transformation:

const MyComponent = React.createClass({
  render() {
    return <div>Hello</div>;
  }
});

After transformation:

const MyComponent = React.createClass({
  displayName: "MyComponent",
  render() {
    return <div>Hello</div>;
  }
});

Development Environment Support

The preset includes environment-specific configuration for potential future development-time features:

// Automatic configuration based on NODE_ENV
{
  env: {
    development: {
      plugins: [
        // Currently empty - no development-specific plugins are active
      ]
    }
  }
}

Configuration Object Structure

The preset exports a single configuration object that Babel uses when the preset is applied:

/**
 * Default export: Complete preset configuration object
 * Used by Babel when this preset is specified in configuration
 */
export default {
  presets: [
    // Array of included Babel presets
    presetFlow
  ],
  plugins: [
    // Array of included Babel plugins for React transformation
    transformReactJSX,
    transformSyntaxJSX,
    transformReactDisplayName
  ],
  env: {
    // Environment-specific configurations
    development: {
      plugins: []  // Currently empty
    }
  }
};

Included Dependencies

The preset includes the following Babel plugins and presets as dependencies:

Active dependencies (used in transformation):

  • babel-preset-flow@^6.23.0: Flow type checking preset
  • babel-plugin-syntax-jsx@^6.3.13: JSX syntax parsing support
  • babel-plugin-transform-react-jsx@^6.24.1: JSX to React.createElement transformation
  • babel-plugin-transform-react-display-name@^6.23.0: Automatic displayName addition

Listed dependencies (not currently active):

  • babel-plugin-transform-react-jsx-source@^6.22.0: JSX source transformation (not used in current version)
  • babel-plugin-transform-react-jsx-self@^6.22.0: JSX self transformation (not used in current version)

Usage Patterns

With Create React App (Legacy)

This preset was commonly used with older Create React App setups and custom Babel configurations:

{
  "presets": ["react"],
  "plugins": ["transform-class-properties"]
}

With Webpack

When using with Webpack and babel-loader:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react']
          }
        }
      }
    ]
  }
};

Programmatic Usage

For programmatic transformation using babel-core:

const babel = require("babel-core");

const code = `
  const component = <div>Hello World</div>;
`;

const result = babel.transform(code, {
  presets: ["react"]
});

console.log(result.code);
// Output: const component = React.createElement("div", null, "Hello World");