Learn the different methods of importing & exporting ReactJS components

If you are a React JS developer, then you have already encountered keywords at the top of the React component like import and export, or export default. In this article, we are going to take a close look at these keywords.

However, this is one of the most important topics in JavaScript, known as a module. But the main purpose of this article is to understand exporting and importing components in React JS. In addition, near the end of the article, you will find a table detailing the various methods for importing and exporting components in React JS.

After completing this article you will learn:

• Named export
• Named import
• Default export
• Default import
• Combine more than one import statement
• Aliasing the binding

So, without further ado, let’s get into the article!

First and foremost, what is the actual meaning of import and export in general?

• Import: Imports are goods or services that are brought into one country from another country. Let’s say an Indian wants to buy a Tesla car. Since Tesla doesn’t manufacture its cars in India at present, the person will have to import the car from another country (let’s say, USA).
• Export: Export means sending goods and services to another country. In the above example, America is sending Tesla cars to India. That means America is exporting its Tesla cars to India.

Therefore, America is exporting Tesla cars, and India is importing them.

Similarly, in React JS, we need to export components, functions, or values in order to use those components in another file (module). To use those exported components in another file, we have to import them first.

So, there are two primary ways to export and import components( or values) in React JS.

1. Named export and import
2. Default export and import

We can use one or both of them in order to export and import components.

Named export

Suppose we want to export these two functions in another React component (file or module). To export these functions into another component as a named export, we just need to use the export keywords in front of the functions.

The export keyword has made these functions available to other components, allowing them to be used by other React components in the future.

//America.js

// Named import

export function Apple() { 

  return <h1>I’m sending MacBook.</h1>;

}

// Named import

export function Windows() {

  return <h1>I’m sending Windows.</h1>;

}

In the above code, the ‘America.js’ component has two functions that are Apple() and Windows() and in front of these functions, the export keywords are mentioned. That means they will be used later in other React components.

We can have multiple Named exports in a React component, so we can use the curly braces { } to export more than one Named export instead of exporting individually.

See in the below code, I have grouped together all functions and variables inside the curly braces that can be easily accessible in other React components.

//America.js

function Apple() {

  return <h1>I’m sending MacBook.</h1>;

}

function Windows() {

  return <h1>I’m sending Windows.</h1>;

}

// Exporting all items at one go using curly braces.

// Named import

export { Apple, Windows }; 

Named import

Once we define a component with the export keyword, we can now access and import those exported functions using the import keyword.

Now we are going to import those functions and variables, which are being exported by the “America.js” component, into a component called “India.js.”

//India.js

// Named import

import { Apple } from “./America.js”; 

// Named import

import { Windows } from “./America.js”;

In the above code, the import keywords are used to import the Apple() and Windows() functions, which are exported by the “America.js” file.

Also, we must enclose the functions or values in curly braces {…} and give them the same name as defined from where they are exported. That’s why these imports are called exports. We cannot change the name of the imported bindings (bindings are nothing but functions, values, or classes).

But also we can import multiple bindings into a single line of code, separated by commas ( , ).

//India.js

// Named import

import { Apple, Windows} from “./America.js”; 

Now we can use these bindings inside the ‘India.js’ component.

//India.js

// Named import

import { Apple, Windows } from “./America”; 

function India() {

  return (

    <>

      <Apple />

      <Windows />

    </>

  );

}

Have a look at the illustration about Named export and import.

Default Export

The default export is also used for exporting components, values, classes, etc. in React JS, but only one element can be exported to another component at a time as a default export. In other words, a file can have only one default export.

Suppose we want to export the “Tesla” component to other components from the “America.js” file as a default export, so the syntax will be like this:

//America.js

function Tesla() {

  return <h1>I’m sending the Tesla car.</h1>;

}

// Default export

export default Tesla; 

In the above code, there is a function called “Tesla”, and this function is exported as a default export. We just need to put export and default keywords in front of the function.

But we can also omit the name of the function in the above code snippet because the “America.js” file represents the name of the function. Have a look at the syntax below.

//America.js

// Default export

export default function () {  

  return <h1>I’m sending the Tesla car.</h1>;

}

Default Import

Now we can easily import the above component into other components by following the same technique as the Named import, but there are two main differences.

• We do not need to wrap the binding inside the curly braces.
• Can be given any name as the name of that exported binding.

//India.js

// Default import

import Car from “./America.js”; 

// Named imports

import { Apple, Windows} from “./America.js”; 

function India() {

  return (

    <>

      <Car />

      <Apple />

      <Windows />

    </>

  );

}

In the above code, we can put any name in the place of “Car” as the default import. Have a look at the illustration below.

Combine more than one import statement

As you can see in the above code snippets, I’m importing named and default exported bindings in the two lines of code. But we can also import both ways on the same line of code in a component.

In order to import default and named bindings, we must keep these two main points in mind.

• The default bindings must come first during importing.
• The non-default (named) binding must be surrounded by curly braces {…}.

// India.js

// Combined named and default imports

import Car, { Apple, Windows } from “./America”;

function India() {

  return (

    <>

      <Car />

      <Apple />

      <Windows />

    </>

  );

}

In the above code, the ‘Car’ is a default import but ‘Apple’ and ‘Windows’ are the Named imports.

Aliasing the binding

We can also change the name of the bindings before exporting them to other components using the “as” keyword.

//America.js

function Windows() {

  return <h1>I’m sending Windows.</h1>;

}

// Named export

export { Windows as Microsoft };

In the above code snippet, I have changed the name of the Windows() function to the Microsoft() function using the “as” keyword. And this new alias name will be used when importing it into other components.

Have a look at the code below.

//India.js

// Named import

import { Microsoft } from “./America”;

function India() {

  return (

    <>

      <Microsoft />

    </>

  );

}

A concise table

Summary

• We have seen two ways of exporting data that can be used in other components. To use those data we must first import the bindings according to the type of exports.
• A default export can be only one in a file or module.
• But a module can have more than one Named export.

Conclusion

In conclusion, there are two ways to import and export components in React JS, each with its own advantages and use cases. The most common method is the default export, which is simple and efficient for exporting a single component.

While named exports are useful when exporting multiple components or constants from a single module. It is also possible to export components and constants together with the object shorthand syntax.

Also, if you are looking for React JS job please search them on talent500.co