From b07ea4f7e73a73f83e72f436cccdd2e0e8134386 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Wed, 26 Apr 2023 22:48:50 +0800
Subject: [PATCH 1/8] feat: add translation to bahasa

---
 .../importing-and-exporting-components.md     | 127 +++++++++---------
 1 file changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index f8f55605c..730de7c7d 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -1,26 +1,26 @@
 ---
-title: Importing and Exporting Components
+title: Mengimport dan Mengeksport Komponen
 ---
 
 <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.
+Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponan yang disusun dengan komponen lain. Namun, ketika Anda menyusun komponen-komponen yang semakin banyak, seringkali lebih masuk akal untuk mulai membaginya ke dalam file-file yang berbeda. Dengan ini Anda menjaga file Anda mudah untuk dipindai dan digunakan kembali di banyak tempat.
 
 </Intro>
 
 <YouWillLearn>
 
-* What a root component file is
-* How to import and export a component
-* When to use default and named imports and exports
-* How to import and export multiple components from one file
-* How to split components into multiple files
+* Apa itu file komponen root
+* Bagaimana cara import dan eksport komponen
+* Kapan menggunakan default dan named import dan eksport
+* Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu file
+* Bagaimana cara memisahkan komponen menjadi beberapa file
 
 </YouWillLearn>
 
-## The root component file {/*the-root-component-file*/}
+## File komponen root {/*the-root-component-file*/}
 
-In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+Pada [Komponen Pertama Anda](/learn/your-first-component), Anda membuat komponen `Profile` dan komponen `Gallery` yang merender:
 
 <Sandpack>
 
@@ -37,7 +37,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Ilmuan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. 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.
+Komponen tersebut saat ini berada pada **file komponen root,** yang bernama `App.js` pada contoh ini. Pada [Create React App](https://create-react-app.dev/), aplikasi Anda berada di `src/App.js`. Tergantung pada persiapan Anda, komponen root Anda bisa saja berada di file lain. Jika Anda menggunakan framework dengan file-based routing, seperti Next.js, komponen root Anda akan berbeda di setiap halaman.
 
-## Exporting and importing a component {/*exporting-and-importing-a-component*/}
+## Mengeksport dan mengimport sebuah komponen {/*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:
+Bagaimana jika Anda ingin mengubah landing screen di masa depan dan memasukkan daftar buku sains disana? Atau meletakkan semua profil di tempat lain? Masuk akal untuk memindahkan `Gallery` dan `Profile` dari file komponen root. Ini akan membuat lebih modular dan dapat digunakan kembali di file lain. Anda dapat memindahkan sebuah komponen dengan tiga langkah:
 
-1. **Make** a new JS file to put the components in.
-2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+1. **Buat** sebuah file JS baru untuk memasukkan komponen.
+2. **Eksport** function component Anda dari file tersebut (menggunakan baik [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
+3. **Import** dimana Anda akan menggunakan komponen tersebut (menggunakan teknik yang sesuai untuk mengimport [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
 
-Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+Di sini `Profile` dan `Gallery` sudah dipindahkan dari `App.js` kedalam file baru bernama `Gallery.js`. Sekarang Anda dapat mengubah `App.js` untuk mengimport `Gallery` dari `Gallery.js`:
 
 <Sandpack>
 
@@ -89,7 +89,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Ilmuan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -104,25 +104,25 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Notice how this example is broken down into two component files now:
+Perhatikan bagaimana pada contoh ini dipencah menjadi dua file komponen sekarang:
 
 1. `Gallery.js`:
-     - Defines the `Profile` component which is only used within the same file and is not exported.
-     - Exports the `Gallery` component as a **default export.**
+     - Mendefinisikan `Profile` komponen yang hanya digunakan dalam file yang sama dan tidak dieksport.
+     - Mengeksport `Gallery` komponen sebagai **default export.**
 2. `App.js`:
-     - Imports `Gallery` as a **default import** from `Gallery.js`.
-     - Exports the root `App` component as a **default export.**
+     - Mengimport `Gallery` sebagai **default import** dari `Gallery.js`.
+     - Mengeksport root `App` komponen sebagai **default export.**
 
 
 <Note>
 
-You may encounter files that leave off the `.js` file extension like so:
+Anda mungkin menemukan file yang meninggalkan ekstensi file `.js` seperti ini:
 
 ```js 
 import Gallery from './Gallery';
 ```
 
-Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+Salah satu `'./Gallery.js'` atau `'./Gallery'` akan jalan dengan React, meskipun yang pertama lebih mirip dengan bagaimana [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) bekerja.
 
 </Note>
 
@@ -130,34 +130,34 @@ Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former
 
 #### Default vs named exports {/*default-vs-named-exports*/}
 
-There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+Ada dua cara utama untuk mengeksport nilai dengan JavaScript: default exports dan named exports. Sejauh ini, contoh kita hanya menggunakan default exports. Tapi Anda dapat menggunakan satu atau keduanya pada file yang sama. **Sebuah file dapat menggunakan tidak lebih dari satu _default_ export, tapi dapat menggunakan _named_ exports sebanyak yang Anda suka.**
 
-![Default and named exports](/images/docs/illustrations/i_import-export.svg)
+![Default dan named exports](/images/docs/illustrations/i_import-export.svg)
 
-How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+Bagaimana Anda mengeksport komponen Anda mendikte bagaimana Anda harus mengimportnya. Anda akan mendapatkan error jika Anda mencoba untuk mengimport default export dengan cara yang sama Anda menggunakan named export! Tabel ini akan membantu Anda untuk melacak:
 
-| Syntax           | Export statement                           | Import statement                          |
+| Sintaksis           | Pernyataan Export                           | Pernyataan Import                          |
 | -----------      | -----------                                | -----------                               |
 | 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!
+Ketika Anda menulis _default_ import, Anda dapat memberi nama apa saja setelah `import`. Contoh, Anda dapat menulis `import Banana from './Button.js'` dan itu akan tetap memberi Anda export default yang sama. Sebaliknya, dengan named imports, nama harus sama di kedua sisi. Itulah mengapa disebut _named_ imports!
 
-**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.
+**Orang-orang seringkali menggunakan default exports jika file yang dieksport hanya satu komponen, dan menggunakan named exports jika mengeksport beberapa komponen dan nilai.** Bagaimanapun gaya koding yang Anda gunakan, selalu beri nama yang berarti pada fungsi komponen Anda dan isi file tersebut. Komponen tanpa nama, seperti `export default () => {}`, tidak disarankan karena membuat proses debugging lebih sulit.
 
 </DeepDive>
 
-## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## Mengeksport dan mengimport beberapa komponen dari file yang sama {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+Bagaimana jika Anda ingin menampilkan hanya satu `Profile` selain sebuah galeri? Anda dapat mengeksport komponen `Profile` juga. Tapi `Gallery.js` telah menggunakan *default* export, dan Anda tidak dapat memiliki _dua_ default exports. Anda dapat membuat file baru dengan default export, atau Anda dapat menambahkan sebuah *named* export untuk `Profile`. **Sebuah file hanya dapat memiliki satu default export, tapi dapat memiliki banyak named export!**
 
 <Note>
 
-To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you!
+Untuk menguragi potensi kebingunan antara default dan named exports, beberapa tim memilih untuk berpegang pada satu gaya penulisan (default atau named), atau menghindari mencampurnya dalam satu file. Lakukan yang terbaik untuk Anda!
 
 </Note>
 
-First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+Pertama, **eksport** `Profile` dari `Gallery.js` menggunakan named export (tanpa kata kunci `default`):
 
 ```js
 export function Profile() {
@@ -165,13 +165,13 @@ export function Profile() {
 }
 ```
 
-Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+Selanjutnya, **import** `Profile` dari `Gallery.js` ke `App.js` menggunakan named import (dengan kurung kurawal):
 
 ```js
 import { Profile } from './Gallery.js';
 ```
 
-Finally, **render** `<Profile />` from the `App` component:
+Akirnya, **render** `<Profile />` dari komponen `App`:
 
 ```js
 export default function App() {
@@ -179,7 +179,8 @@ export default function App() {
 }
 ```
 
-Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `<Profile />` to `<Gallery />` and back in this example:
+Sekarang `Gallery.js` berisi dua eksport: default `Gallery` export, dan named `Profile` export. `App.js` mengimport keduanya.
+Coba mengedit `<Profile />` ke `<Gallery />` dan kembali pada contoh ini:
 
 <Sandpack>
 
@@ -207,7 +208,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Ilmuan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -222,24 +223,24 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Now you're using a mix of default and named exports:
+Sekarang Anda menggunakan campuran default dan named exports:
 
 * `Gallery.js`:
-  - Exports the `Profile` component as a **named export called `Profile`.**
-  - Exports the `Gallery` component as a **default export.**
+  - Mengeksport komponen `Profile` sebagai **named export bernama `Profile`.**
+  - Mengeksport komponen `Gallery` sebagai **default export.**
 * `App.js`:
-  - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
-  - Imports `Gallery` as a **default import** from `Gallery.js`.
-  - Exports the root `App` component as a **default export.**
+  - Mengimport `Profile` as a **named import called `Profile`** dari `Gallery.js`.
+  - Mengimport `Gallery` as a **default import** dari `Gallery.js`.
+  - Mengeksport komponen root `App` sebagai **default export.**
 
 <Recap>
 
-On this page you learned:
+Pada halaman ini Anda belajar:
 
-* What a root component file is
-* How to import and export a component
-* When and how to use default and named imports and exports
-* How to export multiple components from the same file
+* Apa itu file komponen root
+* Bagaimana cara import dan eksport komponen
+* Kapan menggunakan default dan named import dan eksport
+* Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu file
 
 </Recap>
 
@@ -247,22 +248,22 @@ On this page you learned:
 
 <Challenges>
 
-#### Split the components further {/*split-the-components-further*/}
+#### Memisahkan komponen lebih jauh {/*split-the-components-further*/}
 
-Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+Saat ini, `Gallery.js` mengeksport kedua `Profile` dan `Gallery`, yang mana sedikit membingungkan.
 
-Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
+Pindahkan komponen `Profile` pada miliknya sendiri `Profile.js`, dan ubah komponen `App` untuk merender kedua `<Profile />` dan `<Gallery />` satu setelah lainnya.
 
-You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+Anda mungkin menggukanan salah satu dari default atau named export untuk `Profile`, tetapi pastikan bahwa Anda menggunakan sintaksis import pada kedua `App.js` dan `Gallery.js`. Anda dapat merujuk pada table dari bagian deep dive di atas:
 
-| Syntax           | Export statement                           | Import statement                          |
+| Sintaksis           | Pernyataan Export                           | Pernyataan Import                          |
 | -----------      | -----------                                | -----------                               |
 | Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
 | Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
 <Hint>
 
-Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+Jangan lupa untuk mengimport komponen Anda di mana mereka dipanggil. Bukankah `Gallery` juga menggunakan `Profile`?
 
 </Hint>
 
@@ -282,7 +283,7 @@ export default function App() {
 ```
 
 ```js Gallery.js active
-// Move me to Profile.js!
+// Pindahkan aku ke Profile.js!
 export function Profile() {
   return (
     <img
@@ -295,7 +296,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Ilmuan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -313,11 +314,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-After you get it working with one kind of exports, make it work with the other kind.
+Setelah Anda berhasil menjalankan dengan salah satu eksport, buat juga berjalan dengan jenis yang lain.
 
 <Solution>
 
-This is the solution with named exports:
+Ini adalah solusi menggunakan named exports:
 
 <Sandpack>
 
@@ -341,7 +342,7 @@ import { Profile } from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Ilmuan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -367,7 +368,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-This is the solution with default exports:
+Ini adalah solusi menggunakan default exports:
 
 <Sandpack>
 
@@ -391,7 +392,7 @@ import Profile from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Ilmuan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />

From 9279bd8beb8e459fea0b4c4cdaf67ee6d00d5e20 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Thu, 27 Apr 2023 06:13:21 +0800
Subject: [PATCH 2/8] use italic for usage of `file`

Co-authored-by: RiN <hi@rin.rocks>
---
 src/content/learn/importing-and-exporting-components.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index 730de7c7d..c66932e8f 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -58,11 +58,11 @@ Komponen tersebut saat ini berada pada **file komponen root,** yang bernama `App
 
 Bagaimana jika Anda ingin mengubah landing screen di masa depan dan memasukkan daftar buku sains disana? Atau meletakkan semua profil di tempat lain? Masuk akal untuk memindahkan `Gallery` dan `Profile` dari file komponen root. Ini akan membuat lebih modular dan dapat digunakan kembali di file lain. Anda dapat memindahkan sebuah komponen dengan tiga langkah:
 
-1. **Buat** sebuah file JS baru untuk memasukkan komponen.
+1. **Buat** sebuah *file* JS baru untuk memasukkan komponen.
 2. **Eksport** function component Anda dari file tersebut (menggunakan baik [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
 3. **Import** dimana Anda akan menggunakan komponen tersebut (menggunakan teknik yang sesuai untuk mengimport [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
 
-Di sini `Profile` dan `Gallery` sudah dipindahkan dari `App.js` kedalam file baru bernama `Gallery.js`. Sekarang Anda dapat mengubah `App.js` untuk mengimport `Gallery` dari `Gallery.js`:
+Di sini `Profile` dan `Gallery` sudah dipindahkan dari `App.js` kedalam *file* baru bernama `Gallery.js`. Sekarang Anda dapat mengubah `App.js` untuk mengimport `Gallery` dari `Gallery.js`:
 
 <Sandpack>
 
@@ -104,10 +104,10 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Perhatikan bagaimana pada contoh ini dipencah menjadi dua file komponen sekarang:
+Perhatikan bagaimana pada contoh ini dipencah menjadi dua *file* komponen sekarang:
 
 1. `Gallery.js`:
-     - Mendefinisikan `Profile` komponen yang hanya digunakan dalam file yang sama dan tidak dieksport.
+     - Mendefinisikan `Profile` komponen yang hanya digunakan dalam *file* yang sama dan tidak dieksport.
      - Mengeksport `Gallery` komponen sebagai **default export.**
 2. `App.js`:
      - Mengimport `Gallery` sebagai **default import** dari `Gallery.js`.

From 8b89543ce4e4577fe69219d21de30d51051188a7 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Thu, 27 Apr 2023 06:28:02 +0800
Subject: [PATCH 3/8] use italic for non Indonesian words

---
 .../importing-and-exporting-components.md     | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index c66932e8f..452def415 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -4,17 +4,17 @@ title: Mengimport dan Mengeksport Komponen
 
 <Intro>
 
-Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponan yang disusun dengan komponen lain. Namun, ketika Anda menyusun komponen-komponen yang semakin banyak, seringkali lebih masuk akal untuk mulai membaginya ke dalam file-file yang berbeda. Dengan ini Anda menjaga file Anda mudah untuk dipindai dan digunakan kembali di banyak tempat.
+Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponan yang disusun dengan komponen lain. Namun, ketika Anda menyusun komponen-komponen yang semakin banyak, seringkali lebih masuk akal untuk mulai membaginya ke dalam *file-file* yang berbeda. Dengan ini Anda menjaga *file* Anda mudah untuk dipindai dan digunakan kembali di banyak tempat.
 
 </Intro>
 
 <YouWillLearn>
 
-* Apa itu file komponen root
+* Apa itu *file* komponen root
 * Bagaimana cara import dan eksport komponen
 * Kapan menggunakan default dan named import dan eksport
-* Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu file
-* Bagaimana cara memisahkan komponen menjadi beberapa file
+* Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu *file*
+* Bagaimana cara memisahkan komponen menjadi beberapa *file*
 
 </YouWillLearn>
 
@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Komponen tersebut saat ini berada pada **file komponen root,** yang bernama `App.js` pada contoh ini. Pada [Create React App](https://create-react-app.dev/), aplikasi Anda berada di `src/App.js`. Tergantung pada persiapan Anda, komponen root Anda bisa saja berada di file lain. Jika Anda menggunakan framework dengan file-based routing, seperti Next.js, komponen root Anda akan berbeda di setiap halaman.
+Komponen tersebut saat ini berada pada **file komponen root,** yang bernama `App.js` pada contoh ini. Pada [Create React App](https://create-react-app.dev/), aplikasi Anda berada di `src/App.js`. Tergantung pada persiapan Anda, komponen root Anda bisa saja berada di *file* lain. Jika Anda menggunakan framework dengan *file-based routing*, seperti Next.js, komponen root Anda akan berbeda di setiap halaman.
 
 ## Mengeksport dan mengimport sebuah komponen {/*exporting-and-importing-a-component*/}
 
-Bagaimana jika Anda ingin mengubah landing screen di masa depan dan memasukkan daftar buku sains disana? Atau meletakkan semua profil di tempat lain? Masuk akal untuk memindahkan `Gallery` dan `Profile` dari file komponen root. Ini akan membuat lebih modular dan dapat digunakan kembali di file lain. Anda dapat memindahkan sebuah komponen dengan tiga langkah:
+Bagaimana jika Anda ingin mengubah *landing screen* di masa depan dan memasukkan daftar buku sains disana? Atau meletakkan semua profil di tempat lain? Masuk akal untuk memindahkan `Gallery` dan `Profile` dari *file* komponen root. Ini akan membuat lebih modular dan dapat digunakan kembali di *file* lain. Anda dapat memindahkan sebuah komponen dengan tiga langkah:
 
 1. **Buat** sebuah *file* JS baru untuk memasukkan komponen.
-2. **Eksport** function component Anda dari file tersebut (menggunakan baik [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
+2. **Eksport** function component Anda dari *file* tersebut (menggunakan baik [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
 3. **Import** dimana Anda akan menggunakan komponen tersebut (menggunakan teknik yang sesuai untuk mengimport [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
 
-Di sini `Profile` dan `Gallery` sudah dipindahkan dari `App.js` kedalam *file* baru bernama `Gallery.js`. Sekarang Anda dapat mengubah `App.js` untuk mengimport `Gallery` dari `Gallery.js`:
+Di sini `Profile` dan `Gallery` sudah dipindahkan dari `App.js` ke dalam *file* baru bernama `Gallery.js`. Sekarang Anda dapat mengubah `App.js` untuk mengimport `Gallery` dari `Gallery.js`:
 
 <Sandpack>
 
@@ -104,7 +104,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Perhatikan bagaimana pada contoh ini dipencah menjadi dua *file* komponen sekarang:
+Perhatikan bagaimana pada contoh ini dipecah menjadi dua *file* komponen sekarang:
 
 1. `Gallery.js`:
      - Mendefinisikan `Profile` komponen yang hanya digunakan dalam *file* yang sama dan tidak dieksport.
@@ -116,7 +116,7 @@ Perhatikan bagaimana pada contoh ini dipencah menjadi dua *file* komponen sekara
 
 <Note>
 
-Anda mungkin menemukan file yang meninggalkan ekstensi file `.js` seperti ini:
+Anda mungkin menemukan *file* yang meninggalkan ekstensi *file* `.js` seperti ini:
 
 ```js 
 import Gallery from './Gallery';
@@ -130,7 +130,7 @@ Salah satu `'./Gallery.js'` atau `'./Gallery'` akan jalan dengan React, meskipun
 
 #### Default vs named exports {/*default-vs-named-exports*/}
 
-Ada dua cara utama untuk mengeksport nilai dengan JavaScript: default exports dan named exports. Sejauh ini, contoh kita hanya menggunakan default exports. Tapi Anda dapat menggunakan satu atau keduanya pada file yang sama. **Sebuah file dapat menggunakan tidak lebih dari satu _default_ export, tapi dapat menggunakan _named_ exports sebanyak yang Anda suka.**
+Ada dua cara utama untuk mengeksport nilai dengan JavaScript: default exports dan named exports. Sejauh ini, contoh kita hanya menggunakan default exports. Tapi Anda dapat menggunakan satu atau keduanya pada *file* yang sama. **Sebuah file dapat menggunakan tidak lebih dari satu _default_ export, tapi dapat menggunakan _named_ exports sebanyak yang Anda suka.**
 
 ![Default dan named exports](/images/docs/illustrations/i_import-export.svg)
 
@@ -143,17 +143,17 @@ Bagaimana Anda mengeksport komponen Anda mendikte bagaimana Anda harus mengimpor
 
 Ketika Anda menulis _default_ import, Anda dapat memberi nama apa saja setelah `import`. Contoh, Anda dapat menulis `import Banana from './Button.js'` dan itu akan tetap memberi Anda export default yang sama. Sebaliknya, dengan named imports, nama harus sama di kedua sisi. Itulah mengapa disebut _named_ imports!
 
-**Orang-orang seringkali menggunakan default exports jika file yang dieksport hanya satu komponen, dan menggunakan named exports jika mengeksport beberapa komponen dan nilai.** Bagaimanapun gaya koding yang Anda gunakan, selalu beri nama yang berarti pada fungsi komponen Anda dan isi file tersebut. Komponen tanpa nama, seperti `export default () => {}`, tidak disarankan karena membuat proses debugging lebih sulit.
+**Orang-orang seringkali menggunakan default exports jika *file* yang dieksport hanya satu komponen, dan menggunakan named exports jika mengeksport beberapa komponen dan nilai.** Bagaimanapun gaya koding yang Anda gunakan, selalu beri nama yang berarti pada fungsi komponen Anda dan isi *file* tersebut. Komponen tanpa nama, seperti `export default () => {}`, tidak disarankan karena membuat proses debugging lebih sulit.
 
 </DeepDive>
 
 ## Mengeksport dan mengimport beberapa komponen dari file yang sama {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-Bagaimana jika Anda ingin menampilkan hanya satu `Profile` selain sebuah galeri? Anda dapat mengeksport komponen `Profile` juga. Tapi `Gallery.js` telah menggunakan *default* export, dan Anda tidak dapat memiliki _dua_ default exports. Anda dapat membuat file baru dengan default export, atau Anda dapat menambahkan sebuah *named* export untuk `Profile`. **Sebuah file hanya dapat memiliki satu default export, tapi dapat memiliki banyak named export!**
+Bagaimana jika Anda ingin menampilkan hanya satu `Profile` selain sebuah galeri? Anda dapat mengeksport komponen `Profile` juga. Tapi `Gallery.js` telah menggunakan *default* export, dan Anda tidak dapat memiliki _dua_ default exports. Anda dapat membuat *file* baru dengan default export, atau Anda dapat menambahkan sebuah *named* export untuk `Profile`. **Sebuah *file* hanya dapat memiliki satu default export, tapi dapat memiliki banyak named export!**
 
 <Note>
 
-Untuk menguragi potensi kebingunan antara default dan named exports, beberapa tim memilih untuk berpegang pada satu gaya penulisan (default atau named), atau menghindari mencampurnya dalam satu file. Lakukan yang terbaik untuk Anda!
+Untuk menguragi potensi kebingunan antara default dan named exports, beberapa tim memilih untuk berpegang pada satu gaya penulisan (default atau named), atau menghindari mencampurnya dalam satu *file*. Lakukan yang terbaik untuk Anda!
 
 </Note>
 
@@ -237,10 +237,10 @@ Sekarang Anda menggunakan campuran default dan named exports:
 
 Pada halaman ini Anda belajar:
 
-* Apa itu file komponen root
+* Apa itu *file* komponen root
 * Bagaimana cara import dan eksport komponen
 * Kapan menggunakan default dan named import dan eksport
-* Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu file
+* Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu *file*
 
 </Recap>
 

From e05eff04dc3053fbf93102ca7e3e0ea92b39d715 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:58:27 +0800
Subject: [PATCH 4/8] Apply suggestions from code review

- Use `impor/ekspor` instead of `import/eksport`
- Use `Ilmuwan` the standard one instead of `Ilmuan`
- Fix grammatical error

Co-authored-by: Irfan Maulana <mazipanneh@gmail.com>
---
 .../importing-and-exporting-components.md     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index 452def415..a453a0192 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -1,19 +1,19 @@
 ---
-title: Mengimport dan Mengeksport Komponen
+title: Mengimpor dan Mengekspor Komponen
 ---
 
 <Intro>
 
-Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponan yang disusun dengan komponen lain. Namun, ketika Anda menyusun komponen-komponen yang semakin banyak, seringkali lebih masuk akal untuk mulai membaginya ke dalam *file-file* yang berbeda. Dengan ini Anda menjaga *file* Anda mudah untuk dipindai dan digunakan kembali di banyak tempat.
+Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponan yang disusun dengan komponen lain. Namun, ketika Anda menyusun komponen-komponen yang semakin banyak, seringkali lebih masuk akal untuk mulai membaginya ke dalam *file-file* yang berbeda. Dengan ini Anda menjaga *file* Anda agar tetap mudah dipindai dan digunakan kembali di banyak tempat.
 
 </Intro>
 
 <YouWillLearn>
 
 * Apa itu *file* komponen root
-* Bagaimana cara import dan eksport komponen
-* Kapan menggunakan default dan named import dan eksport
-* Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu *file*
+* Bagaimana cara impor dan ekspor komponen
+* Kapan menggunakan default dan named impor dan ekspor
+* Bagaimana cara mengimpor dan mengekspor beberapa komponen pada satu *file*
 * Bagaimana cara memisahkan komponen menjadi beberapa *file*
 
 </YouWillLearn>
@@ -256,7 +256,7 @@ Pindahkan komponen `Profile` pada miliknya sendiri `Profile.js`, dan ubah kompon
 
 Anda mungkin menggukanan salah satu dari default atau named export untuk `Profile`, tetapi pastikan bahwa Anda menggunakan sintaksis import pada kedua `App.js` dan `Gallery.js`. Anda dapat merujuk pada table dari bagian deep dive di atas:
 
-| Sintaksis           | Pernyataan Export                           | Pernyataan Import                          |
+| Sintaksis           | Pernyataan Expor                           | Pernyataan Impor                          |
 | -----------      | -----------                                | -----------                               |
 | Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
 | Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
@@ -296,7 +296,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuan Hebat</h1>
+      <h1>Ilmuwan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -314,11 +314,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Setelah Anda berhasil menjalankan dengan salah satu eksport, buat juga berjalan dengan jenis yang lain.
+Setelah Anda berhasil menjalankan dengan salah satu ekspor, buat juga berjalan dengan jenis yang lain.
 
 <Solution>
 
-Ini adalah solusi menggunakan named exports:
+Ini adalah solusi menggunakan `named exports`:
 
 <Sandpack>
 
@@ -342,7 +342,7 @@ import { Profile } from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuan Hebat</h1>
+      <h1>Ilmuwan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -368,7 +368,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Ini adalah solusi menggunakan default exports:
+Ini adalah solusi menggunakan `default exports`:
 
 <Sandpack>
 
@@ -392,7 +392,7 @@ import Profile from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuan Hebat</h1>
+      <h1>Ilmuwan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />

From 9ce9643faa312738e85ffb1391fe64f6aaf19891 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Thu, 27 Apr 2023 09:34:06 +0800
Subject: [PATCH 5/8] use `impor/ekspor` instead of `import/eksport`

- fix some typo
---
 .../importing-and-exporting-components.md     | 76 +++++++++----------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index a453a0192..4845d0220 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -4,7 +4,7 @@ title: Mengimpor dan Mengekspor Komponen
 
 <Intro>
 
-Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponan yang disusun dengan komponen lain. Namun, ketika Anda menyusun komponen-komponen yang semakin banyak, seringkali lebih masuk akal untuk mulai membaginya ke dalam *file-file* yang berbeda. Dengan ini Anda menjaga *file* Anda agar tetap mudah dipindai dan digunakan kembali di banyak tempat.
+Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponen yang disusun dengan komponen lain. Namun, ketika Anda menyusun komponen-komponen yang semakin banyak, seringkali lebih masuk akal untuk mulai membaginya ke dalam *file-file* yang berbeda. Dengan ini Anda menjaga *file* Anda agar tetap mudah dipindai dan digunakan kembali di banyak tempat.
 
 </Intro>
 
@@ -37,7 +37,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuan Hebat</h1>
+      <h1>Ilmwuan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -54,15 +54,15 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 Komponen tersebut saat ini berada pada **file komponen root,** yang bernama `App.js` pada contoh ini. Pada [Create React App](https://create-react-app.dev/), aplikasi Anda berada di `src/App.js`. Tergantung pada persiapan Anda, komponen root Anda bisa saja berada di *file* lain. Jika Anda menggunakan framework dengan *file-based routing*, seperti Next.js, komponen root Anda akan berbeda di setiap halaman.
 
-## Mengeksport dan mengimport sebuah komponen {/*exporting-and-importing-a-component*/}
+## Mengekspor dan mengimpor sebuah komponen {/*exporting-and-importing-a-component*/}
 
 Bagaimana jika Anda ingin mengubah *landing screen* di masa depan dan memasukkan daftar buku sains disana? Atau meletakkan semua profil di tempat lain? Masuk akal untuk memindahkan `Gallery` dan `Profile` dari *file* komponen root. Ini akan membuat lebih modular dan dapat digunakan kembali di *file* lain. Anda dapat memindahkan sebuah komponen dengan tiga langkah:
 
 1. **Buat** sebuah *file* JS baru untuk memasukkan komponen.
-2. **Eksport** function component Anda dari *file* tersebut (menggunakan baik [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** dimana Anda akan menggunakan komponen tersebut (menggunakan teknik yang sesuai untuk mengimport [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+2. **Ekspor** function component Anda dari *file* tersebut (menggunakan baik [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) eskpor).
+3. **Impor** dimana Anda akan menggunakan komponen tersebut (menggunakan teknik yang sesuai untuk mengimpor [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) atau [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) ekspor).
 
-Di sini `Profile` dan `Gallery` sudah dipindahkan dari `App.js` ke dalam *file* baru bernama `Gallery.js`. Sekarang Anda dapat mengubah `App.js` untuk mengimport `Gallery` dari `Gallery.js`:
+Di sini `Profile` dan `Gallery` sudah dipindahkan dari `App.js` ke dalam *file* baru bernama `Gallery.js`. Sekarang Anda dapat mengubah `App.js` untuk mengimpor `Gallery` dari `Gallery.js`:
 
 <Sandpack>
 
@@ -89,7 +89,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuan Hebat</h1>
+      <h1>Ilmuwan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -107,11 +107,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 Perhatikan bagaimana pada contoh ini dipecah menjadi dua *file* komponen sekarang:
 
 1. `Gallery.js`:
-     - Mendefinisikan `Profile` komponen yang hanya digunakan dalam *file* yang sama dan tidak dieksport.
-     - Mengeksport `Gallery` komponen sebagai **default export.**
+     - Mendefinisikan `Profile` komponen yang hanya digunakan dalam *file* yang sama dan tidak diekspor.
+     - Mengekspor `Gallery` komponen sebagai **default export.**
 2. `App.js`:
-     - Mengimport `Gallery` sebagai **default import** dari `Gallery.js`.
-     - Mengeksport root `App` komponen sebagai **default export.**
+     - Mengimpor `Gallery` sebagai **default import** dari `Gallery.js`.
+     - Mengekspor root `App` komponen sebagai **default export.**
 
 
 <Note>
@@ -128,36 +128,36 @@ Salah satu `'./Gallery.js'` atau `'./Gallery'` akan jalan dengan React, meskipun
 
 <DeepDive>
 
-#### Default vs named exports {/*default-vs-named-exports*/}
+#### Default vs named ekspor {/*default-vs-named-exports*/}
 
-Ada dua cara utama untuk mengeksport nilai dengan JavaScript: default exports dan named exports. Sejauh ini, contoh kita hanya menggunakan default exports. Tapi Anda dapat menggunakan satu atau keduanya pada *file* yang sama. **Sebuah file dapat menggunakan tidak lebih dari satu _default_ export, tapi dapat menggunakan _named_ exports sebanyak yang Anda suka.**
+Ada dua cara utama untuk mengekspor nilai dengan JavaScript: `default exports` dan `named exports`. Sejauh ini, contoh kita hanya menggunakan `default exports`. Tapi Anda dapat menggunakan satu atau keduanya pada *file* yang sama. **Sebuah file dapat menggunakan tidak lebih dari satu _default_ export, tapi dapat menggunakan _named_ exports sebanyak yang Anda suka.**
 
-![Default dan named exports](/images/docs/illustrations/i_import-export.svg)
+![Default dan named ekspor](/images/docs/illustrations/i_import-export.svg)
 
-Bagaimana Anda mengeksport komponen Anda mendikte bagaimana Anda harus mengimportnya. Anda akan mendapatkan error jika Anda mencoba untuk mengimport default export dengan cara yang sama Anda menggunakan named export! Tabel ini akan membantu Anda untuk melacak:
+Bagaimana Anda mengekspor komponen Anda mendikte bagaimana Anda harus mengimpornya. Anda akan mendapatkan error jika Anda mencoba untuk mengimpor `default exports` dengan cara yang sama Anda menggunakan `named exports`! Tabel ini akan membantu Anda untuk melacak:
 
-| Sintaksis           | Pernyataan Export                           | Pernyataan Import                          |
+| Sintaksis           | Pernyataan Expor                           | Pernyataan Impor                          |
 | -----------      | -----------                                | -----------                               |
 | Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
 | Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
-Ketika Anda menulis _default_ import, Anda dapat memberi nama apa saja setelah `import`. Contoh, Anda dapat menulis `import Banana from './Button.js'` dan itu akan tetap memberi Anda export default yang sama. Sebaliknya, dengan named imports, nama harus sama di kedua sisi. Itulah mengapa disebut _named_ imports!
+Ketika Anda menulis `_default_ imports`, Anda dapat memberi nama apa saja setelah `import`. Contoh, Anda dapat menulis `import Banana from './Button.js'` dan itu akan tetap memberi Anda `export default` yang sama. Sebaliknya, dengan `named imports`, nama harus sama di kedua sisi. Itulah mengapa disebut `_named_ imports`!
 
-**Orang-orang seringkali menggunakan default exports jika *file* yang dieksport hanya satu komponen, dan menggunakan named exports jika mengeksport beberapa komponen dan nilai.** Bagaimanapun gaya koding yang Anda gunakan, selalu beri nama yang berarti pada fungsi komponen Anda dan isi *file* tersebut. Komponen tanpa nama, seperti `export default () => {}`, tidak disarankan karena membuat proses debugging lebih sulit.
+**Orang-orang seringkali menggunakan `default exports` jika *file* yang diekspor hanya satu komponen, dan menggunakan `named exports` jika mengekspor beberapa komponen dan nilai.** Bagaimanapun gaya koding yang Anda gunakan, selalu beri nama yang berarti pada fungsi komponen Anda dan isi *file* tersebut. Komponen tanpa nama, seperti `export default () => {}`, tidak disarankan karena membuat proses debug lebih sulit.
 
 </DeepDive>
 
-## Mengeksport dan mengimport beberapa komponen dari file yang sama {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## Mengekspor dan mengimpor beberapa komponen dari file yang sama {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-Bagaimana jika Anda ingin menampilkan hanya satu `Profile` selain sebuah galeri? Anda dapat mengeksport komponen `Profile` juga. Tapi `Gallery.js` telah menggunakan *default* export, dan Anda tidak dapat memiliki _dua_ default exports. Anda dapat membuat *file* baru dengan default export, atau Anda dapat menambahkan sebuah *named* export untuk `Profile`. **Sebuah *file* hanya dapat memiliki satu default export, tapi dapat memiliki banyak named export!**
+Bagaimana jika Anda ingin menampilkan hanya satu `Profile` selain sebuah galeri? Anda dapat mengekspor komponen `Profile` juga. Tapi `Gallery.js` telah menggunakan `*default* exports`, dan Anda tidak dapat memiliki _dua_ `default exports`. Anda dapat membuat *file* baru dengan `default exports`, atau Anda dapat menambahkan sebuah `*named* exports` untuk `Profile`. **Sebuah *file* hanya dapat memiliki satu `default exports`, tapi dapat memiliki banyak `named exports`!**
 
 <Note>
 
-Untuk menguragi potensi kebingunan antara default dan named exports, beberapa tim memilih untuk berpegang pada satu gaya penulisan (default atau named), atau menghindari mencampurnya dalam satu *file*. Lakukan yang terbaik untuk Anda!
+Untuk mengurangi potensi kebingunan antara `default` dan `named exports`, beberapa tim memilih untuk berpegang pada satu gaya penulisan (`default` atau `named`), atau menghindari mencampurnya dalam satu *file*. Lakukan yang terbaik untuk Anda!
 
 </Note>
 
-Pertama, **eksport** `Profile` dari `Gallery.js` menggunakan named export (tanpa kata kunci `default`):
+Pertama, **ekspor** `Profile` dari `Gallery.js` menggunakan `named exports` (tanpa kata kunci `default`):
 
 ```js
 export function Profile() {
@@ -165,13 +165,13 @@ export function Profile() {
 }
 ```
 
-Selanjutnya, **import** `Profile` dari `Gallery.js` ke `App.js` menggunakan named import (dengan kurung kurawal):
+Selanjutnya, **impor** `Profile` dari `Gallery.js` ke `App.js` menggunakan `named imports` (dengan kurung kurawal):
 
 ```js
 import { Profile } from './Gallery.js';
 ```
 
-Akirnya, **render** `<Profile />` dari komponen `App`:
+Akhirnya, **render** `<Profile />` dari komponen `App`:
 
 ```js
 export default function App() {
@@ -179,7 +179,7 @@ export default function App() {
 }
 ```
 
-Sekarang `Gallery.js` berisi dua eksport: default `Gallery` export, dan named `Profile` export. `App.js` mengimport keduanya.
+Sekarang `Gallery.js` berisi dua ekspor: `default exports` `Gallery`, dan `named exports` `Profile`. `App.js` mengimpor keduanya.
 Coba mengedit `<Profile />` ke `<Gallery />` dan kembali pada contoh ini:
 
 <Sandpack>
@@ -208,7 +208,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuan Hebat</h1>
+      <h1>Ilmuwan Hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -223,24 +223,24 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Sekarang Anda menggunakan campuran default dan named exports:
+Sekarang Anda menggunakan campuran `default` dan `named exports`:
 
 * `Gallery.js`:
-  - Mengeksport komponen `Profile` sebagai **named export bernama `Profile`.**
-  - Mengeksport komponen `Gallery` sebagai **default export.**
+  - Mengekspor komponen `Profile` sebagai **named exports bernama `Profile`.**
+  - Mengekspor komponen `Gallery` sebagai **default exports.**
 * `App.js`:
-  - Mengimport `Profile` as a **named import called `Profile`** dari `Gallery.js`.
-  - Mengimport `Gallery` as a **default import** dari `Gallery.js`.
-  - Mengeksport komponen root `App` sebagai **default export.**
+  - Mengimpor `Profile` as a **named imports called `Profile`** dari `Gallery.js`.
+  - Mengimpor `Gallery` as a **default imports** dari `Gallery.js`.
+  - Mengekspor komponen root `App` sebagai **default exports.**
 
 <Recap>
 
 Pada halaman ini Anda belajar:
 
 * Apa itu *file* komponen root
-* Bagaimana cara import dan eksport komponen
-* Kapan menggunakan default dan named import dan eksport
-* Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu *file*
+* Bagaimana cara impor dan ekspor komponen
+* Kapan menggunakan `default` dan `named` impor dan ekspor
+* Bagaimana cara mengimpor dan mengekspor beberapa komponen pada satu *file*
 
 </Recap>
 
@@ -250,11 +250,11 @@ Pada halaman ini Anda belajar:
 
 #### Memisahkan komponen lebih jauh {/*split-the-components-further*/}
 
-Saat ini, `Gallery.js` mengeksport kedua `Profile` dan `Gallery`, yang mana sedikit membingungkan.
+Saat ini, `Gallery.js` mengekspor kedua `Profile` dan `Gallery`, yang mana sedikit membingungkan.
 
 Pindahkan komponen `Profile` pada miliknya sendiri `Profile.js`, dan ubah komponen `App` untuk merender kedua `<Profile />` dan `<Gallery />` satu setelah lainnya.
 
-Anda mungkin menggukanan salah satu dari default atau named export untuk `Profile`, tetapi pastikan bahwa Anda menggunakan sintaksis import pada kedua `App.js` dan `Gallery.js`. Anda dapat merujuk pada table dari bagian deep dive di atas:
+Anda mungkin menggukanan salah satu dari `default` atau `named` eskpor untuk `Profile`, tetapi pastikan bahwa Anda menggunakan sintaksis impor pada kedua `App.js` dan `Gallery.js`. Anda dapat merujuk pada table dari bagian `deep dive` di atas:
 
 | Sintaksis           | Pernyataan Expor                           | Pernyataan Impor                          |
 | -----------      | -----------                                | -----------                               |
@@ -263,7 +263,7 @@ Anda mungkin menggukanan salah satu dari default atau named export untuk `Profil
 
 <Hint>
 
-Jangan lupa untuk mengimport komponen Anda di mana mereka dipanggil. Bukankah `Gallery` juga menggunakan `Profile`?
+Jangan lupa untuk mengimpor komponen Anda di mana mereka dipanggil. Bukankah `Gallery` juga menggunakan `Profile`?
 
 </Hint>
 

From cbeec89231c432e8a1e2c73c7e100dbb1b79d620 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Thu, 27 Apr 2023 10:01:54 +0800
Subject: [PATCH 6/8] fix formatting

---
 .../importing-and-exporting-components.md     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index 4845d0220..3668c6356 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -130,18 +130,18 @@ Salah satu `'./Gallery.js'` atau `'./Gallery'` akan jalan dengan React, meskipun
 
 #### Default vs named ekspor {/*default-vs-named-exports*/}
 
-Ada dua cara utama untuk mengekspor nilai dengan JavaScript: `default exports` dan `named exports`. Sejauh ini, contoh kita hanya menggunakan `default exports`. Tapi Anda dapat menggunakan satu atau keduanya pada *file* yang sama. **Sebuah file dapat menggunakan tidak lebih dari satu _default_ export, tapi dapat menggunakan _named_ exports sebanyak yang Anda suka.**
+Ada dua cara utama untuk mengekspor nilai dengan JavaScript: **default exports** dan **named exports**. Sejauh ini, contoh kita hanya menggunakan **default exports**. Tapi Anda dapat menggunakan satu atau keduanya pada *file* yang sama. **Sebuah file dapat menggunakan tidak lebih dari satu _default_ export, tapi dapat menggunakan _named_ exports sebanyak yang Anda suka.**
 
 ![Default dan named ekspor](/images/docs/illustrations/i_import-export.svg)
 
-Bagaimana Anda mengekspor komponen Anda mendikte bagaimana Anda harus mengimpornya. Anda akan mendapatkan error jika Anda mencoba untuk mengimpor `default exports` dengan cara yang sama Anda menggunakan `named exports`! Tabel ini akan membantu Anda untuk melacak:
+Bagaimana Anda mengekspor komponen Anda mendikte bagaimana Anda harus mengimpornya. Anda akan mendapatkan error jika Anda mencoba untuk mengimpor **default exports** dengan cara yang sama Anda menggunakan **named exports**! Tabel ini akan membantu Anda untuk melacak:
 
 | Sintaksis           | Pernyataan Expor                           | Pernyataan Impor                          |
 | -----------      | -----------                                | -----------                               |
 | Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
 | Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
-Ketika Anda menulis `_default_ imports`, Anda dapat memberi nama apa saja setelah `import`. Contoh, Anda dapat menulis `import Banana from './Button.js'` dan itu akan tetap memberi Anda `export default` yang sama. Sebaliknya, dengan `named imports`, nama harus sama di kedua sisi. Itulah mengapa disebut `_named_ imports`!
+Ketika Anda menulis **default imports**, Anda dapat memberi nama apa saja setelah `import`. Contoh, Anda dapat menulis `import Banana from './Button.js'` dan itu akan tetap memberi Anda `export default` yang sama. Sebaliknya, dengan **named imports**, nama harus sama di kedua sisi. Itulah mengapa disebut **named imports**!
 
 **Orang-orang seringkali menggunakan `default exports` jika *file* yang diekspor hanya satu komponen, dan menggunakan `named exports` jika mengekspor beberapa komponen dan nilai.** Bagaimanapun gaya koding yang Anda gunakan, selalu beri nama yang berarti pada fungsi komponen Anda dan isi *file* tersebut. Komponen tanpa nama, seperti `export default () => {}`, tidak disarankan karena membuat proses debug lebih sulit.
 
@@ -149,15 +149,15 @@ Ketika Anda menulis `_default_ imports`, Anda dapat memberi nama apa saja setela
 
 ## Mengekspor dan mengimpor beberapa komponen dari file yang sama {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-Bagaimana jika Anda ingin menampilkan hanya satu `Profile` selain sebuah galeri? Anda dapat mengekspor komponen `Profile` juga. Tapi `Gallery.js` telah menggunakan `*default* exports`, dan Anda tidak dapat memiliki _dua_ `default exports`. Anda dapat membuat *file* baru dengan `default exports`, atau Anda dapat menambahkan sebuah `*named* exports` untuk `Profile`. **Sebuah *file* hanya dapat memiliki satu `default exports`, tapi dapat memiliki banyak `named exports`!**
+Bagaimana jika Anda ingin menampilkan hanya satu `Profile` selain sebuah galeri? Anda dapat mengekspor komponen `Profile` juga. Tapi `Gallery.js` telah menggunakan **default exports**, dan Anda tidak dapat memiliki _dua_ **default exports**. Anda dapat membuat *file* baru dengan **default exports**, atau Anda dapat menambahkan sebuah **named exports** untuk `Profile`. **Sebuah *file* hanya dapat memiliki satu `default exports`, tapi dapat memiliki banyak `named exports`!**
 
 <Note>
 
-Untuk mengurangi potensi kebingunan antara `default` dan `named exports`, beberapa tim memilih untuk berpegang pada satu gaya penulisan (`default` atau `named`), atau menghindari mencampurnya dalam satu *file*. Lakukan yang terbaik untuk Anda!
+Untuk mengurangi potensi kebingunan antara **default** dan **named exports**, beberapa tim memilih untuk berpegang pada satu gaya penulisan (**default** atau **named**), atau menghindari mencampurnya dalam satu *file*. Lakukan yang terbaik untuk Anda!
 
 </Note>
 
-Pertama, **ekspor** `Profile` dari `Gallery.js` menggunakan `named exports` (tanpa kata kunci `default`):
+Pertama, **ekspor** `Profile` dari `Gallery.js` menggunakan **named exports** (tanpa kata kunci **default**):
 
 ```js
 export function Profile() {
@@ -165,7 +165,7 @@ export function Profile() {
 }
 ```
 
-Selanjutnya, **impor** `Profile` dari `Gallery.js` ke `App.js` menggunakan `named imports` (dengan kurung kurawal):
+Selanjutnya, **impor** `Profile` dari `Gallery.js` ke `App.js` menggunakan **named imports** (dengan kurung kurawal):
 
 ```js
 import { Profile } from './Gallery.js';
@@ -179,7 +179,7 @@ export default function App() {
 }
 ```
 
-Sekarang `Gallery.js` berisi dua ekspor: `default exports` `Gallery`, dan `named exports` `Profile`. `App.js` mengimpor keduanya.
+Sekarang `Gallery.js` berisi dua ekspor: **default exports** `Gallery`, dan **named exports** `Profile`. `App.js` mengimpor keduanya.
 Coba mengedit `<Profile />` ke `<Gallery />` dan kembali pada contoh ini:
 
 <Sandpack>
@@ -223,7 +223,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Sekarang Anda menggunakan campuran `default` dan `named exports`:
+Sekarang Anda menggunakan campuran **default** dan **named exports**:
 
 * `Gallery.js`:
   - Mengekspor komponen `Profile` sebagai **named exports bernama `Profile`.**
@@ -239,7 +239,7 @@ Pada halaman ini Anda belajar:
 
 * Apa itu *file* komponen root
 * Bagaimana cara impor dan ekspor komponen
-* Kapan menggunakan `default` dan `named` impor dan ekspor
+* Kapan menggunakan **default** dan **named** impor dan ekspor
 * Bagaimana cara mengimpor dan mengekspor beberapa komponen pada satu *file*
 
 </Recap>
@@ -254,7 +254,7 @@ Saat ini, `Gallery.js` mengekspor kedua `Profile` dan `Gallery`, yang mana sedik
 
 Pindahkan komponen `Profile` pada miliknya sendiri `Profile.js`, dan ubah komponen `App` untuk merender kedua `<Profile />` dan `<Gallery />` satu setelah lainnya.
 
-Anda mungkin menggukanan salah satu dari `default` atau `named` eskpor untuk `Profile`, tetapi pastikan bahwa Anda menggunakan sintaksis impor pada kedua `App.js` dan `Gallery.js`. Anda dapat merujuk pada table dari bagian `deep dive` di atas:
+Anda mungkin menggukanan salah satu dari **default** atau **named** eskpor untuk `Profile`, tetapi pastikan bahwa Anda menggunakan sintaksis impor pada kedua `App.js` dan `Gallery.js`. Anda dapat merujuk pada table dari bagian **deep dive** di atas:
 
 | Sintaksis           | Pernyataan Expor                           | Pernyataan Impor                          |
 | -----------      | -----------                                | -----------                               |

From f9c01c1f01b5a5b4d71e3a0d13833d9dbceea192 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Fri, 28 Apr 2023 09:14:07 +0800
Subject: [PATCH 7/8] Update
 src/content/learn/importing-and-exporting-components.md

Co-authored-by: M Haidar Hanif <git@mhaidarhanif.com>
---
 src/content/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index 3668c6356..38cf44e10 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -283,7 +283,7 @@ export default function App() {
 ```
 
 ```js Gallery.js active
-// Pindahkan aku ke Profile.js!
+// Pindahkan saya ke Profile.js!
 export function Profile() {
   return (
     <img

From 626bc79f88f8929eee1889eb147bab845d4f7728 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Fri, 28 Apr 2023 09:15:28 +0800
Subject: [PATCH 8/8] fix grammar for code example

---
 .../learn/importing-and-exporting-components.md      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index 38cf44e10..6366ac579 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -37,7 +37,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmwuan Hebat</h1>
+      <h1>Para ilmuwan hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -89,7 +89,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuwan Hebat</h1>
+      <h1>Para ilmuwan hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -208,7 +208,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuwan Hebat</h1>
+      <h1>Para ilmuwan hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -296,7 +296,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuwan Hebat</h1>
+      <h1>Para ilmuwan hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -342,7 +342,7 @@ import { Profile } from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuwan Hebat</h1>
+      <h1>Para ilmuwan hebat</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -392,7 +392,7 @@ import Profile from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Ilmuwan Hebat</h1>
+      <h1>Para ilmuwan hebat</h1>
       <Profile />
       <Profile />
       <Profile />