Why es6 react component works only with export default

Question

This component does work   export class Template extends React Component       render             return                lt div gt  component  lt  div gt                      export default Template    If i remove last row  it doesn t work   Uncaught TypeError  Cannot read property  toUpperCase  of undefined   I guess  I don t understand something in es6 syntax  Isn t it have to export without sign  default

User · Accepted Answer

Exporting without default means it s a  named export   You can have multiple named exports in a single file  So if you do this   class Template    class AnotherTemplate     export   Template  AnotherTemplate     then you have to import these exports using their exact names  So to use these components in another file you d have to do   import  Template  AnotherTemplate  from    components templates    Alternatively if you export as the default export like this   export default class Template      Then in another file you import the default export without using the     like this   import Template from    components templates    There can only be one default export per file  In React it s a convention to export one component from a file  and to export it is as the default export   You re free to rename the default export as you import it   import TheTemplate from    components templates    And you can import default and named exports at the same time   import Template  AnotherTemplate  from    components templates

User · Answer

Add     while importing and exporting   export            import         from    Template    export  rarr  import         from    Template   export default  rarr  import     from    Template     Here is a working example       ExportExample js import React from  react    function DefaultExport       return  This is the default export      function Export1       return  Export without default 1      function Export2       return  Export without default 2      export default DefaultExport  export   Export1  Export2           App js import React from  react   import DefaultExport    Export1  Export2   from    ExportExample    export default function App       return        lt  gt         lt strong gt           lt DefaultExport   gt         lt  strong gt         lt br   gt         lt Export1   gt         lt br   gt         lt Export2   gt       lt   gt             Working sandbox to play around  https   codesandbox io s export-import-example-react-jl839 fontsize 14 amp hidenavigation 1 amp theme dark

[javascript] Why es6 react component works only with "export default"?

Examples related to javascript

Examples related to ecmascript-6