mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): update React import/export lesson to cover default and named exports. (#64931)
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Stephen Mutheu
+89
-50
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 674ba6876f7ada867135bb95
|
||||
title: How Can You Import and Export Components in React?
|
||||
title: How Do Default and Named Exports Work in React Components?
|
||||
challengeType: 19
|
||||
dashedName: how-can-you-import-and-export-components-in-react
|
||||
---
|
||||
@@ -9,6 +9,10 @@ dashedName: how-can-you-import-and-export-components-in-react
|
||||
|
||||
In earlier lessons, you learned how to work with imports and exports in JavaScript. In this lesson, we will take a look at how to import and export components in React.
|
||||
|
||||
An export makes a component available to other files. An import allows a file to use a component that was exported elsewhere. In React projects, this is how components are reused and combined to build user interfaces.
|
||||
|
||||
In this lesson, you will learn how to export React components using default exports and named exports, and how to import them where they are needed.
|
||||
|
||||
In this example, we have a `Cat` component that belongs in a file called `Cat.jsx`. For the file extension, we are using the `.jsx` file extension because this file is mainly working with JSX.
|
||||
|
||||
This `Cat` component returns a JSX markup with a title and image for a cat called Mr. Whiskers:
|
||||
@@ -99,89 +103,124 @@ export default function App() {
|
||||
}
|
||||
```
|
||||
|
||||
As you continue building your own React projects, you’ll become more comfortable organizing components, importing them where needed, and creating sophisticated UIs by composing these modular components.
|
||||
This approach works well when a file is responsible for exporting a single main component, keeping the import syntax simple and easy to read. Remember, a file can only have one default export, which makes it ideal for a file that primarily contains a single component.
|
||||
|
||||
|
||||
Now that you know how to use default exports, let's look at named exports. Named exports allow a file to share multiple components or functions. Unlike default exports, these must be imported using the exact name they were exported with (unless you rename them using `as` term).
|
||||
|
||||
This is useful when a file serves as a library of components. For example, here is a file containing two components, Cat and Dog:
|
||||
|
||||
```jsx
|
||||
// Animals.jsx
|
||||
export function Cat() {
|
||||
return <h2>Mr. Whiskers</h2>;
|
||||
}
|
||||
|
||||
export function Dog() {
|
||||
return <h2>Fido</h2>;
|
||||
}
|
||||
```
|
||||
|
||||
We use the export keyword individually on each component. To use these in another file, we import them using curly braces:
|
||||
|
||||
|
||||
```jsx
|
||||
import { Cat, Dog } from "./Animals";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div>
|
||||
<Cat />
|
||||
<Dog />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
The `{ Cat, Dog }` syntax tells JavaScript to import the specific named exports from the `Animals.jsx` file. The names inside the curly braces must match the exported names exactly. If you need to avoid naming conflicts, or if you prefer a different name in the current file, you can rename a component during import using the as keyword.
|
||||
|
||||
```jsx
|
||||
import { Cat as Kitty } from "./Animals";
|
||||
|
||||
export default function App() {
|
||||
return <Kitty />;
|
||||
}
|
||||
```
|
||||
|
||||
Finally, a file can have one default export and multiple named exports.
|
||||
|
||||
```jsx
|
||||
// Animals.jsx
|
||||
export default function Cat() {
|
||||
return <h2>Mr. Whiskers</h2>;
|
||||
}
|
||||
|
||||
export function Dog() {
|
||||
return <h2>Fido</h2>;
|
||||
}
|
||||
```
|
||||
|
||||
When importing mixed exports, the default export comes first (without braces), followed by the named exports (inside braces):
|
||||
|
||||
```jsx
|
||||
// App.jsx
|
||||
import Cat, { Dog } from "./Animals";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div>
|
||||
<Cat />
|
||||
<Dog />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In this example, `Cat` is the default export, so it does not use curly braces. `Dog` is a named export, so it requires them.
|
||||
|
||||
By understanding how default and named exports work, you can organize React components across multiple files and reuse them where needed. As you build larger applications, choosing the right export style will help keep your code clear and maintainable, and make it easier to work with components created by others.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is the correct way to export a React component?
|
||||
How would you export multiple components from the same file using named exports?
|
||||
|
||||
## --answers--
|
||||
|
||||
```jsx
|
||||
export default function Cat() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Mr. Whiskers</h2>
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
|
||||
alt="Tuxedo cats running on dirt ground."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export function Cat() { ... } export function Dog() { ... }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```jsx
|
||||
exportComponent function Cat() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Mr. Whiskers</h2>
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
|
||||
alt="Tuxedo cats running on dirt ground."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default { Cat, Dog };
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle section where this was discussed.
|
||||
Ensure you are using valid function keywords and not relying on the single default export.
|
||||
|
||||
---
|
||||
|
||||
```jsx
|
||||
e.default function Cat() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Mr. Whiskers</h2>
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
|
||||
alt="Tuxedo cats running on dirt ground."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export component Cat { ... } export component Dog { ... }
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle section where this was discussed.
|
||||
Ensure you are using valid function keywords and not relying on the single default export.
|
||||
|
||||
---
|
||||
|
||||
```jsx
|
||||
default function Cat() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Mr. Whiskers</h2>
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
|
||||
alt="Tuxedo cats running on dirt ground."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
default export Cat; default export Dog;
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle section where this was discussed.
|
||||
Ensure you are using valid function keywords and not relying on the single default export.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
+1
-1
@@ -23,7 +23,7 @@
|
||||
},
|
||||
{
|
||||
"id": "674ba6876f7ada867135bb95",
|
||||
"title": "How Can You Import and Export Components in React?"
|
||||
"title": "How Do Default and Named Exports Work in React Components?"
|
||||
},
|
||||
{
|
||||
"id": "6734e88cc46e6dc679420040",
|
||||
|
||||
Reference in New Issue
Block a user