Name Export

  • Export
1
2
3
4
5
6
7

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

export const Goodbye = () => {
  return <h1>Goodbye</h1>;
}

We can export multiple components from a single file.

  • Import
1
2
3
4

import { Hello, Goodbye } from "./Greetings"
// or
import * as Greetings from "./Greetings"
<Greetings.Hello />

Default Export

  • Export
1
2
3
4
5

const Hello = () => {
  return <h1>Hello</h1>;
}

export default Hello;

only export one component per file;

If you want multiple functions in a file

1
2
3
4

const fn1 = () => {}
const fn2 = () => {}

export default { fn1, fn2 }
  • Import

Single functions

1

import Hello from "./Hello"

Multiple functions

1
2
3
4

import Fns from "./functions"

Fns.fn1();
Fns.fn2();

TL;DR

Default is better to prevent same function name in different file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import EN from './EnGreetings';
import TW from './TwGreetings';

const render = () => {
  return (
    <div>
      <EN.Hello />
      <TW.Hello />
    </div>
  )
}