Answer

src/App.js

@@ -1,60 +1,17 @@
 import React from 'react';
 import logo from './logo.svg';
+import Clock from './Clock';
 import './App.css';
 
-
-// @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() {
+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>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <img src={logo} className="" alt="logo" />
       </header>
-      // See https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
-      <Clock date={new Date()} />,
-    </div>
-  );
+      <Clock />
+      </div>
+  )
 }
 
 export default App;

src/Clock.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+class Clock extends React.Component {
+    // 'constructor' is part of 'class' and React components
+    //always caslled when an instance of our class is created
+    //aka 'contruct'd
+      constructor (props) {
+        super(props)
+        // bad code:  this.state.displayTime = ''
+        // we must set state to an object
+        this.state = {
+          displayTime: '',
+          visitorName: 'Galaxy Cardiff'
+        }
+      }
+
+      // 'componentDidMount' is standard in React
+      // this is where we load data or otherwise initialize data
+      componentDidMount () {
+        this.timerId = setInterval(() => {
+          // call the 'tick'
+          this.tick()
+        }, 1000);
+      }
+
+      tick () {
+        console.log("In tick")
+        this.setState({
+          displayTime: new Date().toLocaleTimeString()
+        })
+      }
+
+      // 'render' is the standard for getting
+      // html into our web page
+      render () {
+        const {displayTime, visitorName} = this.state;
+
+        return (
+          <div className="clock">
+            <h2>Time is {displayTime}</h2>
+            <div>Thanks for visiting {visitorName}</div>
+          </div>
+        )
+      }
+    }
+
+    export default Clock;