score:7

Accepted answer
  1. it doesn't, when you do <note /> that is just looking for a variable named note in the local scope. when the component is imported into another file, you can name it whatever you want. e.g. import note from './note'; would import the default-exported function in your example.

  2. this is a stateless function component, https://facebook.github.io/react/docs/reusable-components.html#stateless-functions, as you linked to yourself. the function itself is the render, it has no class instance.

  3. they can store no state since they just take inputs and render outputs.

  4. your specific example is just an arrow function. the documentation linked above uses standard non-arrow functions, but they are essentially interchangable in this case. e.g.

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

    is the same as

    export default function(){
      return <div>learn webpack</div>;
    }
    

Related Query

More Query from same tag