Generate ReactJS inside PHP Loop

Question

I'm a complete novice with REACT, especially to extract information from the server. I don't have any API inside my backend, so... Can I generate react code as follow?

Example of my component:

var Test= React.createClass({

    render: function () {
        return (
            <div>
                <p>
                    This is my test: {this.props.name}
                </p>
            </div>
        );
    }
});

How I think I can "render" this react component with a PHP Loop:

<script type="text/babel">
    <?php foreach($tests as $test){ ?>

        ReactDOM.render(

            <div className="text-center">
                <Test name="Test 1" />
                <Test name="laralala"  />        
            </div>

        ,document.getElementById("test")
        );


    <?php}  ?>
</script>

But I think the previous "way" it's a complete bad practice... Can someone help me a little? My intention is not to have to change anything in the backend ...

Thank you very much.

Did you think about putting the data as global/static JS variable inside the HTML and just write regular React app? :) — Sebastian Sebald
– Sebastian Sebald, Commented Oct 19, 2016 at 11:28
Oh, for example var test = <?php echo json_encode($tests); ?>; ??? — MartaGom
– MartaGom, Commented Oct 19, 2016 at 11:35
Exactly. As long as you only need data initially this will work. The issue you will run into is that you have to reload your page every time $tests was updated (by a form for example). This kinda goes agains all this "single page application" logic. But I guess if you do not have an API, you're stuck with this solution. — Sebastian Sebald
– Sebastian Sebald, Commented Oct 19, 2016 at 11:44
Hmmm I understand. I dont want a SPA really. I only want a frontend framework for improve the quality of my apps :-) do you recommend me another option or ReactJS is an option for non SPA ? Btw put your comment as and answer — MartaGom
– MartaGom, Commented Oct 19, 2016 at 11:47

Sebastian Sebald · Accepted Answer · 2016-10-19 12:23:44Z

1

Accessing data from PHP

One possible solution would be to put your data (generated by PHP) into the generated HTML page as global/static JS variables, like var data = <?php echo json_encode($data); ?>;.

As long as you only need the data initially this will work fine. The issue you will run into is that you have to reload your page every time $data was updated (by a form for example). This kinda goes agains all this "single page application" logic. But I guess if you do not have an API, you're stuck with this solution.

@SPA

React currently is all the rage. But if you do not need all its power (beeing a SPA with routing, client-side state, ...) I would suggest just using something simple, yet powerful, like jQuery. Using it is fine, even in 2016. You also could look into Polymer or Web Components.

If you do not already know React and only need it to render some HTML, I don't think you should have to learn it. There are other good alternatives to render dynamic HTML (isn't that what PHP was mode for initially?!).

answered Oct 19, 2016 at 12:23

Sebastian Sebald

17k5 gold badges65 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Raganowicz Over a year ago

I've got my React component, which gets bundled using Webpack. That component needs 2 parameters in order to work: - id of a document to render, - host of a API to access. How do I pass these 2 from PHP to React? Is there any better way than JS global variables?

Sebastian Sebald Over a year ago

You can use server-side rendering. E.g. github.com/reactjs/react-php-v8js

Collectives™ on Stack Overflow

Generate ReactJS inside PHP Loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related