$.js

var $ = React.DOM;

var HelloMessage = React.createClass({displayName: 'HelloMessage',
  render: function() {
    return $.div({class: "main"}, 
              $.p(null, "Hello"), 
              $.ul(null, 
                $.li(null, "First item")), 
              $.p(null, "Bye bye"))
  }
});

React.renderComponent(HelloMessage({name: "John"}), mountNode);

dom.js

var dom = React.DOM;

var HelloMessage = React.createClass({displayName: 'HelloMessage',
  render: function() {
    return dom.div({class: "main"}, 
              dom.p(null, "Hello"), 
              dom.ul(null, 
                dom.li(null, "First item")), 
              dom.p(null, "Bye bye"))
  }
});

React.renderComponent(HelloMessage({name: "John"}), mountNode);

in.js

/** @jsx React.DOM */
var HelloMessage = React.createClass({displayName: 'HelloMessage',
  render: function() {
    return React.DOM.div({class: "main"}, 
             React.DOM.p(null, "Hello"), 
             React.DOM.ul(null, 
               React.DOM.li(null, "First item")), 
             React.DOM.p(null, "Bye bye"))
  }
});

React.renderComponent(HelloMessage({name: "John"}), mountNode);

in.jsx

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return (
            <div class="main">
              <p class="introduction">Hello</p>
              <ul>
                <li>First item</li>
              </ul>
              <p>Bye bye</p>
            </div>
        );
  }
});

React.renderComponent(<HelloMessage name="John" />, mountNode);