Reimplemented React demo using hooks.

happy-monk · happy-monk · commit 4b8b63e2c3e2 · 2019-09-30T03:47:45.000+03:00
diff --git a/transcrypt/demos/react_demo/react_demo.html b/transcrypt/demos/react_demo/react_demo.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <title>Hello React!</title>
-    <script src="https://fb.me/react-with-addons-15.1.0.min.js"></script>
-    <script src="https://fb.me/react-dom-15.1.0.min.js"></script>
+    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 	<style>
 		body {font-family:arial;font-size:30px;padding:50px;background-color:#eeeeee;}
 		h1 {font-size:50px;color:#0000ff;}
diff --git a/transcrypt/demos/react_demo/react_demo.py b/transcrypt/demos/react_demo/react_demo.py
@@ -10,24 +10,44 @@ def render(react_element, destination_id, callback=lambda: None):
     ReactDOM.render(react_element, container, callback)
 
 
-# Create a component
+useState = React.useState
+useEffect = React.useEffect
+useRef = React.useRef
+
 
+def useInterval(func, delay):
+    ref = useRef(func)
+    ref.current = func
 
-Hello = React.createClass({
-    'displayName': 'Hello',
+    def setup():
+        id = setInterval(lambda: ref.current(), delay)
+        return lambda: cleanInterval(id)
 
-    'getInitialState': lambda: {'counter': 0},
+    useEffect(setup, [delay])
 
-    'updateCounter': lambda: (this.setState({'counter': this.state['counter']+1})),
 
-    'componentDidMount': lambda: (setInterval(this.updateCounter, 1000)),
+# Create a component
 
-    'render': lambda: h('div', {'className': 'maindiv'},
-                          h('h1', None, 'Hello ', this.props['name']),
-                          h('p', None, 'Lorem ipsum dolor sit ame.'),
-                          h('p', None, 'Counter: ', this.state['counter'])
-                        )
-})
+def Hello(props):
+    count, setCount = useState(0)
+
+    def updateCounter():
+        setCount(count+1)
+
+    useInterval(updateCounter, 1000)
+
+    return h(
+        'div',
+        {'className': 'maindiv'},
+        h('h1', None, 'Hello ', props['name']),
+        h('p', None, 'Lorem ipsum dolor sit ame.'),
+        h('p', None, 'Counter: ', count),
+        h(
+            'button',
+            {'onClick': updateCounter},
+            'Increment',
+        )
+    )
 
 
 # Render the component in a 'container' div
