ReactJS gives no DOM output

Question

I'm currently trying to build a simple react.js app using Play and Scala. I can see the script which the JSX compiler creates being inserted into the head of my page, but no elements are injected into the DOM where I specify. I set breakpoints inside the jsx code and they are never triggered. There are no errors in the javascript console(although there were before when I had syntax errors, so the JSX compiler is definitely running) and the chrome extension for react simply displays a blank . I googled around and couldn't find anyone else with this issue, so I'm at a bit of a loss.

My JSX code(react-app.js):

(function () {
  var AddVin = React.createClass({
    render: function() { return (
        <div className="form-group">
          <label htmlFor="vinID">VIN</label>
          <input type="text" className="form-control" id="vinID" placeholder="VIN"/>
          <button type="submit" className="btn btn-primary">Add VIN</button>
        </div>
      );}
  });

  React.renderComponent(<AddVin />, document.body);
});

My HTML (main.scala.html):

@()()

SOTA Admin UI

SOTA Web Admin

    <h2>Add New VIN</h2>

    <div id="react-app">
    </div>

    <script src="@routes.Assets.versioned("libs/react/JSXTransformer.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("libs/react/react.js")" type="text/javascript"></script>
    <script type="text/jsx" src="@routes.Assets.versioned("javascripts/react-app.js")" type="text/javascript"></script>

  </div>
</body>

I can see the tags displayed, so the routing is definitely correct etc.. and there are no errors in the play console.

The JSX output which is injected into a script tag in the of my page:

(function () {
  var AddVin = React.createClass({displayName: "AddVin",
    render: function() { return (
        React.createElement("div", {className: "form-group"}, 
          React.createElement("label", {htmlFor: "vinID"}, "VIN"), 
          React.createElement("input", {type: "text", className: "form-control", id: "vinID", placeholder: "VIN"}), 
          React.createElement("button", {type: "submit", className: "btn btn-primary"}, "Add VIN")
        )
      );}
  });

  React.renderComponent(React.createElement(AddVin, null), document.body);
});

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbImFzc2V0cy9qYXZhc2NyaXB0cy9yZWFjdC1hcHAuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsQ0FBQyxZQUFZO0VBQ1gsSUFBSSw0QkFBNEIsc0JBQUE7SUFDOUIsTUFBTSxFQUFFLFdBQVcsRUFBRTtRQUNqQixvQkFBQSxLQUFJLEVBQUEsQ0FBQSxDQUFDLFNBQUEsRUFBUyxDQUFDLFlBQWEsQ0FBQSxFQUFBO1VBQzFCLG9CQUFBLE9BQU0sRUFBQSxDQUFBLENBQUMsT0FBQSxFQUFPLENBQUMsT0FBUSxDQUFBLEVBQUEsS0FBVyxDQUFBLEVBQUE7VUFDbEMsb0JBQUEsT0FBTSxFQUFBLENBQUEsQ0FBQyxJQUFBLEVBQUksQ0FBQyxNQUFBLEVBQU0sQ0FBQyxTQUFBLEVBQVMsQ0FBQyxjQUFBLEVBQWMsQ0FBQyxFQUFBLEVBQUUsQ0FBQyxPQUFBLEVBQU8sQ0FBQyxXQUFBLEVBQVcsQ0FBQyxLQUFLLENBQUUsQ0FBQSxFQUFBO1VBQzFFLG9CQUFBLFFBQU8sRUFBQSxDQUFBLENBQUMsSUFBQSxFQUFJLENBQUMsUUFBQSxFQUFRLENBQUMsU0FBQSxFQUFTLENBQUMsaUJBQWtCLENBQUEsRUFBQSxTQUFnQixDQUFBO1FBQzlELENBQUE7UUFDTixDQUFDO0FBQ1QsR0FBRyxDQUFDLENBQUM7O0VBRUgsS0FBSyxDQUFDLGVBQWUsQ0FBQyxvQkFBQyxNQUFNLEVBQUEsSUFBQSxDQUFHLENBQUEsRUFBRSxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7Q0FDbEQsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiAoKSB7XG4gIHZhciBBZGRWaW4gPSBSZWFjdC5jcmVhdGVDbGFzcyh7XG4gICAgcmVuZGVyOiBmdW5jdGlvbigpIHsgcmV0dXJuIChcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJmb3JtLWdyb3VwXCI+XG4gICAgICAgICAgPGxhYmVsIGh0bWxGb3I9XCJ2aW5JRFwiPlZJTjwvbGFiZWw+XG4gICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgY2xhc3NOYW1lPVwiZm9ybS1jb250cm9sXCIgaWQ9XCJ2aW5JRFwiIHBsYWNlaG9sZGVyPVwiVklOXCIvPlxuICAgICAgICAgIDxidXR0b24gdHlwZT1cInN1Ym1pdFwiIGNsYXNzTmFtZT1cImJ0biBidG4tcHJpbWFyeVwiPkFkZCBWSU48L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICApO31cbiAgfSk7XG5cbiAgUmVhY3QucmVuZGVyQ29tcG9uZW50KDxBZGRWaW4gLz4sIGRvY3VtZW50LmJvZHkpO1xufSk7XG4iXX0=

Rishabh Rishabh · Accepted Answer · 2015-07-17T15:41:13

You need to invoke your anonymous JS function.

(function () {
  var AddVin = React.createClass({
    render: function() { return (
        <div className="form-group">
          <label htmlFor="vinID">VIN</label>
          <input type="text" className="form-control" id="vinID" placeholder="VIN"/>
          <button type="submit" className="btn btn-primary">Add VIN</button>
        </div>
      );}
  });

  React.render(<AddVin />, document.body);
}());

Notice the addition of () in the last line. Also Render.renderComponent() has been deprecated since v0.12. The new way is React.render().

ReactJS gives no DOM output

SOTA Web Admin

1 Answers