How & Why i designed ReactorJS

The two main reasons why i designed reactor js:

• A creative javascript solution to writing less code
• Solutions like this often require dependencies or heavy frameworks like angular or react, etc, this doesn't.

App Website: https://reactor-js.com

Introduction

So what exactly is reactor js and why is it of any use?

The short and commercial description is: "Reactor JS is a highly modular and powerful framework designed to help you create custom web designs with much less code.".
You're probably not itnerested in that definition, so let's get real. Reactorjs does actually help web designers with little or no javascript or other framework knowledge to design websites with using as little code as possible. This does not mean it isn't useful for advanced web developers (on the contrary).

Reactorjs also allows the developer to work in a modular fashion similar to angular. Each individual page can be broken down into components, (e.g. a header page, footer, sidebar, etc.) and are all loaded using an html element.

Since reactor js is designed for simplicity, it allows the designer to use only html throught the reactor app.

Idea

Say we wish to design an e-commerce website with a listing of numerous products. An example image is shown below (image taken from https://www.designyourway.net).

To create each product, along with its product image, title, price, description, etc, we can take one of two methods, either use a framework like react, which is not ideal for commercial websites, we can use angular but the same problem arises, or simply the web designer does not have sufficient angular knowledge. The second method is to just write x number of product divs in the markup. This isn't ideal at all and of course not efficient. This is the problem which reactorjs elegantly solves.

Demo

To demonstrate its functionality we will simulate a small demo of reactorjs so you can understand its power and why it allows you to design websites with less code.
The first thing we do to design this website with numerous products is create a new html document and link reactorjs script inside the script tag in the head section.

<script src="https://reactor-js/reactor/reactorjs_2.3.5.js"></script>

In your body tag we add a div element with class "app". Everything inside this app div will be processed by reactor, everything outside it won't be.

Inside our "app" div we create another div with class name "reactorapp", this div will contain our template design. So we can now add our product container div as we would in common web markup. Let's give it the class "reactor". Inside this div container we add an image, a title, a price and perhaps a description, an add to cart button and whatever else we want in the product container.
Now instead of hardcoding the images, title, prices etc. we will inject variables inside them as so:

• Title: "<h2>{winetitle}</h2>"
• Price: "<h4>{wineprice}</h4>"
• Image "<img src='{wineimg}'/> "

We can then style the product container by applying css styles to the <my-product></my-product> containers.
Now we have a product container template which is ready to be instantiated as many times as we need.
How can we achieve this? Firstly, we need to declare our variables which we used on the product template.

Variable declaration in reactor utilizes custom html elements as so (these elements must be outside the "reactor" div):

The first line will be explained later
The second is all the plain text variable declarations (grouped together)
The third are all images variables declarations (grouped together)
(image variables cannot be declared in the reactor-vars tag, and vice-cersa, text variables cannot be declared in the reactor-imsg tag).

Lastly, we can generate any number of product containers that we need by using our variable my-product in a html tag:
<my-product></my-product>

Then our variables are instantiated sing data-ids. For example a "wintitle" variable for one product container can be instantiated like so:
data-winetitle="Cabernet Sauvigon 1924"

Price of a wine product:
data-winetitle="$234.99"

Our wine image:
data-wineimg="cabernet001.jpg"

We can do repeat this for 100 bottles of wine if we wish:

Each product contains its appropriate image, title and price this way. We achieved this writing the template of all the product containers only with a few lines of code.

Your html document should look like this if you did everything correctly.

Note: ReactorJS uses jquery library so make sure you import the jquery library BEFORE the reactorjs library in the head tag of your html.
Note: All CSS styles must use the tag element we declared "my-product" or give each my-product tag a class and style the classes seperately for more flexibility.

Result

The result is a powerful and modular framework that can help us write web design with a lot less code and make our web pages very efficient at the same time. Reactor JS is very useful for ecommerce applications and other apps that require long iterations. Instead of utilizing complex frameworks, reactor makes it intuitively easy and simple to design websites.

Downloads

You can download the entire framework with a demo as a zip file here: https://reactor-js.com/reactor/reactorjs_v2.3.5.zip

Conclusion

ReactorJS is free to use and under Open source license. However a credit is appreciated when using reactorjs.

For more details and applications on my ReactorJS Framework you can visit the official web page.

Website: https://reactor-js.com
Email: [e-mail]