Slightly updated template

client/src/App.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import HelloWorld from './components/HelloWorld/HelloWorld';
-// import * as api from './api';
-// ^ ^ ^ un-comment this to import api endpoints
-
-function App() {
-  // const [data, setData] = React.useState([]);
-  // React.useEffect(() => {
-  //   api
-  //     .getSomething() // replace this with your endpoint
-  //     .then((response) => console.log(`✅ ${response.status} ${response.statusText}`, setData(response.data)))
-  //     .catch((error) => console.log(`❌ ${error}`));
-  // }, []);
-  //
-  // ^ ^ ^ example using the api endpoint
-
-  return (
-    <div>
-      <HelloWorld />
-    </div>
-  );
-}
-
-export default App;

client/src/api/index.js

@@ -3,10 +3,38 @@ import axios from 'axios';
 // api base-url (that you created on server side)
 const url = 'http://localhost:8080/api/v1';
 
-// current path: http://localhost:8080/api/v1/example
 // current method: GET
-// export const getSomething = () => axios.get(url + '/example');
+// current path: http://localhost:8080/api/v1/example
+export const getExample = () => axios.get(`${url}/example`);
 
-// current path: http://localhost:8080/api/v1/example/upload
 // current method: POST
-// export const postSometing = (form) => axios.post(url + '/example/upload', form);
+// current path: http://localhost:8080/api/v1/example/upload
+export const uploadExample = (form) => axios.post(`${url}/example/upload`, form);
+
+// Example using your API:
+//
+//
+//
+// 1) in your Component file, import a method from above like so:
+//
+//    import { getExample } from './api';
+//
+//
+//
+// 2) Then call the method and handle it's errors/response, like so:
+//
+//    function ExampleFetching() {
+//      const [data, setData] = React.useState([]);
+//
+//      React.useEffect(() => {
+//        getExample()
+//          .then((response) => setData(response.data))
+//          .catch((error) => console.log(error));
+//      }, []);
+//
+//      return (
+//        <div>
+//          {data}
+//        </div>
+//      );
+//    }

client/src/components/App/App.js

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

client/src/components/HelloWorld/HelloWorld.jsx

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

client/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './components/App/App';
 import './style/reset.css';
 
 ReactDOM.render(