using react with basic components - best practice

Question

I'm thinking on creating a react component for a button something like this:

var Button = React.createClass({
    getDefaultProps: function() {
        return {
            classString: '',
            disabled:'',
            text:'',
            link:'',
            onPropagateClick: function(){}
        };
    },
    handleClick: function () {
        this.props.onPropagateClick(this.props.link);
    },
    render: function () {
        return (
            <button className={this.props.classString} onClick={this.handleClick} disabled={this.props.disabled} >
                {(React.Children.count(this.props.children) === 0) ? this.props.text : this.props.children}
            </button>
        );
    }
}); 

and also create a span component:

var Span = React.createClass({
    getDefaultProps: function() {
        return {
            classString: '',
            text:''
        };
    },
    render: function () {
        console.log(this.props);
        return (
                <span className={this.props.classString}>
                    {this.props.text}
                </span>
            );
    }
});

And when required to pass Span as child for Button

Does anyone know how this will affect my performance? Is this a good practice to have so many multi layers components?

Thanks for your ideas

Answer 1

It will affect performance slightly, but don't let that hold you back from doing it. It's just a little bit of JavaScript that's run, and JavaScript is fast.

Composition and building abstractions big parts of React's benifit. Write helper components whenever they'll make your other components easier to understand or change.