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.