Using import aliases when importing Components in React

avatar
Borislav Hadzhiev

Last updated: Apr 6, 2024
2 min

banner

# Using import aliases when importing Components in React

To use import aliases when importing components in React, use the as keyword to rename the imported component.

The as keyword allows us to change the identifying name of the import.

Here is an example of a file called App.js which imports a component named Button.

App.js
// ๐Ÿ‘‡๏ธ Rename import to MyButton import {Button as MyButton} from './another-file'; export default function App() { return ( <div> <MyButton /> </div> ); }

Here are the contents of another-file.js.

another-file.js
export function Button() { return ( <button onClick={() => console.log('button clicked')}> Click </button> ); }

using import aliases when importing components

The code for this article is available on GitHub

The path of the import in the App.js file assumes that another-file.js is located in the same directory.

For example, if importing from one directory up, you would have to import from '../another-file'.

You can use the as keyword to rename your imports and exports.

# Using export aliases in React

For example, we could export the component using a different name.

another-file.js
function Button() { return ( <button onClick={() => console.log('button clicked')}> Click </button> ); } // ๐Ÿ‘‡๏ธ Export as MyButton export {Button as MyButton};

We renamed the export of the Button component to MyButton, so now you would import it as:

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

using export aliases in react

The code for this article is available on GitHub

The as keyword can be used to rename both imports and exports.

# You don't have to use aliases with default exports

If your component is exported using a default export, you don't have to use the as keyword, because you are able to directly rename a default export when importing.

another-file.js
function Button() { return ( <button onClick={() => console.log('button clicked')}> Click </button> ); } // ๐Ÿ‘‡๏ธ Uses default export export default Button;

Now, we can import the Button component as MyButton without using the as keyword.

App.js
// ๐Ÿ‘‡๏ธ Can directly rename when importing (because default export) import MyButton from './another-file'; export default function App() { return ( <div> <MyButton /> </div> ); }

not using aliases with default exports

The code for this article is available on GitHub

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

If you try to use multiple default exports (for functions, classes, variables) in a single file, you would get an error.

In my experience, most real-world codebases exclusively use named exports and imports, because they make it easier to leverage your IDE for auto-completion and auto-imports.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev