1

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'.

GG.
  • 21,083
  • 14
  • 84
  • 130
Jori
  • 11
  • 2
  • 1
    Hello Jori, welcome to StackOverflow! Could you post the message error so I may help you? Both export syntaxes are fine, so it's probably an issue with the imports. – GG. Mar 19 '18 at 08:14
  • 1
    If you use 1st code which has `export const Hello` than you have to import it specifically by describing it's definition name i.e. like `import {Hello} from ...`. BTW in case of `default` keyword you can name it as per your wish i.e. like `import Whatever from './pathToThatComponent'`. This is somewhat similar to this - https://stackoverflow.com/questions/48441771/exporting-react-component-class-with-one-name-importing-it-with-another-name-s/48441827#48441827 – Meet Zaveri Mar 19 '18 at 08:18
  • Hello GG...Thanks for replying to my question. Actually I am using codesandbox.io to learn react so I guess it's forcing me to use the last option or something went wrong . Does using Babel or or another transpiler affect which version of javascript I use? es6 vs es5? – Jori Mar 19 '18 at 08:29

2 Answers2

3

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!

Logar
  • 1,248
  • 9
  • 17
dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89
1

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

Logar
  • 1,248
  • 9
  • 17
  • Really appreciate the help. This forum has been awesome for me. – Jori Mar 19 '18 at 08:34
  • @Jori Glad it helped. If your problem is solved don't hesitate to mark your question as resolved with the most helpful and complete answer. Check out the [how to ask](https://stackoverflow.com/tour) section of the FAQ – Logar Mar 19 '18 at 08:49