i'm trying build simple react.js app using play , scala. can see script jsx compiler creates being inserted head of page, no elements injected dom specify. set breakpoints inside jsx code , never triggered. there no errors in javascript console(although there before when had syntax errors, jsx compiler running) , chrome extension react displays blank . googled around , couldn't find else issue, i'm @ bit of 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 tags displayed, routing correct etc.. , there no errors in play console.
the jsx output injected script tag in of 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=
you need invoke 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 addition of () in last line. render.rendercomponent() has been deprecated since v0.12. new way react.render().
Comments
Post a Comment