resolve merge conflicts: 1st pass

src/components/DocsFooter.tsx

@@ -75,13 +75,8 @@ function FooterLink({
         }
       )}>
       <IconNavArrow
-<<<<<<< HEAD
-        className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
-        displayDirection={type === 'Sebelumnya' ? 'start' : 'end'}
-=======
         className="inline text-tertiary dark:text-tertiary-dark group-focus:text-link dark:group-focus:text-link-dark"
-        displayDirection={type === 'Previous' ? 'start' : 'end'}
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
+        displayDirection={type === 'Sebelumnya' ? 'start' : 'end'}
       />
       <div className="flex flex-col overflow-hidden">
         <span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">

src/components/Layout/Feedback.tsx

@@ -61,31 +61,20 @@ function sendGAEvent(isPositive: boolean) {
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   return (
-<<<<<<< HEAD
-    <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
-      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg me-4">
-        {isSubmitted
-          ? 'Terima kasih atas masukannya!'
-          : 'Apakah halaman ini berguna bagi Anda?'}
-      </p>
-      {!isSubmitted && (
-        <button
-          aria-label="Ya"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 me-2"
-=======
     <div
       className={cn(
         'max-w-custom-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex',
         {exit: isSubmitted}
       )}>
       <p className="w-full text-lg font-bold text-primary dark:text-primary-dark me-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted
+          ? 'Terima kasih atas masukannya!'
+          : 'Apakah halaman ini berguna bagi Anda?'}
       </p>
       {!isSubmitted && (
         <button
-          aria-label="Yes"
+          aria-label="Ya"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark me-2"
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();
@@ -96,13 +85,8 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
       )}
       {!isSubmitted && (
         <button
-<<<<<<< HEAD
           aria-label="Tidak"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3"
-=======
-          aria-label="No"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark"
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();

src/components/Layout/Page.tsx

@@ -159,15 +159,9 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
                   }
                   {showSurvey && (
                     <>
-<<<<<<< HEAD
-                      <div className="flex flex-col items-center m-4 p-4">
-                        <p className="font-bold text-primary dark:text-primary-dark text-lg mb-4">
-                          Seberapa suka Anda dengan dokumentasi ini?
-=======
                       <div className="flex flex-col items-center p-4 m-4">
                         <p className="mb-4 text-lg font-bold text-primary dark:text-primary-dark">
-                          How do you like these docs?
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
+                          Seberapa suka Anda dengan dokumentasi ini?
                         </p>
                         <div>
                           <ButtonLink

src/components/Layout/TopNav/TopNav.tsx

@@ -333,13 +333,8 @@ export default function TopNav({
                     href="https://github.com/facebook/react/releases"
                     target="_blank"
                     rel="noreferrer noopener"
-<<<<<<< HEAD
                     aria-label="Buka di GitHub"
-                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
-=======
-                    aria-label="Open on GitHub"
                     className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
                     {githubIcon}
                   </Link>
                 </div>

src/components/SocialBanner.tsx

@@ -7,15 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-<<<<<<< HEAD
-const bannerText = 'Dukung Ukraina 🇺🇦';
-const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Donasikan Bantuan Kemanusiaan ke Ukraina';
-=======
-const bannerText = 'Join us for React Conf on May 15-16.';
+const bannerText = 'Bergabung di React Conf tanggal 15-16 Mei.';
 const bannerLink = 'https://conf.react.dev/';
-const bannerLinkText = 'Learn more.';
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
+const bannerLinkText = 'Info lebih lanjut.';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);

src/content/learn/choosing-the-state-structure.md

@@ -554,13 +554,7 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-<<<<<<< HEAD
-(Sebagai alternatif, Anda dapat menyimpan indeks yang dipilih di dalam *state*.)
-
 *State* sebelumnya diduplikasi seperti ini:
-=======
-The state used to be duplicated like this:
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`
 * `selectedItem = {id: 0, title: 'pretzels'}`

src/content/learn/conditional-rendering.md

@@ -626,11 +626,7 @@ export default function PackingList() {
 
 Perhatikan bahwa Anda harus menulis `importance > 0 && ...` dan bukan `importance && ...` sehingga jika `importance` adalah `0`, `0` tidak di-*render* sebagai hasilnya!
 
-<<<<<<< HEAD
 Dalam solusi ini, dua kondisi terpisah digunakan untuk menyisipkan spasi di antara nama dan label kepentingan. Atau, Anda bisa menggunakan *fragment* dengan spasi di depan: `importance > 0 && <> <i>...</i></>` atau tambahkan spasi langsung di dalam `<i>`:  `importance > 0 && <i> ...</i>`.
-=======
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
 
 </Solution>
 

src/content/learn/describing-the-ui.md

@@ -10,7 +10,6 @@ React adalah pustaka JavaScript untuk melakukan *render* antarmuka pengguna (*Us
 
 <YouWillLearn isChapter={true}>
 
-<<<<<<< HEAD
 * [Cara menulis komponen React pertama Anda](/learn/your-first-component)
 * [Kapan dan bagaimana membuat file multi-komponen](/learn/importing-and-exporting-components)
 * [Cara menambahkan markup ke JavaScript dengan JSX](/learn/writing-markup-with-jsx)
@@ -19,17 +18,7 @@ React adalah pustaka JavaScript untuk melakukan *render* antarmuka pengguna (*Us
 * [Cara melakukan render komponen secara kondisional](/learn/conditional-rendering)
 * [Cara melakukan render beberapa komponen sekaligus](/learn/rendering-lists)
 * [Cara menghindari bug yang membingungkan dengan menjaga komponen tetap murni](/learn/keeping-components-pure)
-=======
-* [How to write your first React component](/learn/your-first-component)
-* [When and how to create multi-component files](/learn/importing-and-exporting-components)
-* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
-* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
-* [How to configure components with props](/learn/passing-props-to-a-component)
-* [How to conditionally render components](/learn/conditional-rendering)
-* [How to render multiple components at a time](/learn/rendering-lists)
-* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
-* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
+* [Kegunaan memahami UI Anda seperti pohon](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -535,9 +524,6 @@ Baca **[Menjaga Komponen Tetap Murni](/learn/keeping-components-pure)** untuk me
 
 </LearnMore>
 
-<<<<<<< HEAD
-## Apa selanjutnya? {/*whats-next*/}
-=======
 ## Your UI as a tree {/*your-ui-as-a-tree*/}
 
 React uses trees to model the relationships between components and modules. 
@@ -569,8 +555,7 @@ Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn ho
 </LearnMore>
 
 
-## What's next? {/*whats-next*/}
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
+## Apa selanjutnya? {/*whats-next*/}
 
 Lanjut ke [Komponen Pertama Anda](/learn/your-first-component) untuk mulai membaca halaman bab ini dari awal!
 

src/content/learn/editor-setup.md

@@ -40,11 +40,7 @@ Beberapa editor telah memiliki fitur-fitur ini secara *built-in*, tetapi yang la
 
 ### Pemformatan {/*formatting*/}
 
-<<<<<<< HEAD
 Hal terakhir yang ingin Anda lakukan saat berbagi kode Anda dengan kontributor lain adalah terlibat dalam diskusi tentang [tab vs spasi](https://www.google.com/search?q=tabs+vs+spaces)! Untungnya, [Prettier](https://prettier.io/) akan membersihkan kode Anda dengan memformat ulang sesuai dengan aturan yang telah ditentukan. Jalankan Prettier, dan semua tab Anda akan dikonversi menjadi spasi—dan indentasi, tanda kutip, dll juga akan diubah sesuai dengan konfigurasi. Dalam pengaturan yang ideal, Prettier akan berjalan saat Anda menyimpan file Anda, dengan cepat membuat perubahan ini untuk Anda.
-=======
-The last thing you want to do when sharing your code with another contributor is get into a discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
 
 Anda dapat menginstal [ekstensi Prettier di VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) dengan mengikuti langkah-langkah berikut:
 

src/content/learn/importing-and-exporting-components.md

@@ -282,13 +282,8 @@ export default function App() {
 }
 ```
 
-<<<<<<< HEAD
-```js Gallery.js active
-// Pindahkan saya ke Profile.js!
-=======
 ```js src/Gallery.js active
-// Move me to Profile.js!
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
+// Pindahkan saya ke Profile.js!
 export function Profile() {
   return (
     <img

src/content/learn/manipulating-the-dom-with-refs.md

@@ -493,11 +493,7 @@ Secara umum, Anda [tidak ingin](/learn/referencing-values-with-refs#best-practic
 
 React mengatur nilai `ref.current` selama commit. Sebelum memperbarui DOM, React mengatur nilai `ref.current` yang terpengaruh menjadi `null`. Setelah memperbarui DOM, React segera mengatur nilai `ref.current` tersebut menjadi simpul DOM yang sesuai.
 
-<<<<<<< HEAD
-Biasanya, Anda akan mengakses ref dari *event handler*. Jika Anda ingin melakukan sesuatu dengan sebuah *ref*, tetapi tidak ada cara tertentu untuk melakukannya, Anda mungkin memerlukan *Effect*. Kami akan membahas *effect* pada halaman berikutnya.
-=======
-**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss Effects on the next pages.
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
+**Biasanya, Anda akan mengakses ref dari *event handler*.** Jika Anda ingin melakukan sesuatu dengan sebuah *ref*, tetapi tidak ada *event* tertentu untuk melakukannya, Anda mungkin memerlukan *Effect*. Kami akan membahas *effect* pada halaman berikutnya.
 
 <DeepDive>
 

src/content/learn/passing-data-deeply-with-context.md

@@ -984,13 +984,8 @@ export const places = [{
   imageId: 'kxsph5C'
 }, {
   id: 5, 
-<<<<<<< HEAD
   name: 'Chefchaouen, Maroko',
   description: 'Ada beberapa teori mengapa rumah-rumah dicat biru, termasuk bahwa warna tersebut dapat mengusir nyamuk atau melambangkan langit dan surga.',
-=======
-  name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
   imageId: 'rTqKo46'
 }, {
   id: 6,
@@ -1128,13 +1123,8 @@ export const places = [{
   imageId: 'kxsph5C'
 }, {
   id: 5, 
-<<<<<<< HEAD
   name: 'Chefchaouen, Maroko',
   description: 'Ada beberapa teori mengapa rumah-rumah dicat biru, termasuk bahwa warna tersebut dapat mengusir nyamuk atau melambangkan langit dan surga.',
-=======
-  name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
   imageId: 'rTqKo46'
 }, {
   id: 6,

src/content/learn/preserving-and-resetting-state.md

@@ -10,46 +10,17 @@ title: Mempertahankan dan Mengatur Ulang State
 
 <YouWillLearn>
 
-<<<<<<< HEAD
-* Bagaimana React "melihat" struktur komponen
 * Kapan React memilih untuk mempertahankan atau mengatur ulang *state*
 * Bagaimana cara memaksa React untuk mengatur ulang *state* komponen
 * Bagaimana *keys* dan *types* mempengaruhi apakah *state* dipertahankan
 
 </YouWillLearn>
 
-## Pohon antarmuka pengguna (UI) {/*the-ui-tree*/}
-
-Peramban menggunakan banyak struktur pohon untuk memodelkan antarmuka pengguna (UI). [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) mewakili elemen HTML, [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) melakukan hal yang sama untuk CSS. Bahkan ada [Pohon aksesibilitas](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
-
-React juga menggunakan struktur pohon untuk mengelola dan memodelkan UI yang Anda buat. React membuat **pohon UI** dari JSX Anda. Kemudian React DOM memperbarui elemen-elemen DOM peramban agar sesuai dengan pohon UI tersebut (React Native menerjemahkan pohon-pohon tersebut menjadi elemen-elemen yang spesifik untuk platform *mobile*).
-
-<DiagramGroup>
-
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram dengan tiga bagian yang disusun secara horizontal. Pada bagian pertama, terdapat tiga persegi panjang yang ditumpuk secara vertikal, dengan label 'Komponen A', 'Komponen B', dan 'Komponen C'. Transisi ke panel berikutnya adalah sebuah panah dengan logo React di bagian atas yang berlabel 'React'. Bagian tengah berisi sebuah pohon komponen, dengan akar berlabel 'A' dan dua anak berlabel 'B' dan 'C'. Bagian selanjutnya ditransisikan lagi menggunakan panah dengan logo React di bagian atas berlabel 'React'. Bagian ketiga dan terakhir adalah model rangka dari sebuah browser, yang berisi sebuah pohon dengan 8 node, yang hanya memiliki sebuah subset yang disorot (menunjukkan subpohon dari bagian tengah).">
-
-Dari komponen, React membuat pohon UI yang digunakan React DOM untuk me*render* DOM
-
-</Diagram>
-
-</DiagramGroup>
-
 ## *State* terikat dengan posisi di dalam pohon {/*state-is-tied-to-a-position-in-the-tree*/}
 
-Ketika Anda memberikan *state* pada sebuah komponen, Anda mungkin berpikir bahwa state tersebut "hidup" di dalam komponen. Tetapi *state* sebenarnya disimpan di dalam React. React mengasosiasikan setiap bagian dari *state* yang dipegangnya dengan komponen yang benar berdasarkan posisi komponen tersebut di dalam pohon UI.
-=======
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
-
-</YouWillLearn>
-
-## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
+React membangun [pohon render](learn/understanding-your-ui-as-a-tree#the-render-tree) untuk struktur komponen di dalam UI Anda.
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
-
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
+Ketika Anda memberikan *state* pada sebuah komponen, Anda mungkin berpikir bahwa state tersebut "hidup" di dalam komponen. Tetapi *state* sebenarnya disimpan di dalam React. React mengasosiasikan setiap bagian dari *state* yang dipegangnya dengan komponen yang benar berdasarkan posisi komponen tersebut di dalam pohon UI.
 
 Di sini, hanya ada satu tag JSX `<Counter />`, tetapi tag tersebut dirender pada dua posisi yang berbeda:
 

src/content/learn/referencing-values-with-refs.md

@@ -284,11 +284,7 @@ Anda juga tidak perlu khawatir tentang [menghindari mutasi](/learn/updating-obje
 
 ## *Refs* dan *DOM* {/*refs-and-the-dom*/}
 
-<<<<<<< HEAD
-Anda dapat memberikan nilai apa pun kepada *ref*. Namun, penggunaan *ref* yang paling umum adalah untuk mengakses sebuah elemen *DOM*. Misalnya, hal ini berguna jika Anda ingin memberi fokus pada sebuah input secara programatik. Ketika Anda mengoper sebuah *ref* ke dalam atribut `ref` di *JSX*, seperti `<div ref={myRef}>`, React akan menempatkan elemen *DOM* yang sesuai ke dalam `myRef.current`. Anda dapat membaca lebih lanjut tentang hal ini di [Memanipulasi DOM dengan Refs](/learn/manipulating-the-dom-with-refs).
-=======
-You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
->>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4
+Anda dapat memberikan nilai apa pun kepada *ref*. Namun, penggunaan *ref* yang paling umum adalah untuk mengakses sebuah elemen *DOM*. Misalnya, hal ini berguna jika Anda ingin memberi fokus pada sebuah input secara programatik. Ketika Anda mengoper sebuah *ref* ke dalam atribut `ref` di *JSX*, seperti `<div ref={myRef}>`, React akan menempatkan elemen *DOM* yang sesuai ke dalam `myRef.current`. Ketika elemen tersebut dihapus dari *DOM*, React akan mengubah `myRef.current` menjadi `null`. Anda dapat membaca lebih lanjut tentang hal ini di [Memanipulasi DOM dengan Refs](/learn/manipulating-the-dom-with-refs).
 
 <Recap>