Default and Named Exports/Imports in React JS

In React JS, modules are often used to organize and split code into smaller, reusable pieces. JavaScript modules allow you to import and export functionality between files. There are two primary ways to export and import modules in React: default exports and named exports. Understanding the difference between these two will help you write cleaner, more maintainable code. This article explains both types of exports and imports with examples.

Default Exports and Imports

Default exports allow you to export a single value or component from a file. When using default exports, you do not need to specify the name of the item when importing it into another file.

Default Export Example

To export a component or value as the default export, you use the export default keyword. Here’s an example:

          
              import React from 'react';

              // Default export of the component
              function WelcomeMessage() {
                  return 
Welcome to React!
;
              }

              export default WelcomeMessage;

In this example, the WelcomeMessage component is exported as the default export. You can import it into another file like this:

          
              import WelcomeMessage from './WelcomeMessage';

              function App() {
                  return ;
              }

              export default App;

Notice that when you import the default export, you can name it anything you want (e.g., WelcomeMessage), and you don't need to use curly braces around the imported component.

Named Exports and Imports

Named exports allow you to export multiple items from a file, each with its own name. When importing, you must use the exact name of the exported item within curly braces.

Named Export Example

To export multiple values or components by name, you use the export keyword without the default modifier:

          
              import React from 'react';

              // Named export of two components
              export function Header() {
                  return 
Header
;
              }

              export function Footer() {
                  return 
Footer Content
;
              }

In this example, both Header and Footer are exported as named exports. You can import them into another file as follows:

          
              import { Header, Footer } from './Layout';

              function App() {
                  return (
                      

                          

                          

                      

                  );
              }

              export default App;

With named exports, you must import each component by its exact name, and the names inside the curly braces must match the exported names. You can also import just one of the components if needed.

Combining Default and Named Exports

You can combine both default and named exports in a single file. This allows you to export one main value as the default export and other utility functions or components as named exports.

Example of combining default and named exports:

          
              import React from 'react';

              // Default export of the main component
              export default function MainComponent() {
                  return 
Main Component
;
              }

              // Named exports of additional components
              export function Sidebar() {
                  return ;
              }

              export function Footer() {
                  return 
Footer Content
;
              }

In this case, MainComponent is the default export, while Sidebar and Footer are named exports. You can import them as follows:

          
              import MainComponent, { Sidebar, Footer } from './Layout';

              function App() {
                  return (
                      

                          
                          
                          

                      

                  );
              }

              export default App;

Here, MainComponent is imported without curly braces because it is the default export, while Sidebar and Footer are imported inside curly braces as named imports.

Best Practices for Exports/Imports in React

When organizing your React code, it's important to choose the right export/import pattern based on the use case:

  • Use default exports for main components or values that will be imported frequently and used across multiple files.
  • Use named exports when you have multiple components or functions in the same file and need to import them selectively.
  • You can use both default and named exports in the same file to provide flexibility in how the module is consumed.

Conclusion

Default and named exports/imports are key features of modular programming in React JS. Default exports are useful when you want to export a single value or component, while named exports allow you to export multiple components or values from a file. Understanding how to use both methods effectively can help you write better-organized, maintainable, and scalable React applications. Choose the appropriate method depending on the structure of your components and the needs of your application.




Advertisement