JSX vs. Pure JavaScript
Opens the 1-your-first-component directory.
Creates app.js:
// **** app.js ****
var React = require('react');
// ES6 destructuring assignment
var { h1, div, li, ul } = React.DOM;
// equivalent to
var h1 = React.DOM.h1;
var element = div({},
h1({}, "Hello"),
ul({},
li({}, "Marc with C"),
li({}, "Mark with K")
),
);
var React.render(element, document.body);
These are just functions. It's not creating string of HTML, but objects that represent the HTML. It creates raw DOM.He can call
div
and add as many arguments as he wants and these will become child elements.The equivalent in JSX would be:
var element2 = (
<div>
<h1>Hellow from JSX </h1>
<ul>
<li>Marc with K</li>
<li>Mark with C</li>
</ul>
</div>
)
There's not definitive preference in the community in JSX over plain functions. Functional programming people prefer just functions.Under the hood, React converts these to React.createElement("div", null,..)
(demos in debugger)JSX is more readable. But these are just functions. The performance is the same.