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.
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
Reactor also does the heavy lifting for you so you don't need any advanced coding experience. Reactor resembles html markup.
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.
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
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.
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:
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:
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.
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.
Get Reactor from our CDN as a link or download the zip file directly.