Building ES6 React Component from ES5 Components

We are in a growing technology world and ES versions are evolving very fast. I was working in a react project with ES5 but we had to revamp our ES5 components into ES6 components and I have faced so many problems at each point. So in this blog I am trying to cover some basic steps for how to convert ES5 react components to ES6 components.

3. How to set initial state in ES6 components

ES5 components use getInitialState method to set initial state and this method is invoked once before the component is mounted and return the value of this.state.
And as we are showing a user list so we need to initialize the user list.

One of the best thing about ES5 React’s `createClass` is that methods of components instance automatically bound to instance. As shown in this example, onClick callback(_handleClick )would be bound to the component by using `this`. But while using ES6 classes, we must specify this binding ourselves by prebinding in the constructor.ES6 Version:

5. Refactor to a base component

We can reduce the multiple binding of instance methods to `this` by writing a `_bind` method in our `BaseComponent` constructor. We are using some awesome ES6 features in the `_bind` method: `methods` is a rest parameter, and arrow function in the `forEach`.ES6 Version: