All geek questions in one place

How to wait in the browser of the JSX compiler before calling the rendering component

(Using JSX Transformer in a browser) When I call a responsive component from a simple javascript, I get a Non-Woven Reference link .

I am trying to call the React.js component (0.12.2) from my javascript application. I got a jQuery document.ready handler for this.

This means that the JSX compiler in the browser takes some time before the reactive components are ready for use.

In this case, Document.ready may not be an option.

See an 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 a browser logs:

 app.js: undefined app.js: Uncaught ReferenceError: init is not defined

But when I load app.js through a jsx transformer, adding type="text/jsx" to the script tag, it works:

 app.js: function reactComponent.js: init: function

Is there any other way to wait for the JSX transformer to complete instead of loading all js files of type text/jsx ? And I'm right that this is really browser-specific for the JSX transformer.

+5
source share
2 answers

I would recommend you switch to the JSX precompiler workflow if you can (e.g. use gulp or grunt , e.g. if you used NodeJS). This way, you don’t have to worry about this sequencing problem.

Until you can switch, I suggest putting your application initialization in the last loaded text/jsx script file. Thus, it will always be executed after the DOM is fully loaded and will be ready for use. If you make this change, you do not need to rely on the jQuery event.

You can even switch the last file, which will only be processed as test/jsx , even if it cannot contain any JSX function at present:

 <script src="app.js" type="text/jsx"></script>

(By the way, you should not use self-closing tags for script s, see here ).

+4
source

although the precompiler workflow may be ideal, it is much easier for me to use raw jsx in development.

To complete the jsx compilation, I use a simple wait loop in the onload trigger before the actual work starts:

  <script>
     'use strict';
     let i = 0;
     function init () {

       // limit loops if compiling problems
       if (i ++> 5) return;

       // last item in last .jsx has not been compiled
       if (! LastDefinedComponent) return setTimeout (init, 50);

       // do real work here
     }
   </script>
   ...
   <body onload = 'init ()'>

this works with dynamic or precompiled jsx .

0
source

Source: https://habr.com/ru/post/1213901/

More articles:


All Articles