From 5df47027ed37fbe44c52040ce3a6c7a22219d338 Mon Sep 17 00:00:00 2001
From: Leonard Bogdonoff <lkbgift@gmail.com>
Date: Mon, 11 May 2020 20:57:58 -0400
Subject: [PATCH 1/2] Update the React example to use functions.

Removing the class example to modernize the React best practices.
---
 react/src/ui.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/react/src/ui.tsx b/react/src/ui.tsx
index b4e0626..f6e8526 100644
--- a/react/src/ui.tsx
+++ b/react/src/ui.tsx
@@ -4,20 +4,20 @@ import './ui.css'
 
 declare function require(path: string): any
 
-class App extends React.Component {
-  textbox: HTMLInputElement
+const App = () => {
+  let textbox: HTMLInputElement;
 
-  countRef = (element: HTMLInputElement) => {
+  const countRef = (element: HTMLInputElement) => {
     if (element) element.value = '5'
-    this.textbox = element
+    textbox = element
   }
 
-  onCreate = () => {
-    const count = parseInt(this.textbox.value, 10)
+  const onCreate = () => {
+    const count = parseInt(textbox.value, 10)
     parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*')
   }
 
-  onCancel = () => {
+  const onCancel = () => {
     parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
   }
 
@@ -25,9 +25,9 @@ class App extends React.Component {
     return <div>
       <img src={require('./logo.svg')} />
       <h2>Rectangle Creator</h2>
-      <p>Count: <input ref={this.countRef} /></p>
-      <button id="create" onClick={this.onCreate}>Create</button>
-      <button onClick={this.onCancel}>Cancel</button>
+      <p>Count: <input ref={countRef} /></p>
+      <button id="create" onClick={onCreate}>Create</button>
+      <button onClick={onCancel}>Cancel</button>
     </div>
   }
 }

From dfebe4902deef039ce8c6998094df2eef060d1e8 Mon Sep 17 00:00:00 2001
From: Leonard Bogdonoff <lkbgift@gmail.com>
Date: Mon, 11 May 2020 21:03:34 -0400
Subject: [PATCH 2/2] Turn class into functional component

Removing the class example to modernize the React best practices.
---
 react/src/ui.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/react/src/ui.tsx b/react/src/ui.tsx
index f6e8526..b7992be 100644
--- a/react/src/ui.tsx
+++ b/react/src/ui.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import './ui.css'
+import Logo from './logo.svg'
 
 declare function require(path: string): any
 
@@ -23,7 +24,7 @@ const App = () => {
 
   render() {
     return <div>
-      <img src={require('./logo.svg')} />
+      <img src={Logo} />
       <h2>Rectangle Creator</h2>
       <p>Count: <input ref={countRef} /></p>
       <button id="create" onClick={onCreate}>Create</button>