Opens the 1-your-first-component directory.

  //  **** 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.

  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)