Build a note app with JavaScript component.

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.

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.

$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>



<p>Notes tag that represents the component is identified with>

</p><p>So, the component is designed to add a new note whenever the add note button ( ) is clicked.</p>

<p>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.</p>

<p>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.</p>


          

            
        

The above is the detailed content of Build a note app with JavaScript component.. For more information, please follow other related articles on the PHP Chinese website!