Importing components of React skills

Overview

In React, import components from other files:

1. Export components from the A file. For example, export function Button() {} .
2. Import the components in the B file. For example, import {Button} from './another-file' .
3. Use the imported components in the B file.

named import export

The following example imports components from a file named another-file.js .

 // 👇️ named export
export function BigButton() {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

// 👇️ named export
export const SmallButton = () => {
  return (
    <button onClick={() => console.log('small button')}>Small button</button>
  );
};

Here's how we import components from a file named App.js .

 // 👇️ named import
import {BigButton, SmallButton} from './another-file';

export default function App() {
  return (
    <div>
      <BigButton />

      <hr />

      <SmallButton />
    </div>
  );
}

If necessary, make sure the current path points to the another-file.js module. The above example assumes that another-file.js and App.js are in the same directory.

For example, if another-file.js is in the upper directory, you must import it like this: import {BigButton} from '../another-file' .

When importing components, we wrap the component name in curly braces. This is called a named import.

import/export syntax is called a JavaScript module. To be able to import a component from a different file, it must be exported using a named or default export. The above example uses named exports and imports.

The main difference between named and default import and export is that in each file, you can have multiple named exports, but only one default export.

Import and export by default

Let's look at an example how we can import a component that uses the default export.

 // 👇️ default export
export default function BigButton() {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

Important: if you export a variable (or arrow function) as a default export, you must declare it before exporting it. You cannot declare a variable on the same line and export the variable by default.

 const BigButton = () =>  {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

// 👇️ default export
export default BigButton;

Here's how to import components using default imports.

 // 👇️ default import
import BigButton from './another-file';

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

When importing components, we can also use different names like Foo .

 // 👇️ default import
import Foo from './another-file';

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

This also works, but is confusing and should be avoided.

In my experience, most real-world codebases only use named exports and imports because they are easier to leverage your IDE for autocompletion and autoimport. You also don't have to think about which members are exported with default or named exports.

Hybrid import and export

You can also mix and match, the example file below uses default and named exports.

 // 👇️ default export
export default function BigButton() {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

// 👇️ named export
export const SmallButton = () => {
  return (
    <button onClick={() => console.log('small button')}>Small button</button>
  );
};

Here's how to import both components.

 // 👇️ default and named imports
import BigButton, {SmallButton} from './another-file';

export default function App() {
  return (
    <div>
      <BigButton />

      <hr />

      <SmallButton />
    </div>
  );
}

We use the default import to import the BigButton component and the named import to import the SmallButton component.

Note that you can only have one default export per file, but you can have as many named exports as you want.