add react stuff demos b00tc4mp#51

manuelbarzi · Jul 2, 2024 · d1bd5f7 · d1bd5f7
1 parent ef25fc9
commit d1bd5f7
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 0 deletions.
diff --git a/stuff/react/demo.0/index.html b/stuff/react/demo.0/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello, React!</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/stuff/react/demo.0/main.js b/stuff/react/demo.0/main.js
@@ -0,0 +1,29 @@
+const title = document.createElement('h1')
+title.innerText = 'Hello, World!'
+
+const query = document.createElement('input')
+query.type = 'text'
+query.name = 'q'
+
+const form = document.createElement('form')
+form.action = 'https://www.google.com/search'
+form.appendChild(query)
+
+const samu = document.createElement('li')
+samu.innerText = 'Samu'
+
+const edu = document.createElement('li')
+edu.innerText = 'Edu'
+
+const marti = document.createElement('li')
+marti.innerText = 'Marti'
+
+const people = document.createElement('ul')
+people.appendChild(samu)
+people.appendChild(edu)
+people.appendChild(marti)
+
+const root = document.getElementById('root')
+root.appendChild(title)
+root.appendChild(form)
+root.appendChild(people)
diff --git a/stuff/react/demo.1/index.html b/stuff/react/demo.1/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello, React!</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/stuff/react/demo.1/main.js b/stuff/react/demo.1/main.js
@@ -0,0 +1,17 @@
+const title = React.createElement('h1', { children: 'Hello, World!' })
+
+const query = React.createElement('input', { type: 'text', name: 'q', placeholder: 'Search' })
+
+const form = React.createElement('form', {
+    children: query,
+    action: 'https://www.google.com/search'
+})
+
+const samu = React.createElement('li', { children: 'Samu' })
+const edu = React.createElement('li', { children: 'Edu' })
+const marti = React.createElement('li', { children: 'Martí' })
+
+const people = React.createElement('ul', { children: [samu, edu, marti] })
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render([title, form, people])
diff --git a/stuff/react/demo/index.html b/stuff/react/demo/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello, React!</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/stuff/react/demo/main.js b/stuff/react/demo/main.js
@@ -0,0 +1,78 @@
+const title = React.createElement('h1', { children: 'Hello, World!' })
+
+const query = React.createElement('input', { type: 'text', name: 'q', placeholder: 'Search' })
+
+const form = React.createElement('form', {
+    children: query,
+    action: 'https://www.google.com/search'
+})
+
+const samu = React.createElement('li', { children: 'Samu' })
+const edu = React.createElement('li', { children: 'Edu' })
+const marti = React.createElement('li', { children: 'Martí' })
+
+const people = React.createElement('ul', { children: [samu, edu, marti] })
+
+const Component = React.Component
+
+class Hello extends Component {
+    constructor() {
+        super()
+    }
+
+    render() {
+        return React.createElement('h1', { children: 'Hello!' })
+    }
+}
+
+function Goodbye() {
+    return React.createElement('h1', { children: 'Goodbye!' })
+}
+
+class Counter extends Component {
+    constructor() {
+        super()
+
+        this.state = { count: 0 }
+    }
+
+    handleClick() {
+        this.setState({ count: this.state.count + 1 })
+    }
+
+    render() {
+        // const self = this
+
+        return React.createElement('button', {
+            children: this.state.count,
+
+            // FAILS!
+            // onClick: function () {
+            //     this.setState({ count: this.state.count + 1 })
+            // }
+
+            // WORKS!
+            // onClick: function () {
+            //     self.setState({ count: self.state.count + 1 })
+            // }
+
+            // WORKS!
+            // onClick: () => {
+            //     this.setState({ count: this.state.count + 1 })
+            // }
+
+            // WORKS!
+            // onClick: function () {
+            //     self.handleClick()
+            // }
+
+            // WORKS!
+            onClick: () => this.handleClick()
+        })
+    }
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+// root.render([title, form, people, new Hello().render(), Goodbye(), new Counter().render()])
+root.render([title, form, people, React.createElement(Hello, {}), React.createElement(Goodbye, {}), React.createElement(Counter, {})])
+