1.7.9

Author: zlab

babel.config.js

@@ -4,7 +4,5 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread',
   ],
 };

package.json

@@ -14,6 +14,7 @@
     "react-dom": "^16.9.0"
   },
   "devDependencies": {
-    "react-cli-service": "^1.7.7"
+    "eslint": "^6.2.1",
+    "react-cli-service": "^1.7.9"
   }
 }

src/App.js

@@ -2,14 +2,12 @@ import React from 'react';
 
 import HelloWorld from 'src/component/HelloWorld';
 
-export default class App extends React.Component {
+export default () => {
 
-  render() {
-    return (
-      <div>
-        <h1>Demo</h1>
-        <HelloWorld/>
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <h1>React App</h1>
+      <HelloWorld/>
+    </div>
+  );
+};

src/component/HelloWorld.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
-export default class HelloWorld extends React.Component {
+import styles from './index.module.css';
 
-  render() {
-    return (
-      <div>
-        <h2>Hello</h2>
-        <p>React Cli Service</p>
-      </div>
-    );
-  }
-}
+export default () => {
+
+  return (
+    <div className={styles.hello}>
+      <h2>Hello Component</h2>
+      <p>React Cli Service</p>
+    </div>
+  );
+};

src/component/index.module.css

@@ -0,0 +1,5 @@
+.hello {
+  border: 1px solid lightblue;
+  padding: 15px;
+  width: 200px;
+}