How To Import Aliases When Importing Components In React

Posted on by Brent Johnson
Import Aliases When Importing Components

You can use export default or as keyword to import aliases when importing components in React. It will help you import components without having to care about the name or can make your code readable. So how to do it? – Let’s go into detail now.

Import aliases when importing components in React

Use ‘as’ keyword

The as keyword will help you change the import’s identify name. 

 Example:

import {AnotherComponent as Component} from './Anothercomponent';

function App() {
    return (
        <div className="App">
        	<Component></Component>
        </div>
    );
}

export default App;
export function AnotherComponent() {
	return <h1>Hello From Learn Share IT</h1>;
}

Here with the as keyword I change the name of import AnotherComponent function to Component. I can use the AnotherComponent function with the Component name in the entire App.jsx file. You can read more about import/export syntax here.

Or you can also set the name for your output component with the as keyword in the export file.

Example:

import { Component } from './Anothercomponent';

function App() {
    return (
        <div className="App">
        	<Component></Component>
        </div>
    );
}

export default App;
function AnotherComponent() {
  return <h1>Hello From Learn Share IT</h1>;
}

export {AnotherComponent as Component};

If you want to export multiple file, you can separate each function with a comma, like in this way.

Example:

function App() {
    return (
        <div className="App">
            <Component/>
            {al.map(ele => <h3>{ele}</h3>)}
        </div>
    );
}

export default App;
const animalList = [
    'African Spurred Tortoise', 
    'Africanized Bees',
    'Bengal Tigers', 
    'Burying Beetle', 
    'Capuchin Monkeys',
    'Click Beetle',
    'Common Kingfisher'
];

function AnotherComponent() {
	return <h1>Hello From Learn Share IT</h1>;
}

export {AnotherComponent as Component, animalList as al};

Output:

Here I rename AnotherComponent to Component and animalList array to al, so I have to import with that name in the import file.

Use ‘export default’

With the export default function, you can specify the name for the function you want to import without calling the name correctly.

Example:

import { Component } from './Anothercomponent';

function App() {
    return (
        <div className="App">
        	<Component/> 
        </div>
    );
}

export default App;
function AnotherComponent() {
	return <h1>Hello From Learn Share IT</h1>;
}

export default AnotherComponent;

With export default, the import file always gets the function set as export default with any name. But you can only use export default for one function in one file. So if you use multiple export default, you will get the error.

Example:

export const animalList = [
    'African Spurred Tortoise', 
    'Africanized Bees',
    'Bengal Tigers', 
    'Burying Beetle', 
    'Capuchin Monkeys',
    'Click Beetle',
    'Common Kingfisher'
];

function AnotherComponent() {  
  	return <h1>Hello From Learn Share IT</h1>;
}

export default AnotherComponent;
import { AnotherComponent, animalList} from './Anothercomponent';

function App() {
    console.log(animalList);

    return (
        <div className="App">
        	<AnotherComponent/>
        </div>
    );
}

export default App;

The error:

Uncaught SyntaxError: The requested module '/src/Anothercomponent.jsx?t=1665837309156' does not provide an export named 'AnotherComponent' (at App.jsx:1:10)

It is common to simply use export and import name. It is also good to maintain your code.

Summary

In this tutorial, I’ve shown you how to import aliases when importing components in React. Let’s try two methods to get your desired results. Thanks for your reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *