kenny11's avatar

React with Laravel non spa

Has anyone created a non spa web application with React and Laravel?

If the website is not a spa, what is the best way to mount a component in blade files?

Call a component like this?

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card card-default">
                            <div className="card-header">Example Component</div>

                            <div className="card-body">
                                I'm an example component!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('app')) {
    ReactDOM.render(<Example />, document.getElementById('app'));
}

So if a component is like <Comment/>.

Create a mounting point like this for each component in blade files?

if (document.getElementById('comment')) {
    ReactDOM.render(<Comment/>, document.getElementById('comment'));
}

and in a blade file

<div id="comment"></div>

I wanna know if this is the right way or no. If there is another way please let me know

0 likes
2 replies
topvillas's avatar

Forget about it being a Laravel app. It's makes no difference to anything. All Blade does is spit out HTML.

If that's how you mount a component in React then it's the way to go.

1 like
ejdelmonico's avatar
Level 53

I have always used React like an SPA. However, you do not have to structure the client-side as an SPA. I have found that using multiple renders in a non-spa costs performance. In essence, you can use React components just like you use Vue components. The only difference for me is I create an index.js as a template and then render once and calling whichever component I need. So, it's like an SPA as a section in a normal web page. I think I am rambling but it is a somewhat complex issue. In the end it is whatever is best for maintenance and flexibility for your use case.

Please or to participate in this conversation.