Gutenberg React Component

gutenberg_react_comp.js

import Input from './components/Input.es6';
import Select from './components/Select.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 el(
            'div',
            { className: className },
            [
                el(
                    'p',
                    {},
                    attributes.salutation + ' ' + attributes.who
                ),
                el(
                    'p',
                    {},
                    attributes.bold
                ),
                el(
                    'div',
                    {},
                    [
                        el(
                            Select,
                            {
                                id: 'bold',
                                changeHandler: changeBold
                            }
                        )
                    ]
                ),
                el(
                    'div',
                    {},
                    Input( className, 'salutation', attributes.salutation, 'Salutation', inputChangeHandler )
                ),
                el(
                    'div',
                    {},
                    Input( className, 'who', attributes.who, 'Who', inputChangeHandler )
                )
            ]
        );
    },

    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.es6.js

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

export default function Input( className, id, value, label, changeHandler ) {
    return el(
        'div',
        {
            className: className
        },
        [
            el(
                'label',
                {
                    htmlFor: id
                },
                __( label + '?', 'text-domain' )
            ),
            el(
                'input',
                {
                    id: id,
                    type: "text",
                    onChange: changeHandler,
                    value: value,
                    label: label
                }
            )
        ]
    )
}

Select.react.js

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

export default class Select extends Component {

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

    render() {
        return el(
            'select',
            {
                onChange: this.props.changeHandler,
                id: this.props.id
            },
            [
                el(
                    'option',
                    {
                        value: 'true'
                    },
                    __( 'Bold On', 'text-domain' )
                ),
                el(
                    'option',
                    {
                        value: 'false'
                    },
                    __( 'Bold Off', 'text-domain' )
                )
            ]
        )
    }
}