Import Components from another file in React

avatar

Borislav Hadzhiev

Last updated: Apr 23, 2022

banner

Check out my new book

Import Components from another file in React #

To import a component from another file in React:

  1. Export the component from file A, e.g. export function Button() {}.
  2. Import the component in file B as import {Button} from './another-file'.
  3. Use the imported component in file B.

Here is an example of exporting components from a file called another-file.js.

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 is how we would import the components in a file called App.js.

App.js
// 👇️ named import import {BigButton, SmallButton} from './another-file'; export default function App() { return ( <div> <BigButton /> <hr /> <SmallButton /> </div> ); }

Make sure to correct the path that points to the another-file.js module if you have to. The example above assumes that another-file.js and App.js are located in the same directory.

For example, if another-file.js was located one directory up, you'd have to import as import {BigButton} from '../another-file'.

We wrapped the name of the components in curly braces when importing them - this is called a named import.

The import/export syntax is called JavaScript modules.

In order to be able to import a component from a different file, it has to be exported using a named or default export.

The example above uses a named export and a named import.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

Let's look at an example of how we would import a component that was exported using a default export.

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

IMPORTANT: If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.

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

And here is how we would import the component using a default import.

App.js
// 👇️ default import import BigButton from './another-file'; export default function App() { return ( <div> <BigButton /> </div> ); }

We could have also used a different name when importing the component, e.g. Foo.

App.js
// 👇️ default import import Foo from './another-file'; export default function App() { return ( <div> <Foo /> </div> ); }

This works, but is confusing and should be avoided.

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

You can also mix and match, here is an example of a file that uses both - a default and a named export.

another-file.js
// 👇️ 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> ); };

And here is how you would import the two components.

App.js
// 👇️ default and named imports import BigButton, {SmallButton} from './another-file'; export default function App() { return ( <div> <BigButton /> <hr /> <SmallButton /> </div> ); }

We used a default import to import the BigButton component and a named import to import the SmallButton component.

Note that you can only have a single default export per file, but you can have as many named exports as necessary.

Use the search field on my Home Page to filter through my more than 3,000 articles.