Sure, you have learned about web and React components but today, I will show you JavaScript component as introduced by koras.js.
You might be wondering “What is JavaScript component?”. It is a no-build reusable UI component that works in browsers and servers without a virtual DOM or tagged templates.
It is similar to React component but with some interesting twists. You can learn more about it from koras.js docs.
Seeing is believing. Let’s build a note app with it. The image below shows the look of what we’re going to build and you can use it in real time without any building process at Noteapp
Now, let’s write the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module">
//Note app code goes here.
</script>
</body>
</html>
The code above shows the HTML structure of the app. The code below is for the main operations.
import {
$render,
$register
} from "https://cdn.jsdelivr.net/npm/@codingnninja/koras/dist/esm/koras.min.js";
function Notes() {
function getNotes() {
return localStorage.getItem("notes") ?? "";
}
function saveNote(event) {
$select(".note[delete|textContent=write note...]");
const notes = $select("#notes");
localStorage.setItem("notes", notes.innerHTML);
}
return `
<div id="container">
<div id="notes" data-append="#notes">
${getNotes()}
<div
class="note"
onblur="${saveNote()}"
contenteditable=""
>write note...</div>
</div>
<button
class="add-note-btn"
onclick="$render(Notes)"
> + </button>
</div>
`;
}
$register(Notes);
$render(Notes);
Though the code is self explanatory, let’s explain it a bit. We import $render and $register from koras.js to render our note app without any build process.
$register is used to prepare JavaScript components for rendering with $render. That means we need to register a component before rendering it.
Notes component contains two local functions named getNotes and saveNotes.
function getNotes() {
return localStorage.getItem("notes") ?? "";
}
getNotes gets notes from the localstorage or returns an empty string if nothing is found.
saveNote grabs all the children of the tag containing all notes and store them in the localstorage in form of an HTML string.
function saveNote(event) {
$select(".note[delete|textContent=write note...]");
const notes = $select("#notes");
localStorage.setItem("notes", notes.innerHTML);
}
$select is another utility provided by koras.js to access and manipulate the DOM with ease.
$select is used, in this case, to delete any note containing “write note…” to avoid storing them alongside the real notes.
The return section of Notes component is what appears in the DOM and it is pure HTML.
return `
<div id="container">
<div id="notes" data-append="#notes">
${getNotes()}
<div
class="note"
onblur="${saveNote()}"
contenteditable=""
>write note...</div>
</div>
<button
class="add-note-btn"
onclick="$render(Notes)"
> + </button>
</div>
`;
Notes tag that represents the component is identified with id=“notes” and data-append informs the component to add a new child whenever it is rendered.
So, the component is designed to add a new note whenever the add note button (+) is clicked.
Everything works together to make a note app with the minimal and most concise code snippet ever possible to create a note app in JavaScript whether you use a framework or vanilla JavaScript.
You might be wondering how and why this works? If you want to know more about that, check koras.js docs and don’t forget to star the project on GitHub at koras.js.
Top comments (0)