`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+Pada CSS, properti berbeda seperti `color` dan `background-color` tidak akan menimpa satu sama lain. Anda dapat mengatur semua `color` `
` ke merah tanpa berdampak pada `background-color`. Demikian pula, **React contexts yang berbeda tidak akan menimpa satu sama lain.** Tiap *context* yang Anda buat dengan `createContext()` benar-benar terpisah dari yang lain, dan menyatukan komponen-komponen yang menggunakan dan menyediakan context *tertentu*. Satu komponen dapat menggunakan atau menyediakan banyak konteks yang berbeda tanpa masalah.
-## Before you use context {/*before-you-use-context*/}
+## Sebelum Anda menggunakan *context* {/*before-you-use-context*/}
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+*Context* sangat menggoda untuk digunakan! Namun, ini juga terlalu mudah untuk menggunakannya secara berlebihan. **Hanya karena Anda membutuhkan untuk mengoper beberapa _props_ beberapa tingkat lebih dalam bukan berarti Anda memasukkan informasi tersebut ke dalam _context_.**
-Here's a few alternatives you should consider before using context:
+Ini adalah beberapa alternatif yang harus Anda pertimbangkan sebelum menggunakan *context*:
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+1. **Mulai dengan [mengoper *props*.](/learn/passing-props-to-a-component)** Jika komponen Anda tidak sepele, bukan hal yang aneh jika Anda mengoper selusin *props* melalui selusin komponen. Ini mungkin terasa seperti pekerjaan berat, tapi membuatnya sangat jelas komponen yang mana menggunakan data yang mana! Orang yang mengelola kode Anda akan senang Anda telah membuat aliran data eksplisit dengan *props*.
+2. **Ekstrak komponen dan [oper JSX sebagai `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) ke mereka.** Jika Anda mengoper beberapa data melewati banyak lapisan komponen perantara yang tidak menggunakan data tersebut (dan hanya mengopernya lebih jauh ke bawah), ini sering kali Anda lupa mengekstrak beberapa komponen di sepanjang jalan. Contohnya, mungkin Anda mengoper data *props* seperti `posts` ke komponen visual yang tidak menggunakannya secara langsung, seperti `
`. Sebagai gantinya, buat `Layout` mengambil `children` sebagai *prop*, dan berikan `
`. Hal ini mengurangi jumlah lapisan antara komponen yang menentukan data dan komponen yang membutuhkannya.
-If neither of these approaches works well for you, consider context.
+Jika tidak satu pun dari pendekatan ini yang cocok untuk Anda, pertimbangkan *context*.
-## Use cases for context {/*use-cases-for-context*/}
+## Kasus penggunakan untuk *context* {/*use-cases-for-context*/}
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
+* **Tema:** Jika aplikasi Anda memungkinkan pengguna mengganti penampilannya (misalnya mode gelap), Anda dapat menempatkan penyedia *context* di paling atas aplikasi Anda, dan menggunakan konteksnya di komponen yang membutuhkan untuk menyesuaikan tampilan visual mereka.
+* **Akun saat ini:** Banyak komponen yang mungkin perlu mengetahui pengguna yang sedang masuk. Menempatkannya dalam konteks akan memudahkan untuk membacanya di mana saja di dalam pohon (*tree*). Beberapa aplikasi memungkinkan Anda mengoperasikan beberapa akun pada saat yang sama (misalnya untuk memberikan komentar sebagai pengguna yang berbeda). Dalam kasus tersebut, akan lebih mudah untuk membungkus bagian dari UI ke dalam penyedia bersarang dengan nilai akun saat ini yang berbeda.
+* **Routing:** Sebagian besar solusi *routing* menggunakan *context* secara internal untuk menyimpan rute saat ini. Dengan cara inilah setiap link "mengetahui" apakah ia aktif atau tidak. Jika Anda membuat *router* anda sendiri, Anda mungkin ingin melakukannya juga.
+* **Mengelola _state_:** Seiring pertumbuhan aplikasi Anda, Anda mungkin akan menempatkan banyak *state* yang lebih dekat ke bagian atas aplikasi Anda. Banyak komponen yang jauh di bawahnya mungkin ingin untuk mengubahnya. Ini adalah hal yang umum untuk [menggunakan reducer bersama dengan *context*](/learn/scaling-up-with-reducer-and-context) untuk mengelola *state* yang kompleks dan mengopernya ke komponen yang jauh ke bawah tanpa terlalu banyak kerumitan.
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+*Context* tidak terbatas pada nilai statis. Jika anda memberikan nilai yang berbeda pada render berikutnya, React akan memperbarui semua komponen yang membacanya di bawahnya! Inilah sebabnya mengapa *context* sering digunakan bersama degan *state*.
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+Pada umumnya, jika beberapa informasi dibutuhkan oleh komponen yang jauh di beberapa bagian pohon (*tree*), ini adalah indikasi yang bagus bahwa *context* akan membantu Anda.
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
- 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
- 3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+* *Context* memungkinkan komponen menyediakan beberapa informasi ke keseluruhan pohon (*tree*) di bawahnya.
+* Untuk mengoper *context*:
+ 1. Buat dan ekspor ia dengan `export const MyContext = createContext(defaultValue)`.
+ 2. Oper ke `useContext(MyContext)` *Hook* untuk membacanya di komponen anak manapun, tidak peduli seberapa dalam.
+ 3. Bungkus anak ke `` untuk menyediakannya dari induk.
+* *Context* melewati komponen apa pun di tengahnya.
+* *Context* memungkinkan Anda menulis komponen yang "beradaptasi dengan sekitar mereke".
+* Sebelum Anda menggunakan *context*, coba oper *props* atau oper JSX sebagai `children`.
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### Ganti *prop drilling* dengan *context* {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+Pada contoh ini, mengganti checkbox akan mengubah `imageSize` *prop* yang diteruskan ke setiap ``. checkbox *state* akan disimpan di komponen paling atas komponen `App`, tapi tiap `` harus menyadarinya.
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+Saat ini, `App` mengoper `imageSize` ke `List`, yang mana mengopernya ke tiap `Place`, yang mana mengopernya ke tiap `PlaceImage`. Hapus *prop* `imageSize`, dan sebagai gantinya oper ia dari komponen `App` ke `PlaceImage` secara langsung.
-You can declare context in `Context.js`.
+Anda dapat deklarasi *context* di `Context.js`.
@@ -905,7 +905,7 @@ export default function App() {
setIsLarge(e.target.checked);
}}
/>
- Use large images
+ Menggunakan gambar besar
@@ -959,38 +959,38 @@ function PlaceImage({ place, imageSize }) {
```js data.js
export const places = [{
id: 0,
- name: 'Bo-Kaap in Cape Town, South Africa',
- description: 'The tradition of choosing bright colors for houses began in the late 20th century.',
+ name: 'Bo-Kaap di Cape Town, Afrika Selatan',
+ description: 'Tradisi memilih warna-warna cerah untuk rumah dimulai pada akhir abad ke-20.',
imageId: 'K9HVAGH'
}, {
id: 1,
- name: 'Rainbow Village in Taichung, Taiwan',
- description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.',
+ name: 'Desa Pelangi di Taichung, Taiwan',
+ description: 'Untuk menyelamatkan rumah-rumah tersebut dari pembongkaran, Huang Yung-Fu, seorang penduduk setempat, mengecat 1.200 rumah tersebut pada tahun 1924.',
imageId: '9EAYZrt'
}, {
id: 2,
- name: 'Macromural de Pachuca, Mexico',
- description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
+ name: 'Macromural de Pachuca, Meksiko',
+ description: 'Salah satu mural terbesar di dunia yang menutupi rumah-rumah di lingkungan lereng bukit.',
imageId: 'DgXHVwu'
}, {
id: 3,
- name: 'Selarón Staircase in Rio de Janeiro, Brazil',
- description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people."',
+ name: 'Selarón Staircase di Rio de Janeiro, Brasil',
+ description: 'Tengara ini diciptakan oleh Jorge Selarón, seorang seniman kelahiran Chili, sebagai "penghormatan kepada rakyat Brasil."',
imageId: 'aeO3rpI'
}, {
id: 4,
name: 'Burano, Italy',
- description: 'The houses are painted following a specific color system dating back to 16th century.',
+ description: 'Rumah-rumahnya dicat mengikuti sistem warna tertentu yang berasal dari abad ke-16.',
imageId: 'kxsph5C'
}, {
id: 5,
- name: 'Chefchaouen, Marocco',
- description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+ name: 'Chefchaouen, Maroko',
+ description: 'Ada beberapa teori mengapa rumah-rumah dicat biru, termasuk bahwa warna tersebut dapat mengusir nyamuk atau melambangkan langit dan surga.',
imageId: 'rTqKo46'
}, {
id: 6,
- name: 'Gamcheon Culture Village in Busan, South Korea',
- description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.',
+ name: 'Desa Budaya Gamcheon di Busan, Korea Selatan',
+ description: 'Pada tahun 2009, desa ini diubah menjadi pusat budaya dengan mengecat rumah-rumah dan menampilkan pameran dan instalasi seni.',
imageId: 'ZfQOOzf'
}];
```
@@ -1020,9 +1020,9 @@ li {
-Remove `imageSize` prop from all the components.
+Hapus prop `imageSize` dari semua komponen.
-Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+Buat dan ekspor `ImageSizeContext` dari `Context.js`. Lalu bungkus List ke `` untuk mengoper nilai ke bawah, dan `useContext(ImageSizeContext)` untuk membacanya di `PlaceImage`:
@@ -1047,7 +1047,7 @@ export default function App() {
setIsLarge(e.target.checked);
}}
/>
- Use large images
+ Menggunakan gambar besar
@@ -1098,38 +1098,38 @@ export const ImageSizeContext = createContext(500);
```js data.js
export const places = [{
id: 0,
- name: 'Bo-Kaap in Cape Town, South Africa',
- description: 'The tradition of choosing bright colors for houses began in the late 20th century.',
+ name: 'Bo-Kaap di Cape Town, Afrika Selatan',
+ description: 'Tradisi memilih warna-warna cerah untuk rumah dimulai pada akhir abad ke-20.',
imageId: 'K9HVAGH'
}, {
id: 1,
- name: 'Rainbow Village in Taichung, Taiwan',
- description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.',
+ name: 'Desa Pelangi di Taichung, Taiwan',
+ description: 'Untuk menyelamatkan rumah-rumah tersebut dari pembongkaran, Huang Yung-Fu, seorang penduduk setempat, mengecat 1.200 rumah tersebut pada tahun 1924.',
imageId: '9EAYZrt'
}, {
id: 2,
- name: 'Macromural de Pachuca, Mexico',
- description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
+ name: 'Macromural de Pachuca, Meksiko',
+ description: 'Salah satu mural terbesar di dunia yang menutupi rumah-rumah di lingkungan lereng bukit.',
imageId: 'DgXHVwu'
}, {
id: 3,
- name: 'Selarón Staircase in Rio de Janeiro, Brazil',
- description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people".',
+ name: 'Selarón Staircase di Rio de Janeiro, Brasil',
+ description: 'Tengara ini diciptakan oleh Jorge Selarón, seorang seniman kelahiran Chili, sebagai "penghormatan kepada rakyat Brasil."',
imageId: 'aeO3rpI'
}, {
id: 4,
name: 'Burano, Italy',
- description: 'The houses are painted following a specific color system dating back to 16th century.',
+ description: 'Rumah-rumahnya dicat mengikuti sistem warna tertentu yang berasal dari abad ke-16.',
imageId: 'kxsph5C'
}, {
id: 5,
- name: 'Chefchaouen, Marocco',
- description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+ name: 'Chefchaouen, Maroko',
+ description: 'Ada beberapa teori mengapa rumah-rumah dicat biru, termasuk bahwa warna tersebut dapat mengusir nyamuk atau melambangkan langit dan surga.',
imageId: 'rTqKo46'
}, {
id: 6,
- name: 'Gamcheon Culture Village in Busan, South Korea',
- description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.',
+ name: 'Desa Budaya Gamcheon di Busan, Korea Selatan',
+ description: 'Pada tahun 2009, desa ini diubah menjadi pusat budaya dengan mengecat rumah-rumah dan menampilkan pameran dan instalasi seni.',
imageId: 'ZfQOOzf'
}];
```
@@ -1157,7 +1157,7 @@ li {
-Note how components in the middle don't need to pass `imageSize` anymore.
+Perhatikan bagaimana komponen di tengah tidak perlu lagi mengoper `imageSize`.