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

View this thread on steempeak.com
utopian-io · @kikers17 ·
$1.33
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
```javascript
var DOM = document.createelement()
```
encapsulated within a function that called
```javascript
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
```javascript
 var div = el("section","!!Hello World!!") 
``` 
writing this is the equivalent of writing in html this
```html
<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
```javascript
 var div = el("","!!Hello World!!") 
``` 
writing this is the equivalent of writing in html this 
```html
<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 
```javascript
var tag = el('section.style#app')
``` 
writing this is the equivalent of writing in html this
```html
<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.

```javascript
var family = el('.father',
	el('.child','Hello'
	)
)
```
writing this is the equivalent of writing in html this
```html
<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()
```javascript
var brothers = el("ol",
					[
					el('li','!!Hi!!'),
					el('li','!!Hi!!'),
					el('li','!!Hi!!')
					])
```
writing this is the equivalent of writing in html this

```html

<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
```javascript
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/
πŸ‘  , , , , , , , , , , , , , ,
properties (23)
post_id66,342,031
authorkikers17
permlinkintroduction-to-redom-js-front-end-library-to-manipulate-the-dom
categoryutopian-io
json_metadata{"users":[],"format":"markdown","image":[],"tags":["utopian-io","blog","redom","web","personal"],"community":"busy","links":["https:\/\/redom.js.org\/"],"app":"busy\/2.5.6"}
created2018-11-20 20:23:15
last_update2018-11-20 20:23:15
depth0
children7
net_rshares2,142,649,468,161
last_payout2018-11-27 20:23:15
cashout_time1969-12-31 23:59:59
total_payout_value1.001 SBD
curator_payout_value0.325 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length2,989
author_reputation327,759,701,601
root_title" Introduction to Redom.js: Front-end library to manipulate the DOM"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (15)
@steem-plus ·
SteemPlus upvote
Hi, @kikers17!

You just got a **0.29%** upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in [here](https://steemit.com/@steem-plus) to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.
properties (22)
post_id66,356,323
authorsteem-plus
permlinkintroduction-to-redom-js-front-end-library-to-manipulate-the-dom---vote-steemplus
categoryutopian-io
json_metadata{}
created2018-11-21 03:21:27
last_update2018-11-21 03:21:27
depth1
children0
net_rshares0
last_payout2018-11-28 03:21:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length435
author_reputation247,995,867,762,997
root_title" Introduction to Redom.js: Front-end library to manipulate the DOM"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@mcfarhat ·
$5.93
Thank you for your contribution.
- Your overall text has key English syntax issues causing the text to be incomprehensible at many times.
- You did not introduce Redom at the start, you jumped right into a weird example that does not properly illustrate what you are planning to teach
- The samples you provided can all be properly found and documented in the redom official documentation. If you want to provide a good tutorial, try to build something useful with it and not just re-document their ideas
- Try to follow utopian templates for tutorials to write higher quality tutorials.
- Try to provide your own gist/github code relevant to the tutorial


Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/8/31434443).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , , , , ,
properties (23)
post_id66,384,479
authormcfarhat
permlinkre-kikers17-introduction-to-redom-js-front-end-library-to-manipulate-the-dom-20181121t161650005z
categoryutopian-io
json_metadata{"links":["https:\/\/join.utopian.io\/guidelines","https:\/\/review.utopian.io\/result\/8\/31434443","https:\/\/support.utopian.io\/","https:\/\/discord.gg\/uTyJkNm","https:\/\/join.utopian.io\/"],"app":"steemit\/0.1","tags":["utopian-io"]}
created2018-11-21 16:17:21
last_update2018-11-21 16:17:21
depth1
children1
net_rshares9,612,227,962,622
last_payout2018-11-28 16:17:21
cashout_time1969-12-31 23:59:59
total_payout_value4.491 SBD
curator_payout_value1.440 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length1,148
author_reputation104,178,422,702,645
root_title" Introduction to Redom.js: Front-end library to manipulate the DOM"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (10)
@utopian-io · 
Thank you for your review, @mcfarhat! Keep up the good work!
properties (22)
post_id66,503,475
authorutopian-io
permlinkre-re-kikers17-introduction-to-redom-js-front-end-library-to-manipulate-the-dom-20181121t161650005z-20181124t041649z
categoryutopian-io
json_metadata{"app":"beem\/0.20.9"}
created2018-11-24 04:16:51
last_update2018-11-24 04:16:51
depth2
children0
net_rshares0
last_payout2018-12-01 04:16:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length60
author_reputation152,913,012,544,965
root_title" Introduction to Redom.js: Front-end library to manipulate the DOM"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@steem-ua · 
#### Hi @kikers17!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
properties (22)
post_id66,386,773
authorsteem-ua
permlinkre-introduction-to-redom-js-front-end-library-to-manipulate-the-dom-20181121t171412z
categoryutopian-io
json_metadata{"app":"beem\/0.20.9"}
created2018-11-21 17:14:15
last_update2018-11-21 17:14:15
depth1
children0
net_rshares0
last_payout2018-11-28 17:14:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length287
author_reputation23,203,609,903,979
root_title" Introduction to Redom.js: Front-end library to manipulate the DOM"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@utopian-io · 
Hey, @kikers17!

**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Get higher incentives and support Utopian.io!**
 Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via [SteemPlus](https://chrome.google.com/webstore/detail/steemplus/mjbkjgcplmaneajhcbegoffkedeankaj?hl=en) or [Steeditor](https://steeditor.app)).

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
post_id66,408,314
authorutopian-io
permlinkre-introduction-to-redom-js-front-end-library-to-manipulate-the-dom-20181122t041223z
categoryutopian-io
json_metadata{"app":"beem\/0.20.9"}
created2018-11-22 04:12:24
last_update2018-11-22 04:12:24
depth1
children0
net_rshares0
last_payout2018-11-29 04:12:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length590
author_reputation152,913,012,544,965
root_title" Introduction to Redom.js: Front-end library to manipulate the DOM"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@steemitboard · 
Congratulations @kikers17! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@kikers17/payout.png?201811270319</td><td>You received more than 10 as payout for your posts. Your next target is to reach a total payout of 50</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@kikers17)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
post_id66,639,749
authorsteemitboard
permlinksteemitboard-notify-kikers17-20181127t035931000z
categoryutopian-io
json_metadata{"image":["https:\/\/steemitboard.com\/img\/notify.png"]}
created2018-11-27 03:59:30
last_update2018-11-27 03:59:30
depth1
children0
net_rshares0
last_payout2018-12-04 03:59:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length783
author_reputation38,705,954,145,809
root_title" Introduction to Redom.js: Front-end library to manipulate the DOM"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@steemitboard · 
Congratulations @kikers17! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@kikers17/votes.png?201812242331</td><td>You made more than 1500 upvotes. Your next target is to reach 1750 upvotes.</td></tr>
</table>

<sub>_[Click here to view your Board](https://steemitboard.com/@kikers17)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png"></a></td><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends">Christmas Challenge - Send a gift to to your friends</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
post_id67,873,451
authorsteemitboard
permlinksteemitboard-notify-kikers17-20181224t235959000z
categoryutopian-io
json_metadata{"image":["https:\/\/steemitboard.com\/img\/notify.png"]}
created2018-12-24 23:59:57
last_update2018-12-24 23:59:57
depth1
children0
net_rshares0
last_payout2018-12-31 23:59:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length1,190
author_reputation38,705,954,145,809
root_title" Introduction to Redom.js: Front-end library to manipulate the DOM"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
Help/Feedback