1.js

const attributes = {
    defaultValue : {
        type: 'string',
        required: false,
        default: 'Default Default Value'
    },
    blockId: {
        type: 'string'
    }
};

10.js

/**
 * All DOM elements with block
 * @type {NodeListOf<Element>}
 */
const elements = document.querySelectorAll('.wp-block-josh-isoblock');
if( ! elements.length ){
//no blocks found
   return;
}
//do stuff to blocks

11.js

import React, { useState } from "react";
import Form from "./Form";
/**
 * The Form component
 */
export const FormApp = props => {
  const [value, onChange] = useState(props.defaultValue);
  return <Form {...props} defaultValue={value} onChange={onChange} />;
};

2.js

/**
 * The Form component
 */
export const Form = ({defaultValue,id,onChange} ) => {
    return (
        <form >
            <div>
                <label htmlFor={id}>
                    Form Field
                </label>
                <input
                    value={defaultValue}
                    id={id}
                    onChange={onChange}
                    className={'isoblock-field'}
                />
            </div>
        </form>
    );
};

3.js

//Block registration API
import {registerBlockType} from '@wordpress/blocks';

//block attributes
const attributes = {
    defaultValue : {
        type: 'string',
        required: false,
        default: 'Default Default Value'
    },
    blockId: {
        type: 'string'
    }
};

//block name
const name = 'josh/isoblock';
registerBlockType(name,{
    title: 'Hydrate Demo',
    attributes,
    category: 'common',
    edit({attributes,setAttributes,className,clientId}){
        return  (
            <div>
               <p>Edit</p>
            </div>
        )
    },
    save({attributes,className,clientId}){
        return  (
            <div>
               <p>Save</p>
            </div>
        )
    }

});

4.js

//Current attribute values 
const {defaultValue,blockId} = attributes;

5.js

//Change handler for default value attribute
const setDefaultValue = defaultValue => setAttributes({defaultValue});

//Change handler for block ID attribute
const setBlockId = blockId => setAttributes({blockId});

6.js

{
 edit({attributes,setAttributes,className,clientId}){
        const {defaultValue,blockId} = attributes;
        const setDefaultValue = defaultValue => setAttributes({defaultValue});
        const setBlockId = blockId => setAttributes({blockId});
        if( clientId !== blockId ){
            setBlockId(clientId);
        }
        return  (
            <div>
                <Form
                    defaultValue={defaultValue}
                    className={className}
                    id={clientId}
                    onChange={(event) => {
                        console.log(event);
                        setDefaultValue(event.target.value);
                    }}
                />
            </div>
        )
    },
}

7.js

{
edit({attributes,setAttributes,className,clientId}){
        const {defaultValue,blockId} = attributes;
        const setDefaultValue = defaultValue => setAttributes({defaultValue});
        const setBlockId = blockId => setAttributes({blockId});
        if( clientId !== blockId ){
            setBlockId(clientId);
        }
        return  (
            <div>
                <InspectorControls>
                    <TextControl
                        onChange={setDefaultValue}
                        label={'Default Value For Form Field'}
                        value={defaultValue}
                    />
                </InspectorControls>
                <Form
                    defaultValue={defaultValue}
                    className={className}
                    id={clientId}
                    onChange={(event) => {
                        console.log(event);
                        setDefaultValue(event.target.value);
                    }}
                />
            </div>
        )
    }
}

8.js

{
    save(props){
        const {attributes,className,clientId} = props;
        const {defaultValue,blockId} = attributes;
        return  <Form defaultValue={defaultValue} className={className} id={blockId} />
    }
}

9.js

//Get WordPress default webpack config
const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");

const path = require('path');

//Merge our entry point with default
module.exports = {
    ...defaultConfig,
    //https://webpack.js.org/concepts/entry-points/
    entry: {
        //Block editor, what WordPress does by default
        index: path.resolve( process.cwd(), 'src', 'index.js' ),
        //Create a front-end JavaScript bundle
        front: path.resolve( process.cwd(), 'src', 'front.js' ),
    },

};

a.html

<p>
  Vegan Tacos
</p>

b.html

<img src="http://placekitten.com/g/200/300" />

render.js

import {render} from 'react-dom'
render( <div>The App</div>, document.getElementById( 'root' );