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;

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

import Message from "./Message";

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

import HelloMessage from "./Message";

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

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;

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;

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