2

I'm new to React and ES6, still struggling in understanding its syntax, below is an example code from my book:

import React from 'react';

export const App = () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>

export default App;

but why I have to use 'const' as well, why I can't do like;

export default App = () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>

it compiled but caused an runtime error,which I don't know why, I always can do the following without any errors:

export default function (…) { … }

I'm really confused

  • 2
    You *can* use `export default`, but default exports aren't named, so you'd have to remove the `App =` part – CertainPerformance Oct 10 '19 at 09:57
  • Possible duplicate of [When should I use curly braces for ES6 import?](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import) – Tolotra Raharison Oct 10 '19 at 10:02
  • @CertainPerformance but what about `export default App;`, isn't that also named? –  Oct 10 '19 at 10:08

3 Answers3

2

There is no point in naming default export because when you are importing it, you can import it as anything

export default () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>

// can be imported as
import Foo from './App';
import Bar from './App';
import AnythingYouCanThinkOf from './App';

If you want named import:

export const App = () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>

// can be imported only as
import { App } from './App';

Also please note that there can be multiple named exports but only one default export in a single file.

export default () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>
export const Header = () => <div>Header</div>
export const Footer = () => <div>Footer</div>
export const Sidebar = () => <div>Sidebar</div>

// imports
import AnyNameYouWantWhichIsDefaultExport, { Header, Footer, Sidebar } from './App'
zhuber
  • 5,364
  • 3
  • 30
  • 63
  • so why with const, I can do named import? –  Oct 10 '19 at 10:19
  • Because it's the way it works, is the name of your export. You don't have to use const, you could also export function Header() { } for named export. – zhuber Oct 10 '19 at 10:22
0

You can just export default, but default exports do not enforce names on import. So, the code would look like this:

export default () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>
Davin Tryon
  • 66,517
  • 15
  • 143
  • 132
  • but what about `export default App;` in the example, isn't that also named? –  Oct 10 '19 at 10:09
  • no, `App` refers to the function. So, it is not named. You do not import a default export based on a name: `import App from './App';`. the name `App` in the import could be anything: `import Anything from './App';` – Davin Tryon Oct 10 '19 at 10:12
  • for `export default App = () => {...}`, isn't that App also refer to the function? –  Oct 10 '19 at 10:21
  • default export has a name: `default` – marzelin Oct 10 '19 at 10:22
  • 1
    @secondimage after `export default` needs to be a value. `=` makes it a statement which is invalid – marzelin Oct 10 '19 at 10:23
  • @marzelin default export does not enforce a name on import. – Davin Tryon Oct 10 '19 at 10:24
  • 1
    yes but you can import it by its name: `import {default as sth} from "./somewere.js"`. It has a name. – marzelin Oct 10 '19 at 10:25
  • @secondimage a function can be passed in JavaScript. – Davin Tryon Oct 10 '19 at 10:26
  • @marzelin after reading all comments, I found your answer makes the most sense,. –  Oct 10 '19 at 10:31
  • 2
    @secondimage one more bit that might interest you: if you put `App = () => {...}` in parentheses it will be valid – marzelin Oct 10 '19 at 10:33
  • @marzelin so for `export const App = () => {...}`, can I understand in this way: `const App = () => {...}` will be executed first, then `export App` executes, just a compiler trick? –  Oct 10 '19 at 10:36
  • @secondimage it's not a compiler trick, it's a specification rule. Compilers, or rather language engines, can work any way they want as long as they conform to language specification. – marzelin Oct 10 '19 at 10:55
0

When you are going to export a default value, you want to import it without name (name it exactly when you import it somewhere else) somewhere else then you can't just export default it with name so to export default you can do the following:

// Just export it
export default () => ...

// Or this way
const App = () => ...

export default App;
amirhaa
  • 280
  • 1
  • 8