Translate: import and export components page #420
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 Five Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
| --- | ||
|
|
||
| <Intro> | ||
|
|
||
| The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places. | ||
| Sức mạnh của các component nằm ở khả năng tái sử dụng của chúng: bạn có thể tạo các component được tạo thành từ các component khác. Nhưng khi bạn lồng ghép nhiều component hơn, thường có ý nghĩa để bắt đầu chia component đó ra thành các file khác nhau. Điều này giúp bạn giữ cho các file của mình dễ quét và tái sử dụng các component ở nhiều nơi hơn. |
There was a problem hiding this comment.
Suggested change
| Sức mạnh của các component nằm ở khả năng tái sử dụng của chúng: bạn có thể tạo các component được tạo thành từ các component khác. Nhưng khi bạn lồng ghép nhiều component hơn, thường có ý nghĩa để bắt đầu chia component đó ra thành các file khác nhau. Điều này giúp bạn giữ cho các file của mình dễ quét và tái sử dụng các component ở nhiều nơi hơn. | |
| Sức mạnh của các component nằm ở khả năng tái sử dụng của chúng: bạn có thể tạo các component được tạo thành từ các component khác. Nhưng khi bạn lồng ghép nhiều các component với nhau, bạn nên bắt đầu chia component đó ra thành các file khác nhau. Điều này giúp bạn giữ cho các file của mình dễ dàng tìm kiếm và tái sử dụng các component ở nhiều nơi hơn. |
| * How to split components into multiple files | ||
| * File component gốc là gì | ||
| * Làm thế nào để import và export một component | ||
| * Khi nào thì dùng default và name import và export |
There was a problem hiding this comment.
Suggested change
| * Khi nào thì dùng default và name import và export | |
| * Khi nào thì dùng default và named import và export |
| @@ -52,17 +52,18 @@ img { margin: 0 10px 10px 0; height: 90px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. | |||
| Những thành phần trong ví dụ này này hiện tại có trong một **root component file,** tên là `App.js`. Phụ thuộc vào cách bạn cài đặt, component root của bạn có thể ở trong file khác. Nếu bạn sử dụng một framework với routing dựa trên file chẳng hạn như Next.js thì component root của bạn sẽ khác với những trang khác. | |||
There was a problem hiding this comment.
Suggested change
| Những thành phần trong ví dụ này này hiện tại có trong một **root component file,** tên là `App.js`. Phụ thuộc vào cách bạn cài đặt, component root của bạn có thể ở trong file khác. Nếu bạn sử dụng một framework với routing dựa trên file chẳng hạn như Next.js thì component root của bạn sẽ khác với những trang khác. | |
| Những thành phần trong ví dụ này này hiện tại có trong một **root component file,** tên là `App.js`. Phụ thuộc vào cách bạn cài đặt, component root của bạn có thể ở trong file khác. Nếu bạn sử dụng một framework với routing dựa trên file chẳng hạn như Next.js thì component root của bạn sẽ khác nhau ở mỗi trang. |
|
|
||
| ## Exporting and importing a component {/*exporting-and-importing-a-component*/} | ||
| ## Export và import một component {/*exporting-and-importing-a-component*/} | ||
|
|
||
| What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: |
There was a problem hiding this comment.
Suggested change
| What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: |
|
|
||
| What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: | ||
| Nếu bạn muốn thay đổi màn hình chào đón trong tương lai và đặt một danh sách các sách khoa học ở đó? Hoặc đặt tất cả các hồ sơ một nơi khác? Việc di chuyển `Gallery` và `Profile` ra khỏi file component gốc là hợp lý. Điều này sẽ làm cho chúng trở nên linh hoạt hơn và có thể sử dụng lại trong các file khác. Bạn có thể di chuyển một component theo ba bước: |
There was a problem hiding this comment.
Suggested change
| Nếu bạn muốn thay đổi màn hình chào đón trong tương lai và đặt một danh sách các sách khoa học ở đó? Hoặc đặt tất cả các hồ sơ một nơi khác? Việc di chuyển `Gallery` và `Profile` ra khỏi file component gốc là hợp lý. Điều này sẽ làm cho chúng trở nên linh hoạt hơn và có thể sử dụng lại trong các file khác. Bạn có thể di chuyển một component theo ba bước: | |
| Sẽ ra sao nếu bạn muốn thay đổi màn chào đón trong tương lai và đặt một danh sách các sách khoa học ở đó? Hoặc đặt tất cả các `Profile` một nơi khác? Việc di chuyển `Gallery` và `Profile` ra khỏi file component gốc là hợp lý. Điều này sẽ làm cho chúng trở nên linh hoạt hơn và có thể sử dụng lại trong các file khác. Bạn có thể di chuyển một component theo ba bước: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.