SummerOfCode2020 · ghost · Aug 13, 2020 · Aug 13, 2020 · Aug 13, 2020 · Aug 13, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
+  <title>React 101</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/src/App.css b/src/App.css
@@ -35,4 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -1,58 +1,46 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import Code from "./code.PNG";
+import "./App.js";
+import Clock from "./modules/Clock";
 
-
-// @see https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
-class Clock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {date: new Date()};
-  }
-
-  componentDidMount() {
-    this.timerID = setInterval(
-      () => this.tick(),
-      1000
-    );
-  }
-
-  tick() {
-    this.setState({
-      date: new Date()
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
-      </div>
-    );
-  }
-}
-
-// @see https://reactjs.org/docs/create-a-new-react-app.html
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload. Ok.
-        </p>
+  const footer = (
+    <div>
+      <p>
+        You can see the full code on{" "}
         <a
           className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+          href="https://github.com/erick-pacheco/week-11-react-create-react-app/"
         >
-          Learn React
+          GitHub
         </a>
+      </p>
+    </div>
+  );
+  const brandNav = (
+    <nav className="navbar navbar-dark bg-dark App-link">
+      <h5>Let's Learn React!</h5>
+      <a class="p-2 text-white" href="#">
+        <Clock />
+      </a>
+    </nav>
+  );
+  const codeSnippet = (
+    <div className="App">
+      <header>
+        <br />
+        <h5>A snippet of the code you are interacting with</h5>
       </header>
-      // See https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
-      <Clock date={new Date()} />,
+      <div className="shadow-lg p-3 mb-5 bg-white rounded ">
+        <img src={Code} className=" rounded img-fluid"></img>
+      </div>
+      {footer}
+    </div>
+  );
+  return (
+    <div className="container">
+      {brandNav}
+      {codeSnippet}
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  const linkElement = getByText(/about/i);
   expect(linkElement).toBeInTheDocument();
 });
diff --git a/src/code.PNG b/src/code.PNG
diff --git a/src/modules/Clock.js b/src/modules/Clock.js
@@ -0,0 +1,54 @@
+import React from "react";
+import "../App.css";
+
+/** the class `Clock` is a "node" in the DOM */
+class Clock extends React.Component {
+  /** `constructor` is part of `class` and React components
+   * always called when an intance of our class is created aka `construct`d
+   */
+  constructor(props) {
+    super(props);
+    // bad code: this.state.showTime = "";
+    // we must set state to an object
+
+    this.state = {
+      showTime: "",
+      visitorName: "John Doe",
+    };
+  }
+
+  /**
+   * `componentDidMount` is standard in React
+   * (this is where we load data or otherwise initialize data)
+   */
+
+  componentDidMount() {
+    console.log("count");
+    this.timerID = setInterval(() => {
+      // call the `tick`
+      this.tick();
+    }, 1000);
+  }
+
+  // custom method
+  tick() {
+    this.setState({
+      showTime: new Date().toLocaleTimeString(),
+    });
+  }
+  /**
+   * `render` is standard for getting html into our webpage
+   */
+  render() {
+    const { showTime, visitorName } = this.state;
+    return (
+      <div>
+        <p>
+          Thank you for visiting {visitorName}, It's {showTime}
+        </p>
+      </div>
+    );
+  }
+}
+
+export default Clock;
diff --git a/src/modules/notes.js b/src/modules/notes.js
@@ -0,0 +1,13 @@
+// import React from "react";
+// // 1. it declares a `class` its name and `extends` as a react component aka dome node using `React.Component`
+
+// class notes extends React.Component {
+//   constructor(props) {
+//     super(
+//       props /** The constructor for a React component is called before it is mounted.
+//         When implementing the constructor for a React.Component subclass, you should call super(props)
+//         before any other statement. Otherwise,this.props will be undefined in the constructor,
+//         which can lead to bugs. */
+//     );
+//   }
+// }
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,4 +35,4 @@ @@
       to {
         transform: rotate(360deg);
       }
-    }
+    }