tessl/npm-babel-preset-react

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Babel Preset React

Name: tessl/npm-babel-preset-react
Author: tessl

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

Install the preset:

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

Create a .babelrc configuration file:

{
  "presets": ["react"]
}

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");

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/babel-preset-react@6.24.x
Publish Source: CLI
Badge