# How to write easy to understand React code using class properties syntax

Today we will see a way of simplifying React code by removing the need of binding every new event handler we add to the component.

Take a look at the below code:

%[https://gist.github.com/myogeshchavan97/0b409f0e8678dcb935da4e4d55f09b1b]

Live Demo: [https://codesandbox.io/s/boring-wu-qud80](https://codesandbox.io/s/boring-wu-qud80)

Here we have a counter initialized to zero at the start. We also have added an event handler which increases the counter value by one, when we click on the `“Add One”` button.

To make use of the keyword `this` inside the event handler, we have to bind it in the constructor


```js
this.handleAddOne = this.handleAddOne.bind(this);
```


Also, just for declaring the state, we have to create a constructor, add a super call inside it and then we can declare the state.

This is not just cumbersome but also makes the code unnecessarily complicated.

**_As the number of event handlers increases, the number of `.bind` calls also gets increased. We can avoid doing this using the class properties syntax._**

**The create-react-app already has in-built support for it and you can start using this syntax right now.**

So let’s explore in detail.

The class properties syntax allows us to bind the properties like state or instance variables directly inside the class without the need for the constructor.

_As you know the arrow functions do not have their own `this` context. It takes `this` context from where the function is placed. So we can convert the event handlers to arrow function syntax which will use the class context which will remove the need of binding `this`.

So now, rewrite the above counter example using this new syntax:

%[https://gist.github.com/myogeshchavan97/43e154818ff9a4e89a79d98b743c39d3]

Live Demo: [https://codesandbox.io/s/twilight-sea-lnk6z](https://codesandbox.io/s/twilight-sea-lnk6z)

As you can see, we have moved state declaration from constructor to directly inside the class, which will make the state as the property of the class.
Also, we have converted the `handleAddOne` event handler from function syntax to arrow function syntax.

So the function will preserve `this` context. So in the end, we have completely removed the need of adding a constructor which will make our code clean and easier to understand.

This is not just limited to event handlers, you can convert any function defined inside the component to an arrow function to avoid binding of `this`.

**_Using the class properties syntax is a new standard in `React` world now and everyone is actively using it._**

**Installation:**

*  **The** `create-react-app` **has in-built support for it so you can directly use this new syntax without any configuration.**

*  If you are using your own webpack setup as explained in [this article](https://medium.com/javascript-in-plain-english/webpack-and-babel-setup-with-react-from-scratch-bef0fe2ae3e7?source=friends_link&sk=880a6b9a35fb638eef19e5e99276428e) and you are using babel version greater than or equal to 7, then add support for class properties syntax using:


```js
npm install --save-dev @babel/plugin-proposal-class-properties
```


Also add, `@babel/plugin-proposal-class-properties` to plugins array in `.babelrc` file as shown below


```js
{
 "plugins": ["@babel/plugin-proposal-class-properties"]
}
```


And you are ready to work with this new syntax.

* If you are using your own webpack setup and you are using babel version less than 7, install it using:


```js
npm install --save-dev babel-plugin-transform-class-properties
```


Also add, `transform-class-properties` to plugins array in `.babelrc` file as shown below


```js
{
 "plugins": ["transform-class-properties"]
}
```


That’s it for today. Hope you learned something new today.

I hope you've been enjoying my articles and tutorials I've been writing. If you found them useful, consider buying me a coffee! I would really appreciate it.

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)

**Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox [here](https://yogeshchavan.dev).**