babel-preset-react-plus
Babel preset for react development with some additional ECMAScript propersal based on babel-preset-react.
NOTE: - Requires Babel v6+.- babel-preset-es2015/es2016/es2017/latest are excluded. You need to download them manually.- async/await was offically moved into babel-preset-es2017.
Install
$ npm install --save-dev babel-preset-react-plus
Introdcution
This preset includes the following ECMAScript propersals:
Class and Property Decorators
Class Property Declarations
Rest/Spread Properties
export * as ns from "mod"; statements
export v from "mod"; statements
Since above five are becoming the most frequently used propersals in react apps I decide to intergrate them into one preset which also includes the basic babel-preset-react
. so that we no longer
need to download them separately and enable these propersals by downloading corresponding syntax-parsing plugins manually.
Except this you can also download . Recently babel finally integrated their transform plugins with
the corresponding syntax-parsing plugins thus we no longer need to download them separately. However I still think this preset useful
since the stage of propersals always change frequently which means it's hard to decide which preset-stage plugin should choose.babel-preset-stage-*
together with those syntax-parsing plugins but it is unconvenient and
includes some other transform modules you'll probably never use
Internal presets and plugins
- babel-preset-react
- babel-plugin-transform-class-properties
- babel-plugin-transform-object-rest-spread
- babel-plugin-transform-decorators-legacy
- babel-plugin-transform-export-extensions
Boilerplate
decorators
react-redux
import React, { Component } from 'react';import { connect } from 'react-redux'; @connect( state => ({ todos: state.todos }), actionCreators)class App extends Component { ...} export default App;
react-router
import React, { Component } from 'react';import { withRouter } from 'react-router'; @withRouterclass App extends Component { ...} export default App;
core-decorators
import React, { Component } from 'react';import { autobind } from 'core-decorators'; @autobindclass App extends Component { // You don't have to set this.handleClick.bind(this) in // constructor or the place where it's being called handleClick() {...} ...} export default App;
class-properties
import React, { Component } from 'react'; class App extends Component { state = {} handleClick = (e) => { } ...} export default App;
object-spread-rest
// Sometimes useful in redux // reducerconst users = (state = {}, action) => { switch(action.type) { case "ADD_USER": { return { ...state, [action.id] = action.info } } ... }}
export-extensions
// It's a common pattern which separates React components into corresponding files // And we need to create a index.js to export all imported components // Beforeimport A from './a';import B from './b';import C from './c';import { foo, bar } from './utils'; export { A, B, C, foo, bar };//orexport { default as A } from './a';export { default as B } from './b';export { default as C } from './c';export { foo, bar } from './utils'; // Afterexport A from './a';export B from './b';export C from './c';export * as utils from './utils';
Usage
.babelrc
(Recommended)
Via .babelrc
Via CLI
$ babel script.js --presets react-plus
Via Node API
;