reactjs - Please explain this abbreviated ES6 JSX declaration -

an example in survivejs handbook in chapter on react , webpack has me confused.

in note.jsx:

import react 'react';  export default () => <div>learn webpack</div>;

this deviates in number of ways appears standard way of declaring react components using jsx:

import react 'react'; class note extends react.component {   render() {     return <div>learn webpack</div>;   } }

how first example work?

how know component called note can referred <note/> in parent component? filename match (removing .jsx part?)
where's render() function? , how possible omit it?
what limitations of approach? guessing works wrapping simple rendered output, mapping properties html...
where style documented? can't seem find official documentation

it doesn't, when <note /> looking variable named note in local scope. when component imported file, can name whatever want. e.g. import note './note'; import default-exported function in example.
this stateless function component, https://facebook.github.io/react/docs/reusable-components.html#stateless-functions, linked yourself. function render, has no class instance.
they can store no state since take inputs , render outputs.
your specific example arrow function. documentation linked above uses standard non-arrow functions, interchangable in case. e.g.
```
export default () => <div>learn webpack</div>; 
```
is same as
```
export default function(){   return <div>learn webpack</div>; } 
```

Camp