0

Right, so I'm trying to work out the kinks in my code for working with rendering react JSX code on the server side.

When my test.js is as follows:

var CommentBox = React.createClass({displayName: 'CommentBox',
    render: function() {
        return (
            React.createElement(
                'div', 
                {className: "commentBox"},
                "Hello, world! I am a CommentBox."
            )
        );
    }
});

The following code works:

    $react_source = implode("\n", [
        file_get_contents(\Yii::getAlias("@bower").'/react/react.js'),
        file_get_contents(\Yii::getAlias("@bower").'/react/react-dom-server.js'),
    ]);

    $react_app = implode("\n", [
        file_get_contents(\Yii::getAlias("@app").'/web/test/test.js')
    ]);

    $react = array();
    // stubs, react
    $react[] = "var console = {warn: function(){}, error: print}";
    $react[] = "var global = global || this, self = self || this, window = window || this";
    $react[] = $react_source;
    $react[] = "var React = global.React";
    $react[] = "var ReactDOMServer = global.ReactDOMServer";
    $react[] = $react_app;

    $concatenated = implode(";\n", $react);

    $v8 = new \V8Js();

    $v8->executeString($concatenated);

    $js = $v8->executeString(sprintf("ReactDOMServer.renderToString(React.createElement(%s))", 'CommentBox'));

    return $this->render('index', [
        'js' => $js
    ]);

But when my test.js looks like the following:

var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
                Hello, world! I am a CommentBox.
            </div>
        );
    }
});

I get the following error: V8Js::compileString():18861: SyntaxError: Unexpected token <

Now I'm assuming this is because the JSX code needs to be compiled into the javascript code (the working version), but how do I go about doing that on the back end side with PHP?

SUCCESS... Kind of So I managed to get this working. I used babel to convert the file from jsx to normal js, which looks like my original working code. This all works nicely with the PHP side rendering. However, now I'm having issues with getting webpack bundled code to work correctly, but that's another issue, so I'm going to close this.

7
  • 1
    I think, you have to enclose it with single quotes like return ('<div className="commentBox">Hello, world! I am a CommentBox.</div>'); in test.js. Feb 3, 2016 at 18:15
  • @NanaPartykar - I've tried that and it doesn't work - I then get SyntaxError: Unexpected token ILLEGAL
    – SynackSA
    Feb 3, 2016 at 18:17
  • @NanaPartykar Nope, I don't think you know what JSX is..
    – rgajrawala
    Feb 3, 2016 at 18:18
  • Yes. I don't know. You are correct @usandfriends. Feb 3, 2016 at 18:19
  • 1
    @SynackSA Look at Babel for JSX and this.
    – rgajrawala
    Feb 3, 2016 at 18:22

1 Answer 1

0

Some processors require you use the .jsx extension.

Try renaming test.js to test.jsxwhen you are using the angled bracket notation.

EDIT: And rename in your code obviously

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.