getMarkup() is returning the literal JSX markup instead of the HTML markup.

[andrewpillar]

The method getMarkup() returns the literal JSX component, instead of the compiled HTML markup like you would expect.

Here's the code that I am running:

$react = new ReactJS($reactSource, $appSource);

$react->setComponent('Hello', ['name' => 'joe']);

$markup = $react->getMarkup();

echo $markup;

And here's what the value of $markup is after I call the getMarkup() method.

<Hello name="joe" data-reactroot="" data-reactid="1" data-react-checksum="2146833468"></Hello>

I am currently running PHP7.0 on Ubuntu 15.10 with the latest version of V8, and with V8JS for PHP7.0. I should also note the I am using the following react files as the source for react: react.min.js, react-dom.min.js, and react-dom-server.min.js.

EDIT 1: Turns out it only renders the literal JSX markup when I pass the component name as a string literal like so: "'Hello'", whenever I pass the the component name to the method like so: 'Hello' just as a regular string it raises this error:

V8Js::compileString():1: ReferenceError: Hello is not defined

Stating that the component is undefined.

EDIT 2: Here's the code for the React component I'm trying to render:

import React from "react";

class Hello extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>Hello {this.props.name}!</div>
        );
    }
}

EDIT 3: I managed to fix the issue by adding global.Hello = Hello; to the end of the JS file.