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.
We add the actual element in our template design and give it the class "reactor-special"
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.
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".
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.
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.
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.
We design our header component.
We design our content component.
Now we import all 3 page components into one file.
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.
After we have beamed components in one page, we can style each component individually simply by assigning each component their own class.
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".
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.
Type some text inside this textarea
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).
The possibilities are endless.
Type some markup inside the input field below (for example, type an h2 tag with style="color:pink")
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.
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.
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
Some content on home page
Some music here
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.
Some content on home page
Some music here
Stay tuned for more reactor features coming soon.