# Conflicts: # lerna.json # packages/babel-cli/package.json # packages/babel-core/package.json # packages/babel-generator/package.json # packages/babel-helper-builder-react-jsx/package.json # packages/babel-helper-function-name/package.json # packages/babel-helper-optimise-call-expression/package.json # packages/babel-helper-replace-supers/package.json # packages/babel-helper-transform-fixture-test-runner/package.json # packages/babel-helpers/package.json # packages/babel-plugin-transform-class-properties/package.json # packages/babel-plugin-transform-es2015-block-scoping/package.json # packages/babel-plugin-transform-es2015-classes/package.json # packages/babel-plugin-transform-es2015-modules-commonjs/package.json # packages/babel-plugin-transform-es2015-modules-systemjs/package.json # packages/babel-plugin-transform-es2015-modules-umd/package.json # packages/babel-plugin-transform-es2015-parameters/package.json # packages/babel-plugin-transform-react-jsx/package.json # packages/babel-register/package.json # packages/babel-template/package.json # packages/babel-traverse/package.json # packages/babel/package.json
babel-plugin-transform-react-constant-elements
Treat React JSX elements as value types and hoist them to the highest scope
Example
In
const Hr = () => {
return <hr className="hr" />;
};
Out
const _ref = <hr className="hr" />;
const Hr = () => {
return _ref;
};
Deopts
-
Spread Operator
<div {...foobar} /> -
Refs
<div ref="foobar" /> <div ref={node => this.node = node} />
Installation
npm install --save-dev babel-plugin-transform-react-constant-elements
Usage
Via .babelrc (Recommended)
.babelrc
{
"plugins": ["transform-react-constant-elements"]
}
Via CLI
babel --plugins transform-react-constant-elements script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["transform-react-constant-elements"]
});