React JSX transformer

JSX( Javascript XML ) is an optional preprocessor which converts native javascript syntax to HTML-like syntax.  Which is easy to read, Write and well structured, This converted format is easy for a designer's to contribute code as well as developers.

Advantages :

Faster: JSX compiled code is much faster than native javascript code.

Safer:     The quality of applications becomes much better when developed in JSX.

Easier:  Developers getting freed from working with the too-primitive prototype-based inheritance system of JavaScript. JSX Expressions and statements are mostly similar to JavaScript, so, It's easy for  javascript programmers can move on to JSX.

 

Transformation of JS to JSX:

 

Javascript format

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});
React.render(React.createElement(HelloMessage, {name: "John"}), HTML attribute);

 

JSX format

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, HTML attribute);

You can use JSX transformer for development purpose, but you should use precompiled code in production, head over to react tooling integration documentation to learn how to compile JSX code using node.

Something to say? Tell us in comment section.