Advanced Features

Special Tags

Special tags are an addon feature to the main reactor app function.

Imagine we wanted a certain product in our online store to possess a unique element which the other products don't? For example, we would like only products on sale to have a certain percentage off deal, or give certain products a bestseller tag. With the basic functions we cannot do this, however with this addon feature we can.

To achieve this we first add the variable which will contain our special element. In this case it is the "discount" variable.

<reactor-vars>{title, price, discount}</reactor-vars>

We add the actual element in our template design and give it the class "reactor-special"

<div class="reactor"> <img src='{img1}'> <h4>{title}</h4> <p class="reactor-special">{discount}</p> <p>{price}</p> <hr/> <p>{descript}</p> <button>Add To Cart</button> </div>

Finally we insert the attribute "reactor-special" to the elements we want to contain the special tag and initiate the data-discount attribute as we normally would.

<my-products data-img1="images/p1.jpg" data-title="Women's Dresses" data-price="$450.00" data-descript="Quality women's tops made with authentic wool."></my-products> <my-products reactor-special data-img1="images/p2.jpg" data-title="Women's Skirts" data-price="$350.00" data-descript="Quality Women's skirts shirts made to last." data-discount="20% OFF"></my-products> <my-products data-img1="images/p3.jpg" data-title="Men's T-Shirts" data-price="$150.00" data-descript="Strecth quality men's button shirts made to last."></my-products>

This can be applied to any number of special tags we desire. Note: even if we forget to remove the attribute data-discount while copying and pasting our product elements, the special tag won't show unless we insert the key attribute "reactor-special".



More Reactor Features

Reactor JS can do much more than generate iterative element designs. Below we will learn the numerous other advanced features which reactor can process including component beams, table generation, modern web designing features amongst others.

Beaming

Reactor offers a page loading feature so we can import or load multiple components into a single page. This enhances modularity and allows us to break up our page designs into multiple modular components much like angular JS does with imports.

Beaming is reactor native and requires components to be contained inside a div with attribute: re-app and empty value.

<div re-beam=""> <h1>This is some code</h1> </div>
Beaming Demo

Now we will import multiple different components into a single page.

We will start with designing sidebar, header and content page components and will beaming we will put all 3 components together on one page.



We design our sidebar component.

sidebar.html
<div re-app=""> <h1>Sidebar component code...</h1> </div>


We design our header component.

header.html
<div re-app=""> <h1>Header component code...</h1> </div>


We design our content component.

content.html
<div re-app=""> <h1>Content component code...</h1> </div>

Now we import all 3 page components into one file.

main.html
<div re-beam="page1.html"></div> <div re-beam="page2.html"></div> <div re-beam="page3.html"></div>


Result

The result is a seamlessly created design which is built from multiple individual components. This helps promote modular web design, and provides easy debugging of code.

main.html
Sidebar component code... Header component code... Content component code...
Styling Components

After we have beamed components in one page, we can style each component individually simply by assigning each component their own class.



Live Writer

Reactor enables us to write from an input field, to an element anywhere on our page with Live Write.

It is super simple to achieve this with reactor. We assign to our input field the attribute "re-read", and to our output element we assign the attribute "re-write".

index.html
<textarea re-read="" type="text"></textarea> <h1 re-write=""></h1>

As we type text inside our textarea, it will be typed out in real time inside the element we assign the attribute "re-write" to.

Demo

Type some text inside this textarea

HTML Designing With Reactor's Live Writer

Reactor's Live Writer also allows us to simulate a html markup design. This means that we can design an html page using the live writer. All we need to do is change out output element from h2 to a div, give it a class name so we can style markup inside of it and write our html within this div.
Jquery also helps to make styling of elements apply in real time when we define styles in the style tag (in head section of html document).
Of course, javascript and jquery are also possible to add in our simulated html document.
The possibilities are endless.

Demo

Type some markup inside the input field below (for example, type an h2 tag with style="color:pink")




List Repeater

Sometime we may wish to design lengthy database style tables or records. Adding lists can be time consuming with traditional methods. Reactor allows us to use a highly efficient and elegant work around.
We will start by wrapping our list repeater app in a container with class "reactor-list". Every list repeater app must go inside a "reactor-list" div and reactor allows us to have as many lists as we wish.



<div class="reactor-list"> <list-repeat>{Tony Stark, Steve Rodgers, Thor Odinsson, Bruce Banner, Natasha Romanoff, Hawkeye, Carol Denvers, Peter Parker, Scott Lang, Stephen Strange, T-challah, Wanda Maximoff, Vision}</list-repeat> <ul re-repeat=""> <!--List elements will be generated here.. --> </ul> </div>

Inside the element tag "list-repeat" we insert our data we wish to have in the list, each list element seperated by a comma. All of these wish are enclosed within curly braces.

Then we create a ul tag and give it the atribute re-repeat="" and we are all done. Reactor will then search for our reactor-list divs (as many as we have) and will iterate through our list elements and populate them inside an html list. We can then go and style our list as we would normally.

Router

Reactor's router serves to load pages in and out efficiently and quickly without reloading the page. This may be useful when designing tabs and each tab needs to display a different part of your app.
Implementing routes with reactor is super simple, let's set up a routing system



<nav> <h6>Home</h6> <h6>Music</h6> <h6>Videos</h6> <h6>Images</h6> <h6>Settings</h6> </nav> <!-- Our containers for home, music, videos, etc.--> <div class="home"> <p>Some content on home page</p> </div> <div class="music-container"> <p>Some music here</p> </div> <div class="videos-container"> <p>Some videos</p> </div>

If we want the music tab to open the music container, the videos tab to open the videos container and so on, we can define some data attributes. The tab element will have the attribute re-router="music", the videos tab will have re-router="videos" and so on.

And our containers will have the same convention. Our music container: re-route="music", our videos container re-route="videos". Note over here the difference between re-router and re-route. Our links or tab element have "re-router" (because they are the routers) and our containers or pages have "re-route" (since they are being routed). That's all we need to do and reactor works under the hood to display the appropriate pages/containers. Here's the full code.

<nav> <h6 re-router="home">Home</h6> <h6 re-router="music">Music</h6> <h6 re-router="videos">Videos</h6> <h6 re-router="images">Images</h6> <h6 re-router="settings">Settings</h6> </nav> <!-- Our containers for home, music, videos, etc.--> <div class="home" re-route="home"> <p>Some content on home page</p> </div> <div class="music-container" re-route="music"> <p>Some music here</p> </div> <div class="videos-container" re-route="videos"> <p>Some videos</p> </div>



More features releasing soon.

Stay tuned for more reactor features coming soon.