Follow

Follow
Different ways to import and export components in React JS.

Different ways to import and export components in React JS.

In this article you will learn about exporting and importing components in React JS in depth.

Ajay Yadav's photo
Ajay Yadav
·Dec 22, 2022·

6 min read

Play this article

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. Right? So 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.

Now, first things first: What is the actual meaning of export and import in general?

  • Import: Imports are goods or services that are brought into our country from other countries. Let's say we want to buy a Tesla car. But in India, Tesla is not manufacturing cars right now. To use Tesla in India, we have to import the car first from another country (America), and then we can use Tesla in India.

  • Export: Export means sending goods and services to another country. In the above example, America is sending Tesla cars to India.

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 to export and import components; let's see.

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 functions.

The export keyword has revealed these functions, which can later be used by other React components.

//America.js

export function Apple() {
  return <h1>I'm sending MacBook.</h1>;
}

export function Windows() {
  return <h1>I'm sending Windows.</h1>;
}

In the above code, the 'America.js' file 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 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>;
}

const a = 10, b = 20, c = 30;

// Exporting all items at one go using curly braces.
export { Apple, Windows, a, b, c };

Named import

Once we defined a component with the export keywords, we can access or import those 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

import { Apple } from "./America.js";
import { Windows } from "./America.js";

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

Also, we need to wrap the functions or values inside the curly braces { } and must have to put the same name as defined from where they are being exported. That’s why these imports are called Named export. We can not change the name of the imported bindings aka (Functions/Values/Classes).

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

//India.js
import { Apple, Windows, a, b, c } from "./America.js";

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

//India.js

import { Apple, Windows, a, b, c } from "./America";

function India() {
  console.log(a, b, c);
  return (
    <>
      <Apple />
      <Windows />
    </>
  );
}

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

Image of Named export and import in JavaScript.

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 the other module as a default export at a time. 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>;
}
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 below syntax.

//America.js

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 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

import Car from "./America.js";

function India() {
  return (
    <>
      <Car />
    </>
  );
}

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

Image of Default export and import in JavaScript.

Combining the import statement

We can also import both ways on the same line in a component. In order to import Default and Named bindings, we need to keep these two points in mind.

  • The default bindings must come first during importing.

  • The non-default(Named) binding must be surrounded by curly braces { }.

// India.js

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 revealing them to other components using the as keyword.

//America.js

function Windows() {
  return <h1>I'm sending Windows.</h1>;
}
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 below code.

//India.js

import { Microsoft } from "./America";

function India() {
  return (
    <>
      <Microsoft />
    </>
  );
}

Summarize

  • We have seen two ways of exporting data that can be used in another module. 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 exports.

Would you like me to write an article for you?

Thanks for reading this article to the end, if you found it useful, do not forget to share it with your audience. 🙂

Also, I am looking for a technical writing opportunity. I can write on:

  1. HTML/CSS

  2. JavaScript

  3. React JS

  4. Git/GitHub

So you can reach out to me on:

Twitter

LinkedIn

Did you find this article valuable?

Support Ajay Yadav by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this