Difference between export default function and const using React?

Question

I am working on a React project and I would like to know what is the difference between those two codes :

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

And that one :

import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default App;

If I look at a browser I see the same thing ...

Could you explain me ?

Thank you very much !

both work the same, first one is the traditional way of working with functions — Ali Sattarzadeh, Nov 17 '22 at 10:36
almost you said but could you tell me at least one difference ? — Peter, Nov 17 '22 at 10:44
You are basically doing two things, creating a function and exporting it using default export. In first one, you are just creating a normal named function and subsequently exporting it , in second one you are creating an arrow function and assigning it to a variable and then exporting it in separate line. Second is the more modern-ish approach I'd say. — Bipin, Nov 17 '22 at 10:53
if you want use arrow function You can only export anonymous functions directly — Ahmad, Nov 17 '22 at 11:08
Does this answer your question? [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) — Konrad, Nov 17 '22 at 11:30

score 0 · Answer 1 · answered Nov 17 '22 at 11:32

If you want to know the difference between arrow function and function read this https://stackoverflow.com/a/34361380/5089567

Other than that there is no difference

JavaScript syntax just doesn't allow exporting and declaring a variable at the same line

Difference between export default function and const using React?

1 Answers1