# 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 `React`with `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.