Moved the logic for <ButtonWidget> into a new separate file 'webpack_…

…in/button_widget.jsx'.

webpack_in/button_widget.jsx

@@ -0,0 +1,27 @@
+//  This file 'button_widget.jsx' is part of an example for building a multi-widget React front-end
+//  app step by step as outlined in the tutorial blog at
+//  http://maratbn.com/blogs/2018/07/02/react-multi-widget/
+
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+
+class ButtonWidget extends React.Component {
+    render() {
+        return (
+            <button style={{ margin: '1em'}}
+                    disabled={ this.props.isDisabled }
+                    onClick={ this.props.onClick }>{ this.props.caption }</button>
+          );
+      }
+}
+
+ButtonWidget.propTypes = {
+    caption:                    PropTypes.string.isRequired,
+    isDisabled:                 PropTypes.bool,
+    onClick:                    PropTypes.func
+  };
+
+
+export default ButtonWidget;

webpack_in/entry.jsx

@@ -10,25 +10,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import ButtonWidget from './button_widget.jsx';
 import Styles from './styles.es';
 
 
-class ButtonWidget extends React.Component {
-    render() {
-        return (
-            <button style={{ margin: '1em'}}
-                    disabled={ this.props.isDisabled }
-                    onClick={ this.props.onClick }>{ this.props.caption }</button>
-          );
-      }
-}
-
-ButtonWidget.propTypes = {
-    caption:                    PropTypes.string.isRequired,
-    isDisabled:                 PropTypes.bool,
-    onClick:                    PropTypes.func
-  };
-
 class HelloWidget extends React.Component {
     render() {
         return (