Exporting and importing components in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export the component as default.

React

function Greeting() {
  return <h1>Hello!</h1>;
}

export [1] Greeting;

Drag options to blanks, or click blank then click option'

Avar

Bdefault

Clet

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'const' or 'let' instead of 'default' in export statement.

Forgetting to export the component at all.

Using export default allows this component to be imported without curly braces.

2fill in blank

medium

Complete the code to import the default exported component.

React

import [1] from './Greeting';

function App() {
  return <[1] />;
}

Drag options to blanks, or click blank then click option'

AGreeting

B{Greeting}

C* as Greeting

Dgreeting

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces when importing a default export.

Using a different case or name that doesn't match the export.

Default exports are imported without curly braces and can use the same name as the component.

3fill in blank

hard

Fix the error in importing a named export.

React

import [1] from './Button';

function App() {
  return <Button />;
}

Drag options to blanks, or click blank then click option'

A{Button}

Bbutton

C* as Button

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Importing named exports without curly braces.

Using default import syntax for named exports.

Named exports must be imported with curly braces to match the export syntax.

4fill in blank

hard

Fill both blanks to export and import a named component correctly.

React

function Header() {
  return <header>Welcome</header>;
}

export [1];

import [2] from './Header';

Drag options to blanks, or click blank then click option'

Anamed

B{Header}

Cdefault

DHeader

Attempts:

3 left

💡 Hint

Common Mistakes

Using default keyword when exporting named components.

Importing named exports without curly braces.

Named exports use export { Header } and must be imported with curly braces.

5fill in blank

hard

Fill all three blanks to export multiple named components and import them correctly.

React

export function Footer() {
  return <footer>Bye</footer>;
}

export function Sidebar() {
  return <aside>Links</aside>;
}

import [1] from './Layout';
import [2] from './Layout';

function App() {
  return (
    <>
      <[3] />
      <Sidebar />
    </>
  );
}

Drag options to blanks, or click blank then click option'

A{Footer}

B{Sidebar}

CFooter

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Importing named exports without curly braces.

Using lowercase or incorrect component names in import.

When importing multiple named exports, use curly braces around each name.

Practice

1. What is the main reason to export a React component from a file?

easy

A. To make the component run faster

B. To hide the component from other files

C. To use the component in other files by importing it

D. To automatically style the component

Solution

1. Step 1: Understand the purpose of export

   Exporting a component allows it to be shared and used in other files.

2. Step 2: Connect export with import usage

   Without export, other files cannot import and use the component.

3. Final Answer:

   To use the component in other files by importing it -> Option C

4. Quick Check:

   Export shares components [OK]

Hint: Export lets you share components between files [OK]

Common Mistakes:

• Thinking export improves speed
• Believing export hides components
• Assuming export adds styles automatically

2. Which of the following is the correct syntax to export a React component as the default export?

easy

A. export MyComponent = () => Hello;

B. export default function MyComponent() { return Hello; }

C. default export MyComponent() { return Hello; }

D. export function default MyComponent() { return Hello; }

Solution

1. Step 1: Recall default export syntax

   The correct syntax is 'export default' followed by the function declaration.

2. Step 2: Check each option's syntax

   export default function MyComponent() { return
   Hello; } matches the correct syntax; others have invalid order or keywords.

3. Final Answer:

   export default function MyComponent() { return <div>Hello</div>; } -> Option B

4. Quick Check:

   Default export uses 'export default' [OK]

Hint: Default export starts with 'export default' [OK]

Common Mistakes:

• Placing 'default' after function name
• Using '=' with export incorrectly
• Mixing 'export' and 'default' order

3. Given these two files, what will be the output when App is rendered?

// Button.js
export function Button() { return <button>Click</button>; }
// App.js
import { Button } from './Button';
export default function App() { return <div><Button /></div>; }

medium

A. <div><button>Click</button></div>

B. Error: Button not found

C. <button>Click</button>

D. <div>Button</div>

Solution

1. Step 1: Understand named export and import

   Button is exported as a named export and imported with curly braces correctly.

2. Step 2: Analyze rendering in App component

   App renders a div containing the Button component, which returns a button element with text 'Click'.

3. Final Answer:

   <div><button>Click</button></div> -> Option A

4. Quick Check:

   Named export/import works = output includes button inside div [OK]

Hint: Named exports import with braces { } [OK]

Common Mistakes:

• Importing named export without braces
• Expecting Button text instead of button element
• Confusing default and named exports

4. What is wrong with this import statement?

import Button from './Button';

Given that Button.js contains:
export function Button() { return <button>Click</button>; }

medium

A. Button is a named export but imported as default

B. The file path is incorrect

C. Button component is not exported at all

D. The import statement is missing curly braces

Solution

1. Step 1: Check export type in Button.js

   Button is exported as a named export using 'export function Button'.

2. Step 2: Compare with import syntax

   Importing without braces means default import, but Button is not default exported.

3. Final Answer:

   Button is a named export but imported as default -> Option A

4. Quick Check:

   Named export must import with braces [OK]

Hint: Named exports need braces in import [OK]

Common Mistakes:

• Importing named export without braces
• Assuming default export without checking
• Ignoring export type in source file

5. You have two components in Widgets.js:

export function WidgetA() { return <div>A</div>; }
export function WidgetB() { return <div>B</div>; }

How should you import both components in Dashboard.js to use them?

hard

A. import WidgetA from './Widgets'; import WidgetB from './Widgets';

B. import WidgetA, WidgetB from './Widgets';

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

D. import { WidgetA, WidgetB } from './Widgets';

Solution

1. Step 1: Identify export type in Widgets.js

   Both WidgetA and WidgetB are named exports.

2. Step 2: Choose correct import syntax for multiple named exports

   Use curly braces with both names inside: import { WidgetA, WidgetB } from './Widgets';

3. Final Answer:

   import { WidgetA, WidgetB } from './Widgets'; -> Option D

4. Quick Check:

   Multiple named exports import with braces and commas [OK]

Hint: Import multiple named exports with { A, B } [OK]

Common Mistakes:

• Trying to import multiple named exports as default
• Using separate default imports for each named export
• Using import * without accessing properties