playing with react b00tc4mp#183

Claudi1991 · Oct 16, 2024 · 2c03e81 · 2c03e81
1 parent c65efa8
commit 2c03e81
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 0 deletions.
diff --git a/staff/claudi-cano/reactTest/index.html b/staff/claudi-cano/reactTest/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unsocial</title>
+
+    <link rel="shortcut icon" href="https://b00tc4mp.com/favicon.ico" type="image/x-icon">
+
+    <link rel="stylesheet" href="style.css">
+
+    <style>
+        .pepito {
+            background-color: rgb(13, 0, 255);
+        }
+    </style>
+</head>
+
+<body>
+    <div id="root"></div>
+
+    <script src="data/users.js"></script>
+    <script src="data/posts.js"></script>
+
+    <script src="logic/authenticateUser.js"></script>
+    <script src="logic/createPost.js"></script>
+    <script src="logic/getPosts.js"></script>
+    <script src="logic/registerUser.js"></script>
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/staff/claudi-cano/reactTest/main.js b/staff/claudi-cano/reactTest/main.js
@@ -0,0 +1,88 @@
+let loggedInUser = null
+
+const rootElement = document.getElementById("root")
+const root = ReactDOM.createRoot(rootElement)
+
+const title = React.createElement("h1", { style: { backgroundColor: "yellow" } }, "Pero bueno, ¿qué haces tu por este barrio, React?")
+
+const button = React.createElement("button", { type: "button", onClick: () => alert("Clickeado ;)") }, "Clickeame plz :(")
+
+const red = React.createElement("li", { style: { backgroundColor: "red" } }, "ROJO QUE TE COJO")
+const green = React.createElement("li", { style: { backgroundColor: "green" } }, "SMOKE GREEN EVERYDAY")
+const blue = React.createElement("li", { style: { backgroundColor: "blue" } }, "BLUE LABEL ES UN ELIXIIIR")
+const list = React.createElement("ul", { style: { border: "1px solid black" } }, [red, green, blue])
+
+const input = React.createElement("input", { type: "text", id: "whatever", className: "pepito", placeholder: "Whatever bruh!?" })
+const submit = React.createElement("button", { type: "submit", }, "Dale sin miedo")
+const form = React.createElement("form", {
+    onSubmit: event => {
+        event.preventDefault()
+
+        console.log(event.target.whatever.value)
+    }
+}, [input, submit])
+
+const link = React.createElement("a", {
+    href: "",
+    onClick: event => {
+        event.preventDefault()
+
+        console.log("link clicked")
+    },
+    style: {
+        color: "magenta"
+    }
+}, "Clickeame plz :(")
+
+function ReactiveEmoji(props) {
+    const content = React.createElement("span", {
+        onClick: () => alert(`${props.emoji} Jolines!`),
+        style: {
+            cursor: "pointer"
+        }
+    },
+        props.emoji)
+
+    const box = React.createElement("div", {
+        style: {
+            border: "2px solid black",
+            display: "inline-block",
+            padding: "3px"
+        }
+    },
+        content)
+
+    return box
+}
+
+
+
+const { Component } = React
+class Thing extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        const content = React.createElement("span", { style: { padding: "2px" } }, this.props.thing)
+
+        return content
+    }
+}
+
+const redThing = new Thing({ thing: "👫" })
+const greenThing = new Thing({ thing: "🍀" })
+const blueThing = new Thing({ thing: "🥃" })
+
+root.render([
+    title,
+    button,
+    list,
+    redThing.render(),
+    greenThing.render(),
+    blueThing.render(),
+    form,
+    link,
+    ReactiveEmoji({ emoji: "😊" }),
+    ReactiveEmoji({ emoji: "❤️" }),
+])