Menu
(Using the in browser JSX Transformer) When calling a react component from plain javascript, i get an Uncaught ReferenceError.
I try to call a React.js (0.12.2) component from my javascript app. I got a JQuery document.ready handler to do so.
It seams, that the in browser JSX compiler needs some time before react's components are ready to use.
Document.ready might not be an option in that case.
See the example below:
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<script src="jquery-2.1.3.min.js"></script>
<script src="react-0.12.2/JSXTransformer.js"></script>
<script src="react-0.12.2/react.js"></script>
<script type="text/jsx" src="reactComponent.js"/>
<script src="app.js"/>
</head>
<body>
<div id="target"></div>
</body>
app.js:
$(function () {
console.log("app.js: " + typeof MyComponent);
init();
});
component.js:
var MyComponent = React.createClass({
render: function () {
return (<div>works</div>)
}
});
function init() {
console.log("init: " + typeof MyComponent);
React.renderComponent(<MyComponent/>, document.getElementById("target"));
}
Running this in the browser outputs in the log:
app.js: undefined
app.js: Uncaught ReferenceError: init is not defined
But when I load the app.js through the jsx transformer, by adding type="text/jsx" in the script tag, it works:
app.js: function
reactComponent.js: init: function
Is there an other way to wait for the JSX transformer to finish, instead of loading all js files with type text/jsx?
And am I right, that this is really specific to the in browser JSX transformer
473
I'd recommend you switch to a JSX precompiler workflow if you can (like using gulp or grunt for example if you were using NodeJS). That way, you won't have to worry about this sequencing problem.
Until you can switch, I'd suggest putting your application initialization in the last text/jsx script file loaded. That way, it will always execute after the DOM has fully loaded and is ready to be used. You shouldn't need to rely on the jQuery event if you make this change.
You could even switch the last file to just be processed as test/jsx, even though it may not contain any JSX functionality currently:
<script src="app.js" type="text/jsx"></script>
(By the way, you shouldn't use self-closing tags for for scripts, see here).
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
