React JSX transforms from XML-like syntax into JavaScript.
XML elements, attributes and children are transformed into arguments
passed to React.createElement
var Avatar = require('./Avatar');
// Input (JSX):
var app = <Avatar userid="claudiopro" />;
// Output (JS):
var app = React.createElement(Avatar, {
userid : "claudiopro"
});
JSX also allows specifying children using XML syntax:
var Avatar = require('./Avatar'),
Nav = require('./Nav');
// Input (JSX):
var app = <Nav><Avatar userid="claudiopro"/></Nav>;
// Output (JS):
var app = React.createElement(Nav,
null,
React.createElement(Avatar, {
userid : "claudiopro"
})
);
Try out JSX on the online Babel REPL