Zero-Configuration Setup

the-road-to-learn-react · Mar 9, 2019 · 124600e · 124600e
1 parent aced8c0
commit 124600e
Show file tree

Hide file tree

Showing 13 changed files with 4,237 additions and 3,664 deletions.
diff --git a/README.md b/README.md
@@ -4,13 +4,6 @@
 
 The application you will build when you read the book to [learn React](https://www.robinwieruch.de/the-road-to-learn-react/).
 
-* [Chapter 1 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.1)
-* [Chapter 2 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.2)
-* [Chapter 3 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.3.1)
-* [Chapter 4 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.4)
-* [Chapter 5 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.5)
-* [Chapter 6 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.6)
+Find all chapter outcomes over [here](https://github.com/the-road-to-learn-react/hackernews-client).
 
-You can find the different chapter commits [in the releases](https://github.com/rwieruch/hackernews-client/releases) too.
-
-After reading the book, you can continue to [learn about Redux and MobX in React](https://roadtoreact.com) for state management.
+After reading the book, you can continue to [learn more about JavaScript](https://roadtoreact.com).
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,24 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
-    "classnames": "^2.2.6",
-    "lodash": "^4.17.11",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "react-scripts": "2.1.0"
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-scripts": "2.1.8"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "devDependencies": {
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
-    "react-addons-test-utils": "^15.6.2",
-    "react-test-renderer": "^16.5.2"
+  "eslintConfig": {
+    "extends": "react-app"
   },
   "browserslist": [
     ">0.2%",

diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
     <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+      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">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <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.
@@ -22,9 +25,7 @@
     <title>React App</title>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/public/manifest.json b/public/manifest.json
@@ -8,7 +8,7 @@
       "type": "image/x-icon"
     }
   ],
-  "start_url": "./index.html",
+  "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"

diff --git a/src/App.css b/src/App.css
@@ -1,63 +1,33 @@
-.page {
-  margin: 20px;
-}
-
-.interactions {
+.App {
   text-align: center;
 }
 
-.table {
-  margin: 20px 0;
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
 }
 
-.table-header {
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
   display: flex;
-  line-height: 24px;
-  font-size: 16px;
-  padding: 0 10px;
-  justify-content: space-between;
-}
-
-.table-empty {
-  margin: 200px;
-  text-align: center;
-  font-size: 16px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
 }
 
-.table-row {
-  display: flex;
-  line-height: 24px;
-  white-space: nowrap;
-  margin: 10px 0;
-  padding: 10px;
-  background: #ffffff;
-  border: 1px solid #e3e3e3;
+.App-link {
+  color: #61dafb;
 }
 
-.table-header > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 5px;
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
-
-.table-row > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 5px;
-}
-
-.button-inline {
-  border-width: 0;
-  background: transparent;
-  color: inherit;
-  text-align: inherit;
-  -webkit-font-smoothing: inherit;
-  padding: 0;
-  font-size: inherit;
-  cursor: pointer;
-}
-
-.button-active {
-  border-radius: 0;
-  border-bottom: 1px solid #38BB6C;
-}