Transforming JSX into JavaScript

"Shawn, as I mentioned, the JSX is transformed to the native JavaScript syntax."

// Input (JSX):
var app = <App name="Mike" />;

"This will eventually get transformed to"

// Output (JS):
var app = React.createElement(App, {name:"Mike"});

Tip

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

• Log in or register to our website using your e-mail address and password.
• Hover the mouse pointer on the SUPPORT tab at the top.
• Click on Code Downloads & Errata.
• Enter the name of the book in the Search box.
• Select the book for which you're looking to download the code files.
• Choose from the drop-down menu where you purchased this book from.
• Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

• WinRAR / 7-Zip for Windows
• Zipeg / iZip / UnRarX for Mac
• 7-Zip / PeaZip for Linux

"If you would like to see this live in action, try this example at https://babeljs.io/repl/. It's a live REPL that can transform a JSX code to the native JavaScript code."

"There is another editor available for converting HTML to JSX. You can check it out at http://facebook.github.io/react/html-jsx.html. This allows you to paste an arbitrary HTML code that gets converted to JSX with extraction of styles, classes, and other information and then create a component on top of it." said Mike.

"Pretty handy. However, this is just for ease of development, right? What happens when we deploy our code?" asked Shawn.

"JSX is not meant to be compiled at runtime. Though there is a JSX transformer that converts JSX to JavaScript in a browser. Using it to compile JSX at runtime in the browser would slow down our application. We will use tools such as Babel, which is a JavaScript transpiler to convert our JSX code to the native JavaScript code before deploying the application."