From ba1aab1861d4bb6f7d262458d0cf9074b908ac2f Mon Sep 17 00:00:00 2001
From: Cameron-C-Chapman <cameron.c.chapman@gmail.com>
Date: Sun, 7 Feb 2021 09:46:15 -0600
Subject: [PATCH] Update react-starter template to latest react version and use
 functional component w/ hooks over class component.

---
 templates/react-starter/package.json | 28 +++++++----
 templates/react-starter/src/App.js   | 72 +++++++++-------------------
 2 files changed, 41 insertions(+), 59 deletions(-)

diff --git a/templates/react-starter/package.json b/templates/react-starter/package.json
index 1c1f6e1..318f484 100644
--- a/templates/react-starter/package.json
+++ b/templates/react-starter/package.json
@@ -8,24 +8,32 @@
   },
   "license": "MIT",
   "dependencies": {
-    "react": "^16.5.2",
-    "react-chartjs-2": "^2.7.6",
-    "react-dom": "^16.5.2"
+    "chart.js": "^2.9.4",
+    "react": "^17.0.1",
+    "react-chartjs-2": "^2.11.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/runtime": "^7.6.3",
+    "@babel/core": "^7.12.13",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/plugin-transform-react-jsx": "^7.12.13",
+    "@babel/plugin-transform-runtime": "^7.12.15",
+    "@babel/runtime": "^7.12.13",
     "babel-preset-nano-react-app": "^0.1.0",
     "cssnano": "^4.1.10",
-    "parcel-bundler": "^1.11.0",
+    "parcel-bundler": "^1.12.4",
     "parcel-plugin-clean-dist": "0.0.6"
   },
   "babel": {
     "presets": [
-      "nano-react-app"
+      "nano-react-app",
+      ["@babel/preset-env",
+        {
+          "loose": true,
+          "useBuiltIns": false,
+          "shippedProposals": true
+        }
+      ]
     ],
     "plugins": [
       [
diff --git a/templates/react-starter/src/App.js b/templates/react-starter/src/App.js
index 5659938..c80b84b 100644
--- a/templates/react-starter/src/App.js
+++ b/templates/react-starter/src/App.js
@@ -1,58 +1,32 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import imageHero from './images/hero.png';
 
-export default class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.state.loading = false;
-    this.state.votes = 0;
-    this.saveVote = this.saveVote.bind(this);
-  }
+const App = () => {
+  const [votes, setVotes] = useState(0);
 
-  /**
-   * Component Did Mount
-   */
-
-  async componentDidMount() {}
-
-  /**
-   * Save Vote
-   */
-
-  async saveVote() {
-    this.setState({ votes: this.state.votes + 1 });
-  }
-
-  /**
-   * Render
-   */
-
-  render() {
-    return (
-      <div className="container">
-        <div className="hero">
-          <img src={imageHero} />
-        </div>
+  return (
+    <div className="container">
+      <div className="hero">
+        <img src={imageHero} />
+      </div>
 
-        <div className="tagline">
-          a website built on serverless components via the serverless framework
-        </div>
+      <div className="tagline">
+        a website built on serverless components via the serverless framework
+      </div>
 
-        <div className="buttonContainer">
-          <div
-            className={`button`}
-            onClick={() => {
-              this.saveVote();
-            }}
-          >
-            <div className={`buttonInner`}>
-              <div className={`buttonLeft`}>ß</div>
-              <div className="buttonRight">{this.state.votes}</div>
-            </div>
+      <div className="buttonContainer">
+        <div
+          className={`button`}
+          onClick={() => { setVotes(votes + 1) }}
+        >
+          <div className={`buttonInner`}>
+            <div className={`buttonLeft`}>ß</div>
+            <div className="buttonRight">{votes}</div>
           </div>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
+
+export default App;