Merge pull request #2 from epythonlab/react

React Login UI

Author: epythonlab

nodejs/console.js

@@ -0,0 +1,14 @@
+/* frequently used to log some sort of output */
+console.log('This is my first node js');
+/* explicitly delivers a warning to the console */
+console.warn();
+/* explicitly delivers an error message to the console
+  You can log an error as a string or as an object.
+  If logged as a new Error(), a traceback will be
+  included as part of the message
+  */
+console.error();
+/* Logs a traceback when an error occurs in your code.
+  Gives line number and column number of the file that
+  the error probably occurred */
+console.trace();

nodejs/data.txt

@@ -0,0 +1,3 @@
+1,Asibeh,Tenager,asibeh@gmail.com,female
+2,Fuad,Mohammed,fuad@gail.com,male
+3,Alemstehay,Melese,Alemstehay@gamil.com,female

nodejs/first.js

@@ -0,0 +1,17 @@
+// Load HTTP module
+const http = require("http");
+const hostname = "127.0.0.1";
+const port = 8000;
+// Create HTTP server
+const server = http.createServer(function (req, res) {
+  // Set the response HTTP header with HTTP status and
+  // Content type
+  res.writeHead(200, { "Content-Type": "text/plain" });
+
+  // Send the response body "Hello World"
+  res.end("Welcome to Sage Training Institute\n");
+});
+// Prints a log once the server starts listening
+server.listen(port, hostname, function () {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});

nodejs/readFile.js

@@ -0,0 +1,26 @@
+const fs = require('fs')
+// with readFile
+fs.readFile('data.txt', 'utf-8', (err, data) =>{
+  if (err){
+    console.error(err)
+    return
+  }
+  let array = data.split('\n')
+  // props are id, first_name, last_name, email, gender
+  let mapped = array.map(person =>{
+    /* Map is a type of data structure or data collection
+       that is used to store the data in the form of key and value pairs 
+      */
+    let new_person = person.split(',');
+    return new Object({
+      id: new_person[0],
+      first_name: new_person[1],
+      last_name: new_person[2],
+      email: new_person[3],
+      gender: new_person[4]
+
+    })
+  });
+  console.log(mapped)
+});
+console.log('Hit!')

nodejs/readFileSync.js

@@ -0,0 +1,20 @@
+const fs = require('fs')
+try{
+  const data = fs.readFileSync('data.txt', 'utf-8')
+  let array = data.split('\n')
+  // props are id, first_name, last_name, email, gender
+  let mapped = array.map(person =>{
+    let new_person = person.split(',')
+    return new Object({
+      id: new_person[0],
+      first_name: new_person[1],
+      last_name: new_person[2],
+      email: new_person[3],
+      gender: new_person[4]
+    })
+  });
+  console.log(mapped)
+}catch(err){
+  console.error(err)
+}
+console.log('Hit!')

react/reactapp/package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

react/reactapp/package.json

@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -39,5 +40,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
   </body>
 </html>

react/reactapp/public/index.html

@@ -0,0 +1,53 @@
+/* Ajax API call with react hooks */
+import './bmi.css';
+import {useState, useEffect} from 'react';
+function AjaxApi(){
+
+  const [error, setError] = useState(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [items, setItems] = useState([]);
+  // Note: the empty deps array [] means
+
+  useEffect(()=>{
+    document.title ='AjaxApi Call';
+  })
+  // this useEffect will run once
+  useEffect(() => {
+    /* The Fetch API through the fetch() method
+      allows us to make an HTTP request to the backend.*/
+    fetch("https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8")
+      .then(res => res.json())
+      .then(
+        (result)=> {
+          setIsLoaded(true);
+          setItems(result)
+        },
+        /* Note: it is important to handle error here
+         instead of a catch() block so that we don't swallow
+         exceptions from actual bugs in components.
+        */
+        (error) => {
+          setIsLoaded(true);
+          setError(error);
+        }
+      )
+  },[])
+  if (error) {
+    return <div className="container"> Error: {error.message} </div>;
+  }else if(!isLoaded){
+    return <div>Loading...</div>;
+  }else{
+    return (
+      <div className="app">
+        <ul className='container'>
+          {items.map(item => (
+            <li key={item.id} className='txtCenter'>
+              Name:{item.name}, City: {item.city}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
+export default AjaxApi;

react/reactapp/src/AjaxApi.js

@@ -0,0 +1,14 @@
+/*JUMP STEP 2 - 6
+      ------------------
+    2. INSTALL react router with npm in your react project
+      $ npm install react-router-dom
+
+    3.CREATE the following directory in src
+      src/components
+    4. CREATE the following components in src/components directory
+      - src/components/Dashboard.js
+      - src/components/Preferences.js
+    5. Go to App.js and route required components
+
+    6. After routes are added in App.js, go to index.js
+*/