moved css module example to component exmaple

client/src/App.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import HelloWorld from './components/HelloWorld';
-import './style/style.css'; // regular CSS -> className='app'
-import styles from './style/App.module.css'; // module CSS -> className={styles.App} (AKA styled components)
+import HelloWorld from './components/HelloWorld/HelloWorld';
 // import * as api from './api';
 // ^ ^ ^ un-comment this to import api endpoints
 
@@ -17,7 +15,7 @@ function App() {
   // ^ ^ ^ example using the api endpoint
 
   return (
-    <div className={styles.App}>
+    <div>
       <HelloWorld />
     </div>
   );

client/src/components/HelloWorld.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-function HelloWorld() {
-  return <div>Hello World - React.js</div>;
-}
-
-export default HelloWorld;

client/src/components/HelloWorld/HelloWorld.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './style/HelloWorld.module.css'; // CSS module -> className={styles.App} (AKA styled components)
+
+function HelloWorld() {
+  return <div className={styles.HelloWorld}>Hello World - React.js</div>;
+}
+
+export default HelloWorld;

client/src/components/HelloWorld/style/HelloWorld.module.css

@@ -1,4 +1,4 @@
-.App {
+.HelloWorld {
   width: 100%;
   min-height: 100vh;
   display: grid;