Introduction to Redom.js: Front-end library to manipulate the DOM

Hello everyone, in this post I come to talk to you about a bookstore that I have been using in my personal project Math-worksheets.
His name is Redom.js

What is Redom.js

It is a javascript library that lets you create your entire html tag structure in pure javascript to then generate the DOM using the method

var DOM = document.createelement()

encapsulated within a function that called

var create = el()

syntax

From here we will begin to explain the syntax of Redom.js, from creating a simple HTML tag to creating a complete Dom structure

labels

to create an html tag we must use the function provided by redom.js called the () and we will pass as a first parameter a string with the name of the label we want to create and as a second parameter we will pass another string with the content we want within the label

 var div = el("section","!!Hello World!!") 

writing this is the equivalent of writing in html this

<section>!!Hello World!!</section>

si solo queremos crear un simple div en el primer parametro de la funcion dejaremos el string vacio , asi se creara un div por defecto

 var div = el("","!!Hello World!!") 

writing this is the equivalent of writing in html this

<div>!!Hello World!!</div>

Attributes

if we want to add attributes to the tag we just have to add a point after the name of the tag in the first parameter of the function in case of the classes or a hashtag in the case of IDs

var tag = el('section.style#app')

writing this is the equivalent of writing in html this

<section class="style" id="app"></section>

Nesting

If we want to create a label that is the son of another, all we have to do is nesting with the function that we believe.

var family = el('.father',
    el('.child','Hello'
    )
)

writing this is the equivalent of writing in html this

<div class="father">
    <div class="child">hello</div>
</div>

Child groups

to create a label with several children like for example
in the case of a list, we must create as a child of a function el() an array of functions el()

var brothers = el("ol",
                    [
                    el('li','!!Hi!!'),
                    el('li','!!Hi!!'),
                    el('li','!!Hi!!')
                    ])

writing this is the equivalent of writing in html this

<ol>
    <li>!!Hi!!</li>
    <li>!!Hi!!</li>
    <li>!!Hi!!</li>
</ol>

Mount

after we have our structure made we must enter it in our document, for that we will use the function provided by redom.js called mount() this will allow us to mount our code in our document

var el = el('.Style','Hello')

mount(document.body,el)

using all the concepts that are explained here, you can create very complex structures in a programmatic way with javascript, which gives a better development experience and more possibilities when creating interfaces.

https://redom.js.org/