Moved the CSS style JSON expressions into a new separate file 'webpac…

…k_in/styles.es'.
maratbn · Aug 5, 2018 · 0155a62 · 0155a62
1 parent edba721
commit 0155a62
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/webpack_in/entry.jsx b/webpack_in/entry.jsx
@@ -10,16 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-
-const objStyleCommon = {
-    margin:     '1em',
-    border:     'solid 2px green',
-    textAlign:  'center'
-  };
-
-const objStyleContent = {
-    padding:    '1em'
-  };
+import Styles from './styles.es';
 
 
 class ButtonWidget extends React.Component {
@@ -41,7 +32,7 @@ ButtonWidget.propTypes = {
 class HelloWidget extends React.Component {
     render() {
         return (
-            <div style={{ ...objStyleCommon, ...objStyleContent }}>
+            <div style={{ ...Styles.common, ...Styles.content }}>
               Hello!  I'm a React app!!
             </div>
           );
@@ -59,8 +50,8 @@ class TextWidget extends React.Component {
 
     render() {
         return (
-            <div style={ objStyleCommon }>
-              <div style={ objStyleContent }>{ this.state.text }</div>
+            <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:",
@@ -163,8 +154,8 @@ class ListWidget extends React.Component {
             "");
 
         return (
-            <div style={ objStyleCommon }>
-              <div style={ objStyleContent }>
+            <div style={ Styles.common }>
+              <div style={ Styles.content }>
                 <ul style={{ display: 'inline-block', textAlign: 'left', listStyleType: 'none' }}>
                   { this.state.items.map((objItem, index) => (
                         <ListItem key={ objItem.id }
@@ -387,7 +378,7 @@ class ColorSelector extends React.Component {
           };
 
         return (
-            <div style={ objStyleCommon }>
+            <div style={ Styles.common }>
               <div style={{ margin: '1em auto',
                             width: '70%',
                             height: '3em',

diff --git a/webpack_in/styles.es b/webpack_in/styles.es
@@ -0,0 +1,15 @@
+//  This file 'styles.es' 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/
+
+
+export default {
+    common: {
+        margin:     '1em',
+        border:     'solid 2px green',
+        textAlign:  'center'
+      },
+    content: {
+        padding:    '1em'
+      }
+  };