Please explain this abbreviated ES6 JSX declaration
<p>An example in the <a href="http://survivejs.com/webpack_react/webpack_and_react/" rel="nofollow">SurviveJS</a> handbook in the chapter on React and Webpack has me confused.</p>

<p>In <code>Note.jsx</code>:</p>

<pre><code>import React from 'react';

export default () =&gt; &lt;div&gt;Learn Webpack&lt;/div&gt;;
</code></pre>

<p>This deviates in a number of ways from what appears to be the standard way of declaring React components using JSX:</p>

<pre><code>import React from 'react';
class Note extends React.Component {
  render() {
    return &lt;div&gt;Learn Webpack&lt;/div&gt;;
  }
}
</code></pre>

<p>How does the first example work?</p>

<ol>
<li>How does it know the component is called <code>Note</code> so that it can be referred to as <code>&lt;Note/&gt;</code> in some parent component? Simply by filename match (removing the <code>.jsx</code> part?)</li>
<li>Where's the <code>render()</code> function? And how is it possible to omit it?</li>
<li>What are the limitations of this approach? I am guessing that it only works for wrapping a very simple rendered output, just mapping properties into some HTML...</li>
<li>Where is this style documented? I can't seem to find any <a href="https://facebook.github.io/react/docs/jsx-in-depth.html" rel="nofollow">official</a> <a href="https://facebook.github.io/react/docs/reusable-components.html#stateless-functions" rel="nofollow">documentation</a> </li>
</ol>