Importing and Exporting Components

We can import or export components using named or default exports. Typically teams pick one and stick with it instead of mixing and matching.

Named Export

Allows you to export multiple functions at once

App.js

import { Gallery } from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

Gallary.js

export function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
    </section>
  );
}

Default Export

Limits you to exporting one function

App.js

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

Gallary.js

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
    </section>
  );
}