Migrating to the React.js ecosystem from a traditional Laravel / Rails application. Requires data management on the interface

I have a Laravel application that is under development; other people do not rely on it. I have redesigned the front-end to use React.js as much as possible. I ran into a problem because of how data should be passed to React in order to be manipulated. Below is an example of a problem that makes me rethink how I should be passing data from frontend to frontend:

Laravel provides a convenient way to display a link to a route:

link_to_route('users.show', $user->present()->name(), $user->id);

      

        
        
        
      

    

This code creates the following link:

<a href="http://example.com/users/1">Jane Austin</a>

      

        
        
        
      

    

I thought this kind of functionality (linking for named routes) was best handled by trailing end. However, as I said before, I am starting to implement the React.js framework for my views. One of the components I've started using is the Griddle .

First, I configured a Laravel controller to handle the ajax calls:

class AjaxController extends Controller
{
    public function usersIndex()
    {
        $users = Users::orderBy('last')->get();

        foreach ($users as $user) {
            $user->displayLink = link_to_route('users.show', $user->present()->name(), $user->id);
            $user->setVisible(['displayLink']);
        }

        return $users->toJson();
    }
}

      

        
        
        
      

    

When the Griddle component calls data from the AjaxController @usersIndex, a JSON object is returned:

[
    {
    "displayLink": "<a href=\"http://example.com/users/8\">Prof. Candelario Q. Abshire</a>"
    },
    {
    "displayLink": "<a href=\"http://example.com/users/3\">Prof. Danielle O. Altenwerth IV</a>"
    },
    {
    "displayLink": "<a href=\"http://example.com/users/18\">Chelsey J. Bahringer</a>"
    },
]

      

        
        
        
      

    

Now, since I am returning HTML from the back-end instead of raw data, I must run JSON through a custom component to set the inner HTML:

var React = require('react');

var DangerouslySetInnerHTML = React.createClass({
    render: function () {
        return (
            <div dangerouslySetInnerHTML={{__html: this.props.data}}></div>
        );
    }
});

module.exports = DangerouslySetInnerHTML;

      

        
        
        
      

    

At first glance, this all works fine. However, when the Griddle component goes to filtering the table or sorting the columns, it cannot because it can filter / sort the entire link row, not just the row that appears in the link.

So now, obviously, I know I am doing it wrong. I don't know if I need to rewrite many end functions (presenters, etc.) And somehow put them in the interface, or if I need something to manipulate this data in the front panel so that I can combine the raw data from databases and compile links, etc. One thing is clear: React.js components must have access to the raw data before they can be combined into larger units such as references or fully qualified names. I suppose Laravel will mostly be relegated to serving raw JSON objects that closely mirrors what's in the database, and then I would need to write a lot of React.js components to replace the functionality that Laravel masters and routers were responsible for like , combining small data into larger things,such as fully qualified link names, etc. I don't know if there is anything out there to help deal with this, though since I assume the complex querying of relationships that Eloquent handles exclusively through JSON is difficult.

• I think it's wrong?
• Is there something similar to Eloquent for the front-end? In other words, are there structures out there that manipulate the raw data in the frontend so you can query for relationships similar to what you would do with Laravel / Rails content?
• Would it be beneficial to replace Laravel with a Node.js back-end like Express.js, or a framework like Keystone.js, apart from the obvious advantage of being reusable because it's all JavaScript?
• If I'm determined to use React to handle as much as possible, what additional tools can help me bring the functionality that Laravel currently processes into the React.js framework / environment?