Exporting and importing components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of exporting a component in React?

Exporting a component allows it to be used in other files by making it available outside its own file.

beginner

What is the difference between a default export and a named export?

A default export lets you export one main thing from a file and import it without curly braces. Named exports allow exporting multiple things and require curly braces when importing.

beginner

How do you import a default exported component named <code>Header</code> from a file <code>Header.js</code>?

Use <code>import Header from './Header';</code> to import the default exported component.

beginner

How do you import a named exported component called <code>Footer</code> from <code>Footer.js</code>?

Use <code>import { Footer } from './Footer';</code> with curly braces to import a named export.

intermediate

Why might you choose named exports over default exports in React components?

Named exports help keep imports clear and allow exporting multiple components from one file, making code easier to manage and avoid naming conflicts.

Which syntax correctly exports a React component as the default export?

A export { MyComponent };

B export function MyComponent() {}

C import MyComponent from './MyComponent';

D export default function MyComponent() {}

The 'export default' syntax exports the component as the default export.

How do you import a named export called Button from a file?

A import Button from './Button';

B import { Button } from './Button';

C import * as Button from './Button';

D export { Button } from './Button';

Named exports must be imported with curly braces.

What happens if you try to import a default export using curly braces?

A It imports all named exports.

B It works fine.

C It causes an error or undefined import.

D It imports the file as a module object.

Default exports must be imported without curly braces; using them causes errors.

Which statement is true about named exports?

A You can export multiple named components from one file.

B Named exports must be imported without curly braces.

C You can only have one named export per file.

D Named exports are the same as default exports.

Named exports allow multiple exports from a single file.

If a file exports a component as default, how do you rename it on import?

A Use <code>import NewName from './file';</code>

B You cannot rename default exports.

C Use <code>import { NewName } from './file';</code>

D Use <code>export default NewName from './file';</code>

Default exports can be imported with any name you choose without curly braces.

Explain how to export and import a React component using default export.

Think about how you share one main component from a file.

Describe the difference between named exports and default exports in React components.

Consider how you might organize many components in one file.