The modified Gutenberg-Block from create-guten-block as react component.

react-lifecycle-block-done.js

/**
 * BLOCK: react-lifecycle-block
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { Component } = wp.element; // Import the Component base class from the React.js abstraction

/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */
registerBlockType('cgb/block-react-lifecycle-block', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __('react-lifecycle-block - CGB Block'), // Block title.
	icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__('react-lifecycle-block — CGB Block'),
		__('CGB Example'),
		__('create-guten-block'),
	],

	/**
	 * The edit function describes the structure of your block in the context of the editor.
	 * This represents what the editor will render when the block is used.
	 *
	 * The "edit" property must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	edit: class extends Component {

		//standard constructor for a component
		constructor() {
			super(...arguments);
			console.log(this.props.name, ": constructor()");

			// example how to bind `this` to the current component for our callbacks
			this.onChangeContent = this.onChangeContent.bind(this);

			// some place for your state
			this.state = {};
		}

		componentDidMount() {
			console.log(this.props.name, ": componentDidMount()");
		}

		componentDidUpdate() {
			console.log(this.props.name, ": componentDidUpdate()");
		}


		componentWillUnmount() {
			console.log(this.props.name, ": componentWillUnmount()");
		}

		// update attributes when content is updated
		onChangeContent(data) {
			// set attribute the react way
			this.props.setAttributes({ content: data });
		}

		// edit: function (props) {
		// Creates a <p class='wp-block-cgb-block-react-lifecycle-block'></p>.
		render() {
			return (
				<div className={this.props.className}>
					<p>— Hello from the backend.</p>
					<p>
						CGB BLOCK: <code>react-lifecycle-block</code> is a new Gutenberg block
				</p>
					<p>
						It was created via{' '}
						<code>
							<a href="https://github.com/ahmadawais/create-guten-block">
								create-guten-block
						</a>
						</code>.
				</p>
				</div>
			);
		}
	},
	/**
	 * The save function defines the way in which the different attributes should be combined
	 * into the final markup, which is then serialized by Gutenberg into post_content.
	 *
	 * The "save" property must be specified and must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	save: function (props) {
		return (
			<div>
				<p>— Hello from the frontend.</p>
				<p>
					CGB BLOCK: <code>react-lifecycle-block</code> is a new Gutenberg block.
				</p>
				<p>
					It was created via{' '}
					<code>
						<a href="https://github.com/ahmadawais/create-guten-block">
							create-guten-block
						</a>
					</code>.
				</p>
			</div>
		);
	},
});