title: using react with basic components - best practice
body: <p>I'm thinking on creating a react component for a button something like this:</p>
  
  <pre><code>var Button = React.createClass({
      getDefaultProps: function() {
          return {
              classString: '',
              disabled:'',
              text:'',
              link:'',
              onPropagateClick: function(){}
          };
      },
      handleClick: function () {
          this.props.onPropagateClick(this.props.link);
      },
      render: function () {
          return (
              &lt;button className={this.props.classString} onClick={this.handleClick} disabled={this.props.disabled} &gt;
                  {(React.Children.count(this.props.children) === 0) ? this.props.text : this.props.children}
              &lt;/button&gt;
          );
      }
  }); 
  </code></pre>
  
  <p>and also create a span component:</p>
  
  <pre><code>var Span = React.createClass({
      getDefaultProps: function() {
          return {
              classString: '',
              text:''
          };
      },
      render: function () {
          console.log(this.props);
          return (
                  &lt;span className={this.props.classString}&gt;
                      {this.props.text}
                  &lt;/span&gt;
              );
      }
  });
  </code></pre>
  
  <p>And when required to pass Span as child for Button</p>
  
  <p>Does anyone know how this will affect my performance?
  Is this a good practice to have so many multi layers components?</p>
  
  <p>Thanks for your ideas</p>