Created
May 7, 2021 04:45
-
-
Save realogandrew/3d65f1d3bad4ee1d8f06df6f1114852d to your computer and use it in GitHub Desktop.
Create a React Component Without React
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function CounterComponent() { | |
| // get the ID of root from index.html | |
| const root = document.getElementById("root") | |
| // set counter to 0 | |
| let counter = 0; | |
| // create fragment | |
| const fragment = document.createDocumentFragment() | |
| // create button for counter | |
| const btn = document.createElement("button") | |
| btn.setAttribute("id", "btn-counter") | |
| btn.innerHTML = "Counter" | |
| // create count text div | |
| const current_count = document.createElement("div") | |
| current_count.setAttribute("id", "elem-counter") | |
| // create reset button | |
| const reset_btn = document.createElement("button") | |
| reset_btn.setAttribute("id", "count-reset") | |
| reset_btn.innerHTML = "Reset Count" | |
| // test Hello world with root | |
| // root.innerHTML = `<h1>Hello, world!</h1>` | |
| const current_count_display = count => { | |
| return current_count.innerHTML = `<span style="color: red;">Counter ${count}` | |
| } | |
| const reset_counter = (count) => { | |
| if(count > 10) { | |
| root.append(reset_btn) | |
| } else { | |
| if(document.body.contains(document.getElementById("count-reset"))) { | |
| console.log('false') | |
| reset_btn.remove() | |
| } | |
| } | |
| } | |
| document.addEventListener('click', event=> { | |
| if(event.target && event.target.id === "btn-counter") { | |
| console.log("count") | |
| counter = counter + 1; | |
| current_count_display(counter) | |
| reset_counter(counter) | |
| } | |
| }) | |
| document.addEventListener("click", event => { | |
| if(event.target && event.target.id === "count-reset") { | |
| counter = 0; | |
| current_count.innerHTML = "Count reset" | |
| } | |
| }) | |
| fragment.appendChild(btn) | |
| fragment.appendChild(current_count) | |
| return root.appendChild(fragment) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Basics of React</title> | |
| </head> | |
| <body> | |
| <noscript>Please enable JavaScript to use this website.</noscript> | |
| <div id="root"></div> | |
| <script type="module" src="js/main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {CounterComponent} from "./counter.js" | |
| CounterComponent() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment