App

Get Started

To get started quickly, Reactor JS has only one dependency which is the Jquery library. Since reactor is written in jquery, it requires the jquery library script to be added in the head tag of the head of main html page. Then below that, we can insert the reactor library script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="http://reactor-js.com/reactor/reactorjs_2.4.1.js"></script>

What is Reactor.JS

Reactor JS is a highly modular and powerful framework designed to help you create custom web designs with much less code.
The Reactor JS framework enables a web developer to build an instance of an html component and pass that component to be rendered as many times as necessary. Then, initiating our variables as data-ids in our html elements, we can produce the desired output.


Reactor lets us design beautiful websites using less code

Coding

Reactor also does the heavy lifting for you so you don't need any advanced coding experience. Reactor resembles html markup.

Reactor Syntax
<reactor-container>{my-products}</reactor-container> <reactor-vars>{title, price, descript}</reactor-vars> <reactor-links>{link}</reactor-links> <reactor-imgs>{img1}</reactor-imgs>

The reactor language is developed from very simple syntax. Elements and variables are declared inside html tags that are prefixed with "reactor-". Variables must be enclosed inside curly braces.

  • App variables are declared inside "reactor-container" tag
  • Plain text variables are declared inside "reactor-vars"
  • Media (images) variables are declared inside "reactor-images"

Demo

To understand how reactor works let us start with a simple demo.

We would like to design a featured products page component for an e-commerce website. We go ahead and design the component as shown below. We can first create a new page to write this code in. Let's call this page store.html

store.html
<!--html, body and head tags along with any other markup we want to have before our product showcase section...--> <div class="re-app"> <div class="reactorapp"> <div class="reactor"> <img src='{img1}'> <h4>{title}</h4> <p>{price}</p> <hr/> <p>{descript}</p> <button>Add To Cart</button> <a href="{link}">{link}</a> </div> </div> </div> <!-- more markup...-->

This allows us to create a product template. Reactor will then process this template (everything inside our div with class "reactor") and apply it to however many products we need. The, using reactor variables we can dynamically change each product's image, text, price, description, etc.

Every reactor app must be contained inside our main div with class "app".

The template structure or product markup in our case must be contained in a div with class "reactor" as shown above, this in turn is contained inside a parent div with class "reactorapp". Our "reactorapp" div will contain our variable declaration which will be shown below.

Inside our "reactor" div we have common html markup but instead of hard-coding the data (text, images, etc) we will use variables, as displayed. Reactor variables are enclosed inside curly braces.

store.html
<div class="re-app"> <div class="reactorapp"> <my-products data-img1="images/p1.jpg" data-title="Women's Dresses" data-price="$450.00" data-link="https://reactor-js.com" data-descript="Quality women's tops made with authentic wool."></my-products> <my-products data-img1="images/p2.jpg" data-title="Women's Skirts" data-price="$350.00" data-link="https://reactor-js.com" data-descript="Quality Women's skirts shirts made to last."></my-products> <my-products data-img1="images/p3.jpg" data-title="Men's T-Shirts" data-price="$150.00" data-link="https://reactor-js.com" data-descript="Strecth quality men's button shirts made to last."></my-products> <reactor-container>{my-products}</reactor-container> <reactor-vars>{title, price, descript}</reactor-vars> <reactor-links>{link}</reactor-links> <reactor-imgs>{img1}</reactor-imgs> <div class="reactor"> <img src='{img1}'> <h4>{title}</h4> <p>{price}</p> <hr/> <p>{descript}</p> <button>Add To Cart</button> <a href="{link}">{link}</a> </div> </div> </div>

Finally we create each product we wish to add to our store using "my-products" tag element and instantiate the respective data-ids to dynamically change their properties like product image, title, price etc. (As shown above). Our variables which we declared will replace the 'ids' in data-ids. For example to instantiate the title of a product with "Brown Bag" we can write:

<my-products data-title="Brown Bag"></my-products> Images used in data-ids require only the src attribute as shown above.


Styling our elements

To style our product containers and everything inside them, we use the selector element which we declared above "my-products". For example to give the product containers a white background and style the h2 tag inside, we would apply:

style.css
my-products { background-color:white; } my-products h4 { font-size: 25px; color: black; }

Result

The result is a dynamically created product showcase design, which can be easily modified and created as effciently as possible all the while using very little code.

Why Reactor.JS

Reactor is platform independent and requires little coding skills.

Other libraries and frameworks allow you to perform similar techniques as Reactor JS, such as Angular or React JS, but Reactor is designed to stand out as an extremely simple system of iteratively creating similar components with much less code than other frameworks.

Additionally, reactor js houses numerous other functionalities such as component importing features to simulate modularity, records generating iterations and other advanced functionalities which can be discovered in the advanced features page.

Download Reactor

Get Reactor from our CDN as a link or download the zip file directly.

CDN Copied