ReactJS JSX

ReactJS JSX

What is JSX?
JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX transform with ReactJS.

It’s more familiar for casual developers such as designers.

XML has the benefit of balanced opening and closing tags. This helps make large trees easier to read than function calls or object literals.

Why JSX?
You don’t have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.

How to use?
To start using the JSX library, you need to download a single javascript file from Facebook Starter Kit and include in header tag: 

1

<script src="JSXTransformer.js"></script>

The JSX library can also be used directly from the Facebook CDN to increase the performance of the page load by including the link below in header tag: 

1

<script type="text/javascript" src="http://fb.me/JSXTransformer-0.12.2.js"></script>

Example:

helloworld.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var App = React.createClass({
        render: function() {
          return (<h1>Hello World</h1>);
        }
      });

      React.render(<App />, document.body);
    </script>
  </body>
</html>

Transform
React JSX transforms from an XML-like syntax into native JavaScript. XML elements, attributes and children are transformed into arguments that are passed to React.createElement. 

1
2
3
4
5

// Input (JSX):
<App />;

// Output (JS):
React.createElement(App);

So far so good, That’s it!!! See ya!!! :)