কম্পোনেন্ট ইম্পোর্ট এবং এক্সপোর্ট করা

রুট কম্পোনেন্ট ফাইল

আপনার প্রথম কম্পোনেন্ট এ আপনি একটি Profile কম্পোনেন্ট, এবং এটি রেন্ডার করে এমন একটি Gallery কম্পোনেন্ট তৈরি করেছেনঃ

এই উদাহরণ টি বর্তমানে রয়েছে রুট কম্পোনেন্ট ফাইলে, যার নাম App.js। Create React App এ আপনার অ্যাপ্লিকেশন টি src/App.js ফাইলে থাকে। যদিও আপনার সেটআপ এর উপর নির্ভর করে আপনার রুট কম্পোনেন্ট অন্য ফাইলেও থাকতে পারে। যদি আপনি ফাইল ভিত্তিক রাউটিং সহ কোন ফ্রেমওয়ার্ক ব্যবহার করেন, যেমন Next.js, তাহলে প্রতিটি পৃষ্ঠার জন্য আপনার রুট কম্পোনেন্ট ভিন্ন হবে।

Exporting and importing a component

What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move Gallery and Profile out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:

1. Make a new JS file to put the components in.
2. Export your function component from that file (using either default or named exports).
3. Import it in the file where you’ll use the component (using the corresponding technique for importing default or named exports).

Here both Profile and Gallery have been moved out of App.js into a new file called Gallery.js. Now you can change App.js to import Gallery from Gallery.js:

Notice how this example is broken down into two component files now:

1. Gallery.js:
   • Defines the Profile component which is only used within the same file and is not exported.
   • Exports the Gallery component as a default export.
2. App.js:
   • Imports Gallery as a default import from Gallery.js.
   • Exports the root App component as a default export.

import Gallery from './Gallery';

Deep Dive

Default vs named exports

Show Details

There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. A file can have no more than one default export, but it can have as many named exports as you like.

How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:

Syntax	Export statement	Import statement
Default	export default function Button() {}	import Button from './Button.js';
Named	export function Button() {}	import { Button } from './Button.js';

When you write a default import, you can put any name you want after import. For example, you could write import Banana from './Button.js' instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That’s why they are called named imports!

People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values. Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like export default () => {}, are discouraged because they make debugging harder.

Exporting and importing multiple components from the same file

What if you want to show just one Profile instead of a gallery? You can export the Profile component, too. But Gallery.js already has a default export, and you can’t have two default exports. You could create a new file with a default export, or you could add a named export for Profile. A file can only have one default export, but it can have numerous named exports!

First, export Profile from Gallery.js using a named export (no default keyword):

export function Profile() {
  // ...
}

Then, import Profile from Gallery.js to App.js using a named import (with the curly braces):

import { Profile } from './Gallery.js';

Finally, render <Profile /> from the App component:

export default function App() {
  return <Profile />;
}

Now Gallery.js contains two exports: a default Gallery export, and a named Profile export. App.js imports both of them. Try editing <Profile /> to <Gallery /> and back in this example:

Now you’re using a mix of default and named exports:

• Gallery.js:
  • Exports the Profile component as a named export called Profile.
  • Exports the Gallery component as a default export.
• App.js:
  • Imports Profile as a named import called Profile from Gallery.js.
  • Imports Gallery as a default import from Gallery.js.
  • Exports the root App component as a default export.