Adding React to an existing Grails project without using NodeJS

with No Comments

Sometimes we need to add some new frameworks or libraries to project which wasn’t implied to use them. And sometimes it may cause some difficulties.

A few weeks ago I tried to add React to an existing Grails 3 project. After some hours were spent in looking for a appropriate solution I found nothing useful for my case (we decided not to add node, nmp and etc to the project). After that I decided to try to use grails asset-pipeline plugin and its module for jsx – jsx-asset-pipeline. And it works! Now I want to share with you the way I added React to my project.

So, let’s start…

First of all we need to download React from framework’s official page and and add downloaded files to ‘assets/javascript/’ folder.

After that we need to add to our project latest versions of asset-pipeline and jsx-asset-pipeline:

and configure it:

Note: I use jsx to write react components so I specified ES6 as language mode and ES5 as target language in the minify options to compile my jsx files to the plain js.

Next we’ll create a javascript file to include React to our project and add it to our test page.

Now we can create react components and add it to our gsp pages. Let’s try it.

Let’s create a simple react component:

and add it to our index.gsp:

And that’s all! Now you can start adding react components to your existing project.

This is the result you’ll see:

 

Peek 2017-02-20 11-27

Useful Links:

React official page

Source code

Asset-pipeline documentation

Leave a Reply