diff --git a/react/src/ui.tsx b/react/src/ui.tsx
index b4e0626..b7992be 100644
--- a/react/src/ui.tsx
+++ b/react/src/ui.tsx
@@ -1,33 +1,34 @@
 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
 
-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' } }, '*')
   }
 
   render() {
     return <div>
-      <img src={require('./logo.svg')} />
+      <img src={Logo} />
       <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>
   }
 }