3

What is the difference between the following methods of defining a react component?

Is the second method simply a shorter way of writing the same code? Will they both run and render exactly the same thing?

import React from 'react'

function MyApp() {
    return (
        <h1>
            Hello, World!
        </h1>
    )
}

export default MyApp

import React from 'react'

export default function MyApp() {
    return (
        <h1>
            Hello, World!
        </h1>
    )
}
mfsg
  • 45
  • 6
  • 5
    This has nothing to do with the React component, but rather the way it is exported. Both examples showcase a different way to provide the same default export. – Jeroen van der Laan Oct 10 '20 at 20:47
  • 2
    Check [export-an-es6-default-class-inline-with-definition-or-at-end-of-file](https://stackoverflow.com/questions/60106063/export-an-es6-default-class-inline-with-definition-or-at-end-of-file) question. Possibly a duplicate. – nibble Oct 10 '20 at 20:47

1 Answers1

4

I guess your question is more about the position of the export default statement. If this is the case, well in general if MyApp is the only thing you want to export then yes, these two methods will behave the same.

Anis R.
  • 6,656
  • 2
  • 15
  • 37