Moved the logic for <TextWidget> into a new separate file 'webpack_in/text_widget.jsx'.

Author: maratbn

webpack_in/entry.jsx

@@ -13,36 +13,9 @@ import ReactDOM from 'react-dom';
 import ButtonWidget from './button_widget.jsx';
 import HelloWidget from './hello_widget.jsx';
 import Styles from './styles.es';
+import TextWidget from './text_widget.jsx';
 
 
-class TextWidget extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            text: "Some text here...."
-          };
-      }
-
-    render() {
-        return (
-            <div style={ Styles.common }>
-              <div style={ Styles.content }>{ this.state.text }</div>
-              <ButtonWidget caption="Change text..."
-                            onClick={() => {
-                                const strTextNew = prompt("Please enter text to display:",
-                                                          this.state.text);
-                                if (strTextNew === null) {
-                                    return;
-                                }
-
-                                this.setState({...this.state, text: strTextNew});
-                              }}/>
-            </div>
-          );
-      }
-}
-
 class ListItem extends React.Component {
     render() {
         return (<li><input type='checkbox'

webpack_in/text_widget.jsx

@@ -0,0 +1,40 @@
+//  This file 'text_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 React from 'react';
+
+import ButtonWidget from './button_widget.jsx';
+import Styles from './styles.es';
+
+
+class TextWidget extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            text: "Some text here...."
+          };
+      }
+
+    render() {
+        return (
+            <div style={ Styles.common }>
+              <div style={ Styles.content }>{ this.state.text }</div>
+              <ButtonWidget caption="Change text..."
+                            onClick={() => {
+                                const strTextNew = prompt("Please enter text to display:",
+                                                          this.state.text);
+                                if (strTextNew === null) {
+                                    return;
+                                }
+
+                                this.setState({...this.state, text: strTextNew});
+                              }}/>
+            </div>
+          );
+      }
+}
+
+export default TextWidget;