Working with the Grid Addons to change or modify the style of the Grid

Follow the below steps to modify or change the Grid :-

Installing reactive-render grid addons

You can install reactive-render gird addons just like any other wordpress plugin. After installing the addons activate it.

Installing Node:

To work with Rendering Grid Addons the first thing you need is to have Node install on your system. To make sure you have already installed Node js on your system you may follow the below instructions :-

As Node will make sure you have node and npm commands are available via command line, just rund the below command on your terminal

node -v

npm -v

On successful installation, it will print out the respective versions.

Open the Rendering Grid Addons folder in your terminal

After installing Node you need to open the Rendering grid addons to your terminal. You can find the Rendering grid addons in the wp-content/plugins folder named as reactive-render.

If you are not an expert of terminal or don't know how to open a folder in the terminal then you can follow any online resource or tutorials to do that.

So, after opening the reactive-render plugin in the terminal run the below command

npm install

Wait till all the necessary dpendecy node-modules install after that just run the below command to start the gulp

gulp

When the Webpack build successful notification show on the top right corner, then you are good to go to change the content of the grid

Leave the terminal open running like above while you are working on the reactive-render grid addons

Customizing the Grid

At that point if you have done all the above steps successfully. Then your system is ready to customize the grid of Reactive pro by using the reactive-render grid addons.

Open the reactive-render folder in any text editor of your choice we will show instructions on this post using sublime-text.

Here what it looks like when we open the reactive-render in the sublime text,

Don't worry about that red or yellow marks. As we have use advance js which includes Reactwith babel, eslint. It shows warning and error of js as you will not see any of this marks if you don't have eslint setup on your system.

You need to have basic knowledge about

• React.js
• es6
• javascript
• node-modules

So, to start the customizing at first open the below file,

wp-content/plugins/reactive-render/assets/src/frontend/frontend.js

As you can see we have already open the frontend.js file in the above screenshots.

In that frontend.js file you will find we have already created a same product grid for everyone. And if you want to change any of the Grid of the Reactive than you just have to copy the grid code component and import npm-modules from Reactive Pro plugin and paste it to the frontend.js.

You can find the grid code of Reactive Pro plugin from the below directory:-

wp-content/plugins/reactive/assets/src/frontend/preview/block/layout/grid/

That's it make your custom changes in the frontend.js file using React.js.