react-elegant-tree.js

const Tree = (props) => (
  <ul>
    {props.nodes.map((node, key) => (
      <li key={key}>
        <div className={'name'}>{node.name}</div>
        {node.children && <Tree nodes={node.children} />}
      </li>
    ))}
  </ul>
);

render(<Tree nodes={tree} />, document.getElementById('root'));

Alternative syntax that compiles to JS (Inspired by Imba)

const Tree = (props) => <ul>
  props.nodes.map @ (node, key) => <li key>
    <div className='name'>node.name
    node.children && <Tree nodes=node.children />

render @ <Tree nodes=tree />, document.getElementById('root')