Skip to content

Fix improper idiom usage #5883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 6, 2023
Merged

Fix improper idiom usage #5883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b90663
Fix casing for consistency
seriouscatsoserious Apr 5, 2023
15eb377
Fix improper idiom usage
seriouscatsoserious Apr 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/content/learn/importing-and-exporting-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,10 @@ How you export your component dictates how you must import it. You will get an e

| Syntax | Export statement | Import statement |
| ----------- | ----------- | ----------- |
| Default | `export default function Button() {}` | `import Button from './button.js';` |
| Named | `export function Button() {}` | `import { Button } from './button.js';` |
| 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!
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!
Copy link
Collaborator

@harish-sethuraman harish-sethuraman Apr 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes were merged in this PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@harish-sethuraman I'm very new to using Github, could you explain to me why it was that I pushed that old commit? Or direct to me a resource that explains? I did the same process for the second of the two commits, ie made sure everything was up to date from main branch, but for some reason the same one went through twice.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you probably created the second branch from your first branch rather than from main. so it included your last commit.


**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.

Expand Down Expand Up @@ -257,8 +257,8 @@ You may use either a default or a named export for `Profile`, but make sure that

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

<Hint>

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/writing-markup-with-jsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ This is because JSX is stricter and has a few more rules than HTML! If you read

<Note>

Most of the times, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!

</Note>

Expand Down