React ES6 Button Component – BrowserStudios

As of ReactJS v0.13.0 Beta 1 it is finally possible to use ECMAScript 6 or ES6 for React components. What advantages it brings to us as developers?

Well, ES6 (or ECMAScript 2015) is new standard – link that brings a whole bunch of new features into the JavaScript. If you are not familiar with new features of ES6, I would highly recommend you to go through them using this link. This is awesome, but looking at ES6 compatibility table will make you reconsider using it, or will it? It seems that we have to wait years until we could use ES6 in browsers (remember a situation like that with ES5 features?).

Fortunately, this is not entirely true. There are already existing solutions called transpilers that convert your code written in ES6 to ES5-compatible code and I will show you how you can build a simple social button with React.

Examples React:

class BindComponent extends React.Component
{
    /**
     * No Autobinding:
     * Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance.
     * https://facebook.github.io/react/docs/reusable-components.html
     *
     * Solution:
     * http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes
     * "we've reduced the tedium of binding multiple instance methods to `this` by writing a `_bind` helper method in our `BaseComponent`"
     * @param methods
     * @private
     */
    _bind(...methods)
    {
        methods.forEach((method) =>
        {
            this[method] = this[method].bind(this);
        });
    }
}

_.extend(Classes,{BindComponent});

This BindComponent will not just prevent more code but also helps to decrease common mistakes. The next section will deal with a base button component which is state less and only receives props.

class BaseButton extends BindComponent
{
    render()
    {
        var icon = this.props.icon ?  : ,
            text = this.props.text ? {this.props.text} : Click Me;

        return 
            {icon}
            {text}
        
    }
}

BaseButton.propTypes = {
    onClick: React.PropTypes.func,
    className: React.PropTypes.string,
    text: React.PropTypes.string,
}

/**
 * This part will have to be more abstract.
 */
class Button extends BaseButton
{
    constructor(props)
    {
        super(props);
    }
};

_.extend(Classes,{Button});

I just wrote this React Button component in case we need another button which might rely on other functionality. Next up is the SocialButton which has a handler that is is supposed to serve logins or other sharing options.

/** Social Button extension for social login */
class SocialButton extends Button
{
    constructor(props)
    {
        super(props);
        this._bind('_handle')
    }

    _handle()
    {
        //do what ever you wanna do here. This handle will be used by the Button class!
    }
};

_.extend(Classes,{SocialButton});

When we look at how we just extended this functionality one thing might come to mind, what about reusability of this SocialButton.. It only serves the purpose to handle a function call. If you where to implement other properties such as title or text you could reuse it much more often. In this case it is just an example of how to write a React component in an ES6 way. You can also watch the following talk about “Elegant React with ES6”. Have fun!

So, if you’re ready to partner with a web developer who can truly harness the potential of React then let’s connect.

Email – michel.herszak@gmail.com

Twitter – @MHerszak (twitter.com/MHerszak)

Want to know about the way in which I work? Great, you can get started with an overview of just how I approach a project right here.