Enough React for Gutenberg

gutenberg_react_components.js

import { Input } from './components/Input.React';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;

registerBlockType( 'learn-gutenberg/ex2-react', {
    title: __( 'Learn Gutenberg Example 2: React', 'learn-gutenberg' ),
    category: 'widgets',
    supportHTML: false,
    attributes: {
        who: {
            selector: 'p',
            attribute: 'who'
        },
        salutation: {
            selector: 'p',
            attribute: 'salutation',
            default: 'Hi'
        },
        bold: {
            selector: 'p',
            attribute: 'bold'
        }
    },
    edit: ({attributes, setAttributes, className, focus, id}) => {

        const inputChangeHandler = ( event ) => {
            let newAttr = {};
            newAttr[event.target.id] = event.target.value;
            setAttributes( newAttr );
        };

        const changeBold = ( event ) => {
            setAttributes({bold: event.target.value});
        };

        return (
            <div className="{ className }">
                <div>
                    <p>{attributes.salutation} {attributes.who}</p>
                    <p>{attributes.bold}</p>
                </div>
                <div>
                    <select onChange={changeBold}>
                        <option value="true">True</option>
                        <option value="false">False</option>
                    </select>
                    <Input
                        className={className}
                        changeHandler={inputChangeHandler}
                        value={attributes.salutation}
                        label="Salutation"
                        id="salutation"
                    />
                    <Input
                        className={className}
                        changeHandler={inputChangeHandler}
                        value={attributes.who}
                        label="Who"
                        id="who"
                    />
                </div>
            </div>
        );
	},

    save: function({attributes}) {
        if ( 'true' === attributes.bold ) {
            return el(
                'p',
                {
                    who: attributes.who,
                    bold: attributes.bold,
                    salutation: attributes.salutation
                },
                [
                    el(
                        'strong',
                        {},
                        __( 'Hi', 'text-domain' ) + ' ' + attributes.who
                    )
                ]
            );
        }
        return el(
            'p',
            {
                who: attributes.who,
                bold: attributes.bold,
                salutation: attributes.salutation
            },
            __( 'Hi', 'text-domain' ) + ' ' + attributes.who
        );
    }
} );

Input.React.js

const { __ } = wp.i18n;
const { Component } = wp.element;
const el = wp.element.createElement;

export class Input extends Component {

    constructor( props ) {
        super( ...arguments );
    }

    render() {
        return (
            <div className={this.props.className}>
                <label htmlFor={this.props.id}>{__( this.props.label + '?', 'text-domain' )}</label>
                <input id={this.props.id} type="text" onChange={this.props.changeHandler} value={this.props.value} label={this.props.label} />
            </div>
        )
    }
}