React Application with Babel Transform Class Properties Plugin

Babel is a JavaScript transpiler that allows us to write modern JavaScript and compile it into syntax browsers can understand. We now can refactor React code in a beautiful way. This tutorial shows you how to use Babel Transform Class Properties Plugin in a React Application.

Transform Class Properties Plugin

With this code for Component class:

Using this Babel plugin, we can refactor to:

We don’t have to:
– bind the this context to each method of React component inside constructor()
– call super(props) or define any property/state inside constructor()

We can:
– use static properties
– define properties/state neatly without constructor()
– call this inside methods
– use arrow function to declare methods
– use props and state as usual

Configuration

Add plugin to .babelrc

Dependency in package.json

Practice

app.js

Result
babel-transform-class-properties-result

Source code

ReactES6ClassProperties

By grokonez | April 5, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*