Using a custom component in Gutenberg

button.js

const Button = require('../../../styleguide/components/Button/Button.jsx');
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const Editable = wp.blocks.Editable;
const blockStyle = {
	backgroundColor: '#900',
	color: '#fff',
	padding: '20px',
};

registerBlockType( 'tco/think-button', {
	title: __( 'Think Button' ),
	icon: 'universal-access-alt',
	category: 'common',

	attributes: {
		buttonText: {
			type: 'string',
			source: 'text',
			selector: '.wp-block-tco-think-button'
		},
	},


	edit: props => {
		const {attributes} = props;
		const {buttonText} = attributes;
		const focusedEditable = props.focus ? props.focus.editable || 'buttonText' : null;
		const onChanageButtonText = value => {
			props.setAttributes( { buttonText: value } );
		};

		const onFocusButton = focus => {
			props.setFocus( _.extend( {}, focus, { editable: 'buttonText' } ) );
		}


		return ( 
			<Editable
				tagName="button"
				className={props.className}
				placeholder={ __( 'Write some text' ) }
				value={ buttonText }
				onChange={ onChanageButtonText }
				focus={ focusedEditable === 'buttonText' }
				onFocus={ onFocusButton }
			/>
		)
	},
	save: props => {
		const {
			attributes: {
				buttonText,
			}
		} = props;

		return <Button className={props.className} text={buttonText} />;
	},
} );

import React from 'react';

const emptyFunction = () => {};

class Button extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    var buttonText =  this.props.text;
    const buttonStyle = {
      color: 'blue'
    };
    
    return (
      <button style={buttonStyle} className={this.props.className}>{buttonText}</button>
    );
  }
}

module.exports = Button;