Export syntax for react component

Question

Hello guys I just joined this forum and I must say using it has been tremendously helpful...thanks a lot. However I would like to know what's the difference between:

export const Hello = (props)=>{   return<h1>Hello {props.name}</h1>;   } 

AND

export default ({ name }) => <h1>Hello {name}!</h1>;

For some reason the first option keeps giving me error in my code. BTW the component's name for both is 'Hello'.

Answer 1

There are a couple of things to unpack here.

1. export vs export default

When you export something as a named const like your first example it allows you to import it like this:

import { Hello } from  './yourFile'

If you export something as the default you can import it like this:

import Hello from './yourFile'

In the first example, Hello must match the name of the const you are exporting and in the second, Hello is the name you give to the imported default, so could be anything you want (although convention is that you keep it the same for clarify).

2. (props) vs ({name})

What you're doing here is defining what will be passed in as the parameters to your component. The first example is using the whole props object, so you need to do props.name in your component and the second is using object destructuring to unpack the property name from your input parameter (which is still the props).

The advantage of the second is that it's a bit more explicit when you come back to the component, what properties you are expecting to use and it allows you to be more concise in your component. The downside is that it can be a bit more verbose if you need to unpack a lot of properties.

3. => { return xyz } vs =>

This is just a syntactic difference, they do the same thing in your example but the second is slimmer. The first is basically defining a method body with the curly braces which can allow you to perform other actions before returning the component HTML, you could for example assign some variable in there. The second is more concise but it's a shorthand for returning the contents and the curly braces and personally I think nicer if you don't need to do anything else inside the method body. A third way is to write => (<h1>Hello {name}!</h1>) which is the same as the second example just with parenthesis!

Answer 2

The only functional difference between your 2 exports is between export const Hello = ... and export default ...

When using export default , your are basically saying : Give this value when the file is imported. So you would use in another file

import Hello from './Hello'

When using export const Hello = ... you're exporting Hello as a property of the exported object. You would then use

import { Hello } from './Hello' 

or

import HelloFile from './Hello'
...
const Hello = HelloFile.Hello;

For the other differences, you can check for dougajmcdonald's answer, and if you want to document yourself further, you can checkout for arrow functions and destructuring assignment , but basically your 2 pieces of code are doing the exact same thing