display Users

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "new",
+  "name": "test-react-app",
   "version": "1.0.0",
   "description": "",
   "keywords": [],
   "main": "src/index.js",
   "dependencies": {
-    "react": "16.5.2",
-    "react-dom": "16.5.2",
+    "react": "16.7.0-alpha.0 - next",
+    "react-dom": "16.7.0-alpha.0 - next",
     "react-scripts": "2.0.3"
   },
   "devDependencies": {},

src/index.js

@@ -1,17 +1,42 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import ReactDOM from "react-dom";
 
 import "./styles.css";
 
 function App() {
+  const [count, setCount] = useState(42);
+  const [users, setUsers] = useState([]);
+  useEffect(() => {
+    fetch("https://api.github.com/users")
+      .then(response => response.json())
+      .then(data => {
+        setUsers(data); //save users in the store
+      });
+  }, []);
+
   return (
     <div className="App">
-      <h1>Hello CodeSandbox</h1>
-      <h2>Start editing to see some magic happen!</h2>
-      <h1> This is super cool</h1>
-      <h3> I look forward to using this more ... </h3>
-      <h2> </h2>
-      <h3> This is the key of the kingdom</h3>
+      <div>
+        <h3>Counter</h3>
+        <h1>{count} </h1>
+        <button onClick={() => setCount(count + 1)}> Count up </button>
+      </div>
+      <div>
+        <h3> Git Users </h3>
+        <div className="section">
+          {users.map(user => (
+            <div key={user.id} className="card">
+              <h5>
+                {" "}
+                <a href={user.html_url} target="_blank">
+                  <img src={user.avatar_url} width="40px" height="40px" />{" "}
+                </a>
+                {user.login}{" "}
+              </h5>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }