DEV Community

Cover image for Different Types of Export in React
jeetvora331
jeetvora331

Posted on

38 1 1 1 2

Different Types of Export in React

When working with React, you'll often hear about "exporting" and "importing" components. These are fundamental concepts that enable the modular structure of React applications. In this article, we'll explore the different types of exports in React and how they're used.

What are Exports?

In JavaScript, modules are individual files containing code. This code can be functions, objects, values, classes, or React components. The exportkeyword allows these elements to be used in other JavaScript files, thus making the code reusable and modular.

There are two main types of export in React: named export and default export.

Default export

A file can have no more than one default export. This type of export is commonly used when a file exports only one component.

// Message.js
import React from 'react';

const Message = () => {
  return <div>Hello React!</div>;   
}

export default Message;

Enter fullscreen mode Exit fullscreen mode

You can import the Message component in another file like this:

import Message from "./Message";
Enter fullscreen mode Exit fullscreen mode

Note that the name Message is arbitrary and can be changed to anything you like

import HelloMessage from "./Message";
Enter fullscreen mode Exit fullscreen mode

Named Exports

A file can have as many named exports as you like. Named exports are used when a file exports multiple components or values

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}
Enter fullscreen mode Exit fullscreen mode

To use these functions in another file, we need to import them using the same names and curly braces:

// App.js
import React from 'react';
import { add, subtract } from './utils'; // import the utility functions

function App() {
  return (
    <div>
      <p>{add(2, 3)}</p>
      <p>{subtract(5, 2)}</p>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Alternatively, we can use the * symbol to import all the named exports from a file as an object, which is very similar to other languages like python and java

// App.js
import React from 'react';
import * as utils from './utils'; // import all the named exports as an object

function App() {
  return (
    <div>
      <p>{utils.add(2, 3)}</p>
      <p>{utils.subtract(5, 2)}</p>
    </div>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

When to use named export and when to use default export?

  • Use named export when you want to export multiple variables or functions from a file.
  • Use default export when you want to export only one variable or function from a file.
  • Use named export when you want to keep the same name for your variables or functions across different files.
  • However, it's important to note that you can use both default and named exports in the same file.

Conclusion
Always ensure to match the export type with the corresponding import syntax to avoid errors. Remember, a file can have multiple named exports but only one default export. I hope that this article was helpful and informative for you. Happy coding! 😊

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (1)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay