[React] React Fundamentals: JSX Deep Dive

"JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."

 

Input:

React.createClass({
  render: function(){
   var style = {
      backgroundColor: '#ccc',
      color: blue
   };
    return (
         <div >
              <a href="#"  style={style}/> {/*This is comment*/} Thisis message
              {/*JSX don't have if else*/}
              {i > 1 ? 'More than one' : 'one'}
              {i>1&& 'More than one' }
        </div>
    )
 }
})

 

output:

React.createClass({
  render: function(){
   var style = {
      backgroundColor: '#ccc',
      color: blue
   };
    return (
         React.createElement("div", null, 
              React.createElement("a", {href: "#", style: style}), " ", /*This is comment*/" Thisis message", 
              /*JSX don't have if else*/
              i > 1 ? 'More than one' : 'one', 
              i>1&& 'More than one'
        )
    )
 }
})