React Export and Import

Hello dear developer friends, if the coffees are ready, we are ready too. 🚀 Today’s topic is React. I wish you good readings 👩🏻‍💻

✨ Topics in this article:

1)Why Export and Import

2)Advantages

3)Disadvantages

4)Usage of Export and Import

• Default Export
• Default Import
• Named Export
• Named Import

5)Tips

• Dynamic Import
• Export and Import Shortcuts

✨Why Export ve Import ?

The magic of components is their reusability: we can create new components from existing ones, but as things get more complex, it makes sense to split them into different files.

The export and import statements are JavaScript ES6 features that enable code sharing between components and modules.

✨Advantages:

1. Modularity: It allows you to divide your code into logical pieces and keep each piece in a separate file, enhancing the readability and maintainability of the project.
2. Reusability: It enables you to define modules or components in one place and use them in different files, reducing code repetition.
3. Tree Shaking: Modern toolchains can remove unused code (tree shaking) from the project. This ensures that only the necessary code is included in the final bundle, reducing the application’s size.

✨Disadvantages:

1. Dynamic Dependencies: While dynamic imports can be useful, they can make understanding dependencies and debugging more challenging.
2. Performance: If a large number of small modules are imported, it could increase the initial loading time, especially in situations where network latency is significant.

✨Usage of Export and Import

Default Export:

• Each file can contain only one default export. It is commonly used when exporting components.

const Profile = () => {
  return <div>Profile</div>
  );
};
export default Profile;

Default Import:

• You can use any name to import a default-exported component or module.

If we are exporting a component using export default, it means we are sending a default value for the component. Therefore, we do not use ‘{}’ when importing it.

import UserProfile from "./Profile";

Named Export:

• Used to export multiple items from a file. The same names must be used when importing.

// utils.js
export const name = 'John Doe';
export const id = 101;
export const email = 'johndoe@example.com';

Named Import:

• You must use the same names inside curly braces {} to import named-exported items.

// App.js
import { name,id,email } from './utils';
function App() {
  return (
    <div>
      <p>Name: {name}</p>
      <p>ID: {id}</p>
      <p>Email: {email}</p>
    </div>
  );
}
export default App;

If you want to import multiple items from a file and group them under a single object, you can use the import * assyntax. This is especially useful when you want to access all named exports from a module through a single object.

Now, let’s import all named exports under the user object:

// App.js
import * as user from './utils';
function App() {
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>ID: {user.id}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}
export default App;

✨Tips

Dinamik import

A method used to load JavaScript modules only when needed. This is particularly useful for improving your application’s initial loading time by splitting your code (code splitting). When a user first tries to use a feature or component, the relevant code is loaded at that moment. This reduces the total amount of code that needs to be loaded at the start of your application.

import('./Profile').then(ProfileModule => {
  const Profile = ProfileModule.default;
  // Profil bileşenini kullan
});

Dynamic import (import()) loads the Profile.js file when needed. This process is asynchronous, so other JavaScript codes continue to run without waiting.

When the module is loaded, the function defined in .then() runs, and you gain access to the Profile component through ProfileModule.default. This method improves the performance of large applications by loading code only when needed.

Export and Import Shortcuts:

These shortcuts make module management in React more effective and organized. Through these shortcuts, you can import a module (import) and then immediately export it from another file (export). This process reduces code repetition and creates a cleaner code structure. Let’s explain this with two examples:

• Default Export ve Import Kısayolu:

export { default as Profile } from './Profile';

This is particularly useful when you want to gather many components in an index file and manage them from a single location. Thus, when you want to use the Profile component, you can import it directly from this index file.

• Named Export ve Import Kısayolu:

export { id, name } from './utils';

In both cases, these shortcuts make it easier to manage inter-module dependencies, reuse code, and maintain the modular structure of the project. Moreover, these methods also facilitate the maintenance and updating of the project.

If you enjoyed the article, don’t forget to check out my other content. Happy reading! 📚

You can buy me a coffee to support me 🌟

If you want to get in touch with me: Esra Nur Mülkpınar