When you’re ready to move your React powered website to production one of the things you’ll want to do is precompile your jsx source to regular javascript.

Transform your JSX files JS console message

There are a few gotchas to be aware of while doing this that I found out the hard way:

Gothca #1

If you started learning React like I did, you probably had the entry point to your React component structure inside your main html page. For example, you might have had a line that looked like this:

<script type="text/jsx">
  React.render(<Main />, document.getElementById('content'));
</script>

in index.html (or index.tpl, or whatever you use to create HTML) in the body tag.

When it came time to run the jsx transform script:

  jsx --extension jsx static/js/ static/build/

I found it convenient to move all of my jsx source out of my html file and into a jsx file (see my use of the jsx extension parameter in the command above).

So, I put the entry point line (React.render…) in my main jsx file which was being included in some random order in the html page’s head tag.

I loaded the page… and nothing happened.

Why? It turns out that when you are including scripts in the head tag order matters. I moved my inclusion of the main jsx file to the end of my jsx include block and voila - the page loaded again.

Gothca #2

Included jsx scripts are called automatically on page load when you also include the jsx transfomer script, meaning if you put your ‘React.render…’ method in your main jsx file - your page will load just fine (provided it is loaded last, see Gothca #1 above).

This is not the case for transformed javascript files. You will need to invoke the entry point into the React library (React.render) ‘manually’ with something like this:

window.onload = function() {
  React.render(React.createElement(Main, null), document.getElementById('content'));   
}