add usestate-hook-practice starting files

rowantseng · rowantseng · commit d36fb4271cbb · 2021-06-11T17:14:11.000+08:00
diff --git a/react-usestate-hook-practice/package.json b/react-usestate-hook-practice/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "usestate-hook-practice",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "react-scripts": "3.2.0"
+  },
+  "devDependencies": {
+    "typescript": "3.3.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/react-usestate-hook-practice/public/index.html b/react-usestate-hook-practice/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>React App</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="../src/index.js" type="text/jsx"></script>
+  </body>
+</html>
diff --git a/react-usestate-hook-practice/public/styles.css b/react-usestate-hook-practice/public/styles.css
@@ -0,0 +1,30 @@
+body {
+  font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
+  color: #fff;
+  padding: 50px;
+  width: 300px;
+  margin: 0 auto;
+  background-color: #374954;
+  text-align: center;
+}
+
+h1 {
+  font-size: 100px;
+}
+
+.container {
+  margin: 60% auto;
+}
+
+button {
+  display: inline;
+  background-color: #6bbe92;
+  border: 0;
+  border-radius: 10px;
+  box-shadow: 5px;
+  margin: 10px;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  font-size: 50px;
+}
diff --git a/react-usestate-hook-practice/src/components/App.jsx b/react-usestate-hook-practice/src/components/App.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+function App() {
+  return (
+    <div className="container">
+      <h1>TIME</h1>
+      <button>Get Time</button>
+    </div>
+  );
+}
+
+export default App;
diff --git a/react-usestate-hook-practice/src/index.js b/react-usestate-hook-practice/src/index.js
@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+//Challenge:
+//1. Given that you can get the current time using:
+let time = new Date().toLocaleTimeString();
+console.log(time);
+//Show the latest time in the <h1> when the Get Time button
+//is pressed.
+
+//2. Given that you can get code to be called every second
+//using the setInterval method.
+//Can you get the time in your <h1> to update every second?
+
+//e.g. uncomment the code below to see Hey printed every second.
+// function sayHi() {
+//   console.log("Hey");
+// }
+// setInterval(sayHi, 1000);
