From e106305832e245997c76f0b898d9a3447e91ab69 Mon Sep 17 00:00:00 2001 From: Cikang44 Date: Tue, 25 Apr 2023 22:14:00 +0700 Subject: [PATCH 1/4] translate your first component up to using a component --- src/content/learn/your-first-component.md | 61 ++++++++++++----------- 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 343823aa4..324636090 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -1,41 +1,41 @@ --- -title: Your First Component +title: Komponen Pertama Anda --- -*Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey! +Komponen merupakan salah satu konsep inti dari React. Komponen adalah fondasi di mana anda bangun antarmuka pengguna (UI), yang membuat komponen tempat yang sempurna untuk memulai perjalan React anda! -* What a component is -* What role components play in a React application -* How to write your first React component +* Apa itu komponen +* Apa tugas yang dimainkan oleh komponen di dalam aplikasi React +* Bagaimana cara menulis komponen React pertama anda -## Components: UI building blocks {/*components-ui-building-blocks*/} +## Komponen: Pembangun Balok UI {/*components-ui-building-blocks*/} -On the Web, HTML lets us create rich structured documents with its built-in set of tags like `

` and `
  • `: +Di dalam *web*, HTML memungkinkan kita membuat dokumen-dokumen terstruktur yang kaya dengan kumpulan *tag* *built-in*-nya seperti `

    ` dan `
  • `: ```html
    -

    My First Component

    +

    Komponen Pertama Saya

      -
    1. Components: UI Building Blocks
      2. -
    2. Defining a Component
      3. -
    3. Using a Component
      4. +
    4. Komponen: Pembangun Balok UI
      5. +
    5. Mendefinisikan sebuah Komponen
      6. +
    6. Menggunakan sebuah Komponen
    ``` -This markup represents this article `
    `, its heading `

    `, and an (abbreviated) table of contents as an ordered list `
      `. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. +*Markup* ini merepresentasikan artikel `
      `, heading `

      ` dan daftar isi (yang disingkat) sebagai daftar yang tersusun `
        `. *Markup* seperti ini, digabung dengan CSS untuk *style*, dan *Javascript* untuk interaktivitas, berada di belakang setiap *sidebar*, *avatar*, *modal*, *dropdown*—setiap potongan UI anda liat di dalam web. -React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `` component you could render on every page. Under the hood, it still uses the same HTML tags like `
        `, `

        `, etc. +React memungkinkan anda menggabung *markup*, CSS, dan *Javascript* anda menjadi "komponen" *custom*, **elemen UI yang dapat digunakan kembali untuk aplikasi anda.** Daftar isi yang anda lihat diatas dapat diubah menjadi sebuah komponen `` yang dapat kamu *render* di setiap halaman. *Under the hood*, itu tetap menggunakan *tag* HTML yang sama seperti `
        `, `h1`, dll. -Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components: +Sama seperti *tag* HTMl, anda dapat menggabung, mengurut, dan menyusun bertingkat komponen untuk mendesain halaman penuh. Contohnya, halaman dokumentasi ini yang anda baca terbuat oleh komponen React: ```js @@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w ``` -As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ``! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI.](https://material-ui.com/) +Seiring berkembangnya proyek anda, anda akan memperhatikan bahwa banyak desain anda bisa dikomposisi dengan menggunakan ulang komponen yang sudah anda buat, mempercepatkan *development* anda. Daftar isi kami diatas bisa disertakan pada layar apapun denagn ``! Anda bisa *jumpstart* projek anda dengan ribuan komponen yang dibagi oleh komunitas *open source* React seperti [Chakra UI](https://chakra-ui.com/) dan [Material UI.](https://material-ui.com/) -## Defining a component {/*defining-a-component*/} +## Mendefinisikan sebuah Komponen {/*defining-a-component*/} -Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_.** Here's what that looks like (you can edit the example below): +Secara tradisional saat menciptakan halaman *web*, para *web developer* *marked up* konten mereka kemudian menambahkan interaksi dengan menambahkan sedikit *Javascript*. Ini bekerja dengan baik ketika interaksi hanya menyenangkan-untuk-dimiliki di dalam *web*. Sekarang ini diharapkan banyak situs dan semua aplikasi. React mengutamakan interaktivitas dengan tetap menggunakan teknologi yang sama: **Komponen React adalah _function Javascript_ yang dapat anda _sirami dengan markup_.** Inilah tampilannya (anda bisa sunting contoh dibawah): @@ -76,33 +76,34 @@ img { height: 200px; } -And here's how to build a component: +Dan ini bagaimana cara membuat komponen: -### Step 1: Export the component {/*step-1-export-the-component*/} +### Langkah 1: Ekspor komponen {/*step-1-export-the-component*/} -The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) +*prefix* `export default` adalah sebuah [sintaksis *Javascript* standar](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (tidak spesifik kepada React). Itu memungkinkan anda menandai fungsi utama di sebuah file supaya anda bisa import itu dari *files* lain nanti. (Lebih lanjut tentang mengimport di [Mengimport dan Mengeksport Komponen](/learn/importing-and-exporting-components)!) -### Step 2: Define the function {/*step-2-define-the-function*/} +### Langkah 2: Definisikan fungsi {/*step-2-define-the-function*/} -With `function Profile() { }` you define a JavaScript function with the name `Profile`. +Dengan `function Profile() { }` anda mendefinisikan fungsi *Javascript* dengan nama `Profile`. -React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work! +Componen React adalah fungsi-fungsi *Javascript* biasa, tetapi **nama mereka harus dimulai dengan huruf kapital** atau tidak akan berfungsi! -### Step 3: Add markup {/*step-3-add-markup*/} +### Langkah 3: Tambahkan *markup* {/*step-3-add-markup*/} -The component returns an `` tag with `src` and `alt` attributes. `` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript. +Komponen itu mengembalikan tag `` dengan attribut `src` dan `alt`. `` ditulis seperti HTML, tetapi ini sebenarngan *Javascript* *under the hood*! Sintaksis ini disebut [JSX](/learn/writing-markup-with-jsx), dan ini memungkinkan anda untuk *embed* *markup* didalam *Javascript*. -Return statements can be written all on one line, as in this component: +Pernyataan-pernyataan yang dikembalikan bisa ditulis semua dalam satu baris, seperti dalam komponen ini. ```js return Katherine Johnson; ``` But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses: +Tetapi jika *markup* anda tidak semua ada di baris yang sama seperti *keyword* `return`, anda harus membungkus itu dalam tanda kurung: ```js return ( @@ -114,13 +115,13 @@ return ( -Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! +Tanpa tanda kurung, kode apapun di baris-baris setelah `return` [akan diabaikan](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! -## Using a component {/*using-a-component*/} +## Menggunakan komponen {/*using-a-component*/} -Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components: + Sekarang setelah anda mendefinisikan komponen `Profile` anda, anda bisa mengsarangi itu di dalam komponen-komponen lain. Misalnya, anda bisa eksport sebuah komponen `Gallery` yang menggunakan beberapa komponen `Profile`: @@ -215,7 +216,7 @@ Your React application begins at a "root" component. Usually, it is created auto Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. -[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +[React-based frameworks](/learn/start-a-new-react-project) take this a Langkah further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need. From b0f3af1cf9aae010c1982d02f6e44c99aedc1799 Mon Sep 17 00:00:00 2001 From: Cikang44 Date: Wed, 26 Apr 2023 15:03:53 +0700 Subject: [PATCH 2/4] translation your first component --- src/content/learn/your-first-component.md | 133 +++++++++++----------- 1 file changed, 66 insertions(+), 67 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 324636090..d6cd6fed1 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -18,24 +18,24 @@ Komponen merupakan salah satu konsep inti dari React. Komponen adalah fondasi di ## Komponen: Pembangun Balok UI {/*components-ui-building-blocks*/} -Di dalam *web*, HTML memungkinkan kita membuat dokumen-dokumen terstruktur yang kaya dengan kumpulan *tag* *built-in*-nya seperti `

        ` dan `
      1. `: +Di dalam *web*, HTML memungkinkan kita membuat dokumen-dokumen terstruktur yang kaya dengan kumpulan *tag* bawaannya seperti `

        ` dan `
      2. `: ```html

        Komponen Pertama Saya

        1. Komponen: Pembangun Balok UI
          2. -
        2. Mendefinisikan sebuah Komponen
          3. -
        3. Menggunakan sebuah Komponen
          4. +
        4. Mendefinisikan suatu Komponen
          5. +
        5. Menggunakan suatu Komponen
        ``` -*Markup* ini merepresentasikan artikel `
        `, heading `

        ` dan daftar isi (yang disingkat) sebagai daftar yang tersusun `
          `. *Markup* seperti ini, digabung dengan CSS untuk *style*, dan *Javascript* untuk interaktivitas, berada di belakang setiap *sidebar*, *avatar*, *modal*, *dropdown*—setiap potongan UI anda liat di dalam web. +*Markup* ini merepresentasikan artikel `
          `, heading `

          ` dan daftar isi (yang disingkat) sebagai daftar yang tersusun `
            `. *Markup* seperti ini, digabung dengan CSS untuk *style*, dan *Javascript* untuk interaktivitas, berada di belakang setiap *sidebar*, *avatar*, *modal*, *dropdown*—setiap potongan UI yang anda liat di dalam *web*. -React memungkinkan anda menggabung *markup*, CSS, dan *Javascript* anda menjadi "komponen" *custom*, **elemen UI yang dapat digunakan kembali untuk aplikasi anda.** Daftar isi yang anda lihat diatas dapat diubah menjadi sebuah komponen `` yang dapat kamu *render* di setiap halaman. *Under the hood*, itu tetap menggunakan *tag* HTML yang sama seperti `
            `, `h1`, dll. +React memungkinkan anda menggabung *markup*, CSS, dan *Javascript* anda menjadi "komponen" yang dibuat khusus, **elemen UI yang dapat digunakan kembali untuk aplikasi anda.** Daftar isi yang anda lihat di atas dapat diubah menjadi sebuah komponen `` yang dapat anda *render* pada setiap halaman. Dari belakang, itu tetap menggunakan *tag* HTML yang sama seperti `
            `, `h1`, dll. -Sama seperti *tag* HTMl, anda dapat menggabung, mengurut, dan menyusun bertingkat komponen untuk mendesain halaman penuh. Contohnya, halaman dokumentasi ini yang anda baca terbuat oleh komponen React: +Sama seperti *tag* HTML, anda dapat menggabung, mengurut, dan menyusun bertingkat komponen untuk mendesain halaman penuh. Misalnya, halaman dokumentasi ini yang anda baca terbuat oleh komponen-komponen React: ```js @@ -51,11 +51,11 @@ Sama seperti *tag* HTMl, anda dapat menggabung, mengurut, dan menyusun bertingka ``` -Seiring berkembangnya proyek anda, anda akan memperhatikan bahwa banyak desain anda bisa dikomposisi dengan menggunakan ulang komponen yang sudah anda buat, mempercepatkan *development* anda. Daftar isi kami diatas bisa disertakan pada layar apapun denagn ``! Anda bisa *jumpstart* projek anda dengan ribuan komponen yang dibagi oleh komunitas *open source* React seperti [Chakra UI](https://chakra-ui.com/) dan [Material UI.](https://material-ui.com/) +Seiring berkembangnya proyek anda, anda akan memperhatikan bahwa banyak desain anda bisa dikomposisi dengan menggunakan ulang komponen-komponen yang sudah anda buat, mempercepatkan perkembangan proyek anda. Daftar isi kita di atas bisa disertakan pada layar apapun dengan ``! Anda bisa memulai proyek anda dengan cepat menggunakan ribuan komponen-komponen yang dibagi oleh komunitas *open source* React seperti [Chakra UI](https://chakra-ui.com/) dan [Material UI.](https://material-ui.com/) -## Mendefinisikan sebuah Komponen {/*defining-a-component*/} +## Mendefinisikan suatu komponen {/*defining-a-component*/} -Secara tradisional saat menciptakan halaman *web*, para *web developer* *marked up* konten mereka kemudian menambahkan interaksi dengan menambahkan sedikit *Javascript*. Ini bekerja dengan baik ketika interaksi hanya menyenangkan-untuk-dimiliki di dalam *web*. Sekarang ini diharapkan banyak situs dan semua aplikasi. React mengutamakan interaktivitas dengan tetap menggunakan teknologi yang sama: **Komponen React adalah _function Javascript_ yang dapat anda _sirami dengan markup_.** Inilah tampilannya (anda bisa sunting contoh dibawah): +Secara tradisional saat menciptakan halaman *web*, para *web developer* me-*mark-up* konten mereka kemudian menambahkan interaksi dengan sedikit *Javascript*. Ini bekerja dengan baik ketika interaksi hanya menyenangkan-untuk-dimiliki di dalam *web*. Sekarang ini diharapkan banyak situs dan semua aplikasi. React mengutamakan interaktivitas dengan tetap menggunakan teknologi yang sama: **Sebuah komponen React adalah sebuah fungsi _Javascript_ yang dapat anda _tambahkan dengan markup_.** Inilah tampilannya (anda bisa sunting contoh di bawah ini): @@ -76,34 +76,33 @@ img { height: 200px; } -Dan ini bagaimana cara membuat komponen: +Dan ini bagaimana cara membuat sebuah komponen: -### Langkah 1: Ekspor komponen {/*step-1-export-the-component*/} +### Langkah 1: Eksport komponennya {/*step-1-export-the-component*/} -*prefix* `export default` adalah sebuah [sintaksis *Javascript* standar](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (tidak spesifik kepada React). Itu memungkinkan anda menandai fungsi utama di sebuah file supaya anda bisa import itu dari *files* lain nanti. (Lebih lanjut tentang mengimport di [Mengimport dan Mengeksport Komponen](/learn/importing-and-exporting-components)!) +awalan `export default` adalah sebuah [sintaksis *Javascript* standar](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (tidak spesifik kepada React). Itu memungkinkan anda menandai fungsi utama di sebuah file supaya anda bisa mengimport itu dari *file-file* lain nantinya. (Lebih lanjut tentang mengimport di [Mengimport dan Mengeksport Komponen](/learn/importing-and-exporting-components)!) -### Langkah 2: Definisikan fungsi {/*step-2-define-the-function*/} +### Langkah 2: Definisikan fungsinya {/*step-2-define-the-function*/} Dengan `function Profile() { }` anda mendefinisikan fungsi *Javascript* dengan nama `Profile`. -Componen React adalah fungsi-fungsi *Javascript* biasa, tetapi **nama mereka harus dimulai dengan huruf kapital** atau tidak akan berfungsi! +Komponen React adalah fungsi *Javascript* biasa, tetapi **nama mereka harus dimulai dengan huruf kapital** atau tidak akan berfungsi! ### Langkah 3: Tambahkan *markup* {/*step-3-add-markup*/} -Komponen itu mengembalikan tag `` dengan attribut `src` dan `alt`. `` ditulis seperti HTML, tetapi ini sebenarngan *Javascript* *under the hood*! Sintaksis ini disebut [JSX](/learn/writing-markup-with-jsx), dan ini memungkinkan anda untuk *embed* *markup* didalam *Javascript*. +Komponen itu mengembalikan *tag* `` dengan atribut `src` dan `alt`. `` ditulis seperti HTML, tetapi ini sebenarnya merupakan *Javascript* di belakang! Sintaksis ini disebut [JSX](/learn/writing-markup-with-jsx), dan ini memungkinkan anda untuk *embed* *markup* di dalam *Javascript*. -Pernyataan-pernyataan yang dikembalikan bisa ditulis semua dalam satu baris, seperti dalam komponen ini. +Pernyataan-pernyataan yang dikembalikan bisa ditulis semua pada satu baris, seperti dalam komponen ini. ```js return Katherine Johnson; ``` -But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses: -Tetapi jika *markup* anda tidak semua ada di baris yang sama seperti *keyword* `return`, anda harus membungkus itu dalam tanda kurung: +Tetapi jika *markup* anda tidak semua ada di baris yang sama dengan *keyword* `return`, anda harus membungkus itu dalam tanda kurung: ```js return ( @@ -119,9 +118,9 @@ Tanpa tanda kurung, kode apapun di baris-baris setelah `return` [akan diabaikan] -## Menggunakan komponen {/*using-a-component*/} +## Menggunakan suatu komponen {/*using-a-component*/} - Sekarang setelah anda mendefinisikan komponen `Profile` anda, anda bisa mengsarangi itu di dalam komponen-komponen lain. Misalnya, anda bisa eksport sebuah komponen `Gallery` yang menggunakan beberapa komponen `Profile`: +Sekarang setelah anda mendefinisikan komponen `Profile` anda, anda bisa meletakkan itu di dalam komponen-komponen lain secara bertingkat. Misalnya, anda bisa eksport sebuah komponen `Gallery` yang menggunakan beberapa komponen `Profile`: @@ -138,7 +137,7 @@ function Profile() { export default function Gallery() { return (
            -

            Amazing scientists

            +

            Ilmuwan yang luar biasa

            @@ -153,37 +152,37 @@ img { margin: 0 10px 10px 0; height: 90px; } -### What the browser sees {/*what-the-browser-sees*/} +### Apa yang dilihat oleh *browser* {/*what-the-browser-sees*/} -Notice the difference in casing: +Perhatikanlah perbedaan pada huruf kapitalisasi: -* `
            ` is lowercase, so React knows we refer to an HTML tag. -* `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. +* `
            ` dimulai dengan huruf kecil, supaya React mengetahui bahwa kita merujuk pada *tag* HTML. +* `` dimulai dengan huruf kapital `P`, supaya React mengetahui bahwa kita ingin menggunakan komponen kita bernama `Profile`. -And `Profile` contains even more HTML: ``. In the end, this is what the browser sees: +Dan `Profile` berisi lebih banyak HTML: ``. Pada akhirnya, inilah yang dilihat oleh *browser*: ```html
            -

            Amazing scientists

            +

            Ilmuwan yang luar biasa

            Katherine Johnson Katherine Johnson Katherine Johnson
            ``` -### Nesting and organizing components {/*nesting-and-organizing-components*/} +### Menyusun secara bertingkat dan mengorganisir komponen {/*nesting-and-organizing-components*/} -Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components) +Komponen adalah fungsi *Javascript* biasa, sehingga anda bisa menjaga beberapa komponen di dalam *file* yang sama. Ini nyaman ketika komponen-komponen relatif kecil atau saling terkait secara erat. Jika *file* ini menjadi ramai, anda selalu bisa memindahkan `Profile` kepada suatu *file* yang beda. Anda akan belajar bagaimana cara melakukan ini segera di [halaman tentang import.](/learn/importing-and-exporting-components) -Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like. +Karena komponen-komponen `Profile` di-*render* di dalam `Gallery`—bahkan beberapa kali!—kita dapat mengatakan bahwa `Gallery` adalah sebuah **komponen induk,** yang me-*render* setiap `Profile` sebagai sebuah "anak". Ini merupakan bagian ajaib dari React: anda bisa mendefinisikan suatu komponen sekali, kemudian digunakan di banyak tempat dan sebanyak kali yang anda suka. -Components can render other components, but **you must never nest their definitions:** +Komponen dapat me-*render* komponen lain, tetapi **anda tidak boleh menyusun definisinya secara bertingkat:** ```js {2-5} export default function Gallery() { - // 🔴 Never define a component inside another component! + // 🔴 Jangan mendefinisi suatu komponen di dalam komponen lain! function Profile() { // ... } @@ -191,47 +190,47 @@ export default function Gallery() { } ``` -The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level: +Potongan di atas [sangat lambat dan mengakibatkan *bug*.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Sebagai gantinya, definisikan setiap komponen di tingkat atas: ```js {5-8} export default function Gallery() { // ... } -// ✅ Declare components at the top level +// ✅ Deklarasikan komponen di tingkat atas function Profile() { // ... } ``` -When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions. +Ketika suatu komponen anak membutuhkan data dari suatu induk, [operkan data melalui *props*](/learn/passing-props-to-a-component) daripada menyusun definisinya secara bertingkat. -#### Components all the way down {/*components-all-the-way-down*/} +#### Komponen sampai ke bawah {/*components-all-the-way-down*/} -Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. +Aplikasi React anda dimulai dari suatu komponen "*root*". Biasanya, itu dibuat secara otomatis saat anda memulai proyek baru. Misalnya, jika anda menggunakan [CodeSandbox](https://codesandbox.io/) atau [Create React App](https://create-react-app.dev/), komponen *root* didefinisikan di `src/App.js`. Jika anda menggunakan *framework* [Next.js](https://nextjs.org/), komponen *root* didefinisikan di `pages/index.js`. Dalam contoh-contoh berikut, anda telah mengeksport komponen-komponen *root*. -Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. +Sebagian besar aplikasi React menggunakan komponen sampai ke bawah. Ini berarti anda tidak akan hanya menggunakan komponen untuk bagian-bagian yang dapat digunakan kembali seperti tombol, tetapi juga bagian-bagian yang lebih besar seperti *sidebar*, daftar, dan juga, halaman lengkap! Komponen adalah sebuah cara yang praktis untuk mengorganisir kode UI dan *markup*, bahkan jika beberapa darinya hanya digunakan sekali. -[React-based frameworks](/learn/start-a-new-react-project) take this a Langkah further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +[*Framework-framework* berbasis React](/learn/start-a-new-react-project) mengambil ini selangkah lebih jauh. Daripada menggunakan sebuah *file* HTML yang kosong dan membiarkan React untuk "mengambil alih" dalam mengelola halamannya dengan *Javascript*, mereka *juga* membuat HTML-nya secara otomatis dari komponen-komponen React anda. Ini memungkinkan aplikasi anda menampilkan beberapa konten sebelum kode *Javascript* dimuat. -Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need. +Namun, banyak *website* hanya menggunakan React untuk [menambahkan interaktivitas kepada halaman HTML yang sudah ada.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Mereka memiliki banya komponen *root* daripada satu untuk seluruh halaman. Anda dapat menggunakan React sebanyaknya-banyaknya—atau sesedikit mungkin—sesuai dengan yang dibutuhkan. -You've just gotten your first taste of React! Let's recap some key points. +Anda baru saja mendapatkan rasa pertama anda dari React! Mari kita rekap beberapa poin penting. -* React lets you create components, **reusable UI elements for your app.** -* In a React app, every piece of UI is a component. -* React components are regular JavaScript functions except: - - 1. Their names always begin with a capital letter. - 2. They return JSX markup. +* React memungkinkan anda untuk membuat komponen, **elemen UI yang dapat digunakan kembali untuk aplikasi anda** +* Dalam suatu aplikasi React, setiap bagian dari UI adalah sebuah komponen. +* Komponen React adalah fungsi *Javascript* biasa kecuali: + + 1. Nama mereka selalu dimulai dengan huruf kapital. + 2. Mereka selalu mengembalikan *markup* JSX. @@ -239,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points. -#### Export the component {/*export-the-component*/} +#### Eksport komponen tersebut {/*export-the-component*/} -This sandbox doesn't work because the root component is not exported: +*Sandbox* ini tidak dapat bekerja karena komponen *root* tidak dieksport: @@ -262,11 +261,11 @@ img { height: 181px; } -Try to fix it yourself before looking at the solution! +Coba perbaiki sendiri sebelum melihat pada solusinya! -Add `export default` before the function definition like so: +Tambahkan `export default` sebelum definisi fungsi seperti ini: @@ -287,17 +286,17 @@ img { height: 181px; } -You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components) +Anda mungkin heran mengapa menulis `export` sendiri tidak cukup untuk memperbaiki contoh ini. Anda bisa belajar perbedaan dari `export` dan `export default` di [Mengimport dan Mengeksport Komponen.](/learn/importing-and-exporting-components) -#### Fix the return statement {/*fix-the-return-statement*/} +#### Perbaikilah pernyataan pengembalian {/*fix-the-return-statement*/} -Something isn't right about this `return` statement. Can you fix it? +Ada yang tidak benar tentang pernyataan `return` ini. Dapatkah anda memperbaikinya? -You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error. +Anda mungkin mendapatakan sebuah kesalahan "*Unexpected Token*" saat mencoba memperbaiki ini. Dalam hal itu, cek kembali bahwa titik koma muncul *setelah* tanda kurung. Meletakkan suatu titik koma di dalam `return ( )` akan mengakibatkan sebuah kesalahan. @@ -319,7 +318,7 @@ img { height: 180px; } -You can fix this component by moving the return statement to one line like so: +Anda dapat memperbaiki komponen ini dengan memindahkan penyataan pengembalian kepada satu baris seperti ini: @@ -335,7 +334,7 @@ img { height: 180px; } -Or by wrapping the returned JSX markup in parentheses that open right after `return`: +Atau dengan membungkus *markup* JSX yang dikembalikan di dalam tanda kurung yang terbuka setelah `return`: @@ -358,9 +357,9 @@ img { height: 180px; } -#### Spot the mistake {/*spot-the-mistake*/} +#### Temukanlah kesalahannya {/*spot-the-mistake*/} -Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!) +Ada yang salah dengan bagaimana komponen `Profile` dideklarasi dan digunakan. Dapatkah anda temukan masalahnya? (Coba untuk mengingat kembali bagaimana React membedakan komponen dengan *tag* HTML biasa!) @@ -377,7 +376,7 @@ function profile() { export default function Gallery() { return (
            -

            Amazing scientists

            +

            Ilmuwan yang luar biasa

            @@ -394,9 +393,9 @@ img { margin: 0 10px 10px 0; height: 90px; } -React component names must start with a capital letter. +Nama dari komponen React harus dimulai dengan huruf kapital. -Change `function profile()` to `function Profile()`, and then change every `` to ``: +Ubahlah `function profile()` menjadi `function Profile()`, kemudian ubah setiap `` menjadi ``: @@ -413,7 +412,7 @@ function Profile() { export default function Gallery() { return (
            -

            Amazing scientists

            +

            Ilmuwan yang luar biasa

            @@ -430,14 +429,14 @@ img { margin: 0 10px 10px 0; } -#### Your own component {/*your-own-component*/} +#### Komponen anda sendiri {/*your-own-component*/} -Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `

            Good job!

            `. Don't forget to export it! +Tulislah sebuah komponen dari awal. Anda bisa memberikannya nama apapun yang benar dan mengembalikan *markup* apapun. Jika anda kehabisan ide, anda bisa tulis sebuah komponen `Congratuliations` yang menampilkan `

            Kerja bagus!

            `. Jangan lupa untuk dieksport! ```js -// Write your component below! +// Tulislah komponen anda di bawah ini! ``` @@ -450,7 +449,7 @@ Write a component from scratch. You can give it any valid name and return any ma ```js export default function Congratulations() { return ( -

            Good job!

            +

            Kerja bagus!

            ); } ``` From c06ed17255ce28aeadd11e1472610a1360ebaa54 Mon Sep 17 00:00:00 2001 From: Cikang44 Date: Wed, 26 Apr 2023 15:47:02 +0700 Subject: [PATCH 3/4] fixed capitalisation of Anda --- src/content/learn/your-first-component.md | 54 +++++++++++------------ 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index d6cd6fed1..ff7c47498 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -4,7 +4,7 @@ title: Komponen Pertama Anda -Komponen merupakan salah satu konsep inti dari React. Komponen adalah fondasi di mana anda bangun antarmuka pengguna (UI), yang membuat komponen tempat yang sempurna untuk memulai perjalan React anda! +Komponen merupakan salah satu konsep inti dari React. Komponen adalah fondasi di mana Anda bangun antarmuka pengguna (UI), yang membuat komponen tempat yang sempurna untuk memulai perjalan React Anda! @@ -12,7 +12,7 @@ Komponen merupakan salah satu konsep inti dari React. Komponen adalah fondasi di * Apa itu komponen * Apa tugas yang dimainkan oleh komponen di dalam aplikasi React -* Bagaimana cara menulis komponen React pertama anda +* Bagaimana cara menulis komponen React pertama Anda @@ -31,11 +31,11 @@ Di dalam *web*, HTML memungkinkan kita membuat dokumen-dokumen terstruktur yang
            ``` -*Markup* ini merepresentasikan artikel `
            `, heading `

            ` dan daftar isi (yang disingkat) sebagai daftar yang tersusun `
              `. *Markup* seperti ini, digabung dengan CSS untuk *style*, dan *Javascript* untuk interaktivitas, berada di belakang setiap *sidebar*, *avatar*, *modal*, *dropdown*—setiap potongan UI yang anda liat di dalam *web*. +*Markup* ini merepresentasikan artikel `
              `, heading `

              ` dan daftar isi (yang disingkat) sebagai daftar yang tersusun `
                `. *Markup* seperti ini, digabung dengan CSS untuk *style*, dan *Javascript* untuk interaktivitas, berada di belakang setiap *sidebar*, *avatar*, *modal*, *dropdown*—setiap potongan UI yang Anda liat di dalam *web*. -React memungkinkan anda menggabung *markup*, CSS, dan *Javascript* anda menjadi "komponen" yang dibuat khusus, **elemen UI yang dapat digunakan kembali untuk aplikasi anda.** Daftar isi yang anda lihat di atas dapat diubah menjadi sebuah komponen `` yang dapat anda *render* pada setiap halaman. Dari belakang, itu tetap menggunakan *tag* HTML yang sama seperti `
                `, `h1`, dll. +React memungkinkan Anda menggabung *markup*, CSS, dan *Javascript* Anda menjadi "komponen" yang dibuat khusus, **elemen UI yang dapat digunakan kembali untuk aplikasi Anda.** Daftar isi yang Anda lihat di atas dapat diubah menjadi sebuah komponen `` yang dapat Anda *render* pada setiap halaman. Dari belakang, itu tetap menggunakan *tag* HTML yang sama seperti `
                `, `h1`, dll. -Sama seperti *tag* HTML, anda dapat menggabung, mengurut, dan menyusun bertingkat komponen untuk mendesain halaman penuh. Misalnya, halaman dokumentasi ini yang anda baca terbuat oleh komponen-komponen React: +Sama seperti *tag* HTML, Anda dapat menggabung, mengurut, dan menyusun bertingkat komponen untuk mendesain halaman penuh. Misalnya, halaman dokumentasi ini yang Anda baca terbuat oleh komponen-komponen React: ```js @@ -51,11 +51,11 @@ Sama seperti *tag* HTML, anda dapat menggabung, mengurut, dan menyusun bertingka ``` -Seiring berkembangnya proyek anda, anda akan memperhatikan bahwa banyak desain anda bisa dikomposisi dengan menggunakan ulang komponen-komponen yang sudah anda buat, mempercepatkan perkembangan proyek anda. Daftar isi kita di atas bisa disertakan pada layar apapun dengan ``! Anda bisa memulai proyek anda dengan cepat menggunakan ribuan komponen-komponen yang dibagi oleh komunitas *open source* React seperti [Chakra UI](https://chakra-ui.com/) dan [Material UI.](https://material-ui.com/) +Seiring berkembangnya proyek Anda, Anda akan memperhatikan bahwa banyak desain Anda bisa dikomposisi dengan menggunakan ulang komponen-komponen yang sudah Anda buat, mempercepatkan perkembangan proyek Anda. Daftar isi kita di atas bisa disertakan pada layar apapun dengan ``! Anda bisa memulai proyek Anda dengan cepat menggunakan ribuan komponen-komponen yang dibagi oleh komunitas *open source* React seperti [Chakra UI](https://chakra-ui.com/) dan [Material UI.](https://material-ui.com/) ## Mendefinisikan suatu komponen {/*defining-a-component*/} -Secara tradisional saat menciptakan halaman *web*, para *web developer* me-*mark-up* konten mereka kemudian menambahkan interaksi dengan sedikit *Javascript*. Ini bekerja dengan baik ketika interaksi hanya menyenangkan-untuk-dimiliki di dalam *web*. Sekarang ini diharapkan banyak situs dan semua aplikasi. React mengutamakan interaktivitas dengan tetap menggunakan teknologi yang sama: **Sebuah komponen React adalah sebuah fungsi _Javascript_ yang dapat anda _tambahkan dengan markup_.** Inilah tampilannya (anda bisa sunting contoh di bawah ini): +Secara tradisional saat menciptakan halaman *web*, para pengembang *web* me-*mark-up* konten mereka kemudian menambahkan interaksi dengan sedikit *Javascript*. Ini bekerja dengan baik ketika interaksi hanya menyenangkan-untuk-dimiliki di dalam *web*. Sekarang ini diharapkan banyak situs dan semua aplikasi. React mengutamakan interaktivitas dengan tetap menggunakan teknologi yang sama: **Sebuah komponen React adalah sebuah fungsi _Javascript_ yang dapat Anda _tambahkan dengan markup_.** Inilah tampilannya (Anda bisa sunting contoh di bawah ini): @@ -80,11 +80,11 @@ Dan ini bagaimana cara membuat sebuah komponen: ### Langkah 1: Eksport komponennya {/*step-1-export-the-component*/} -awalan `export default` adalah sebuah [sintaksis *Javascript* standar](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (tidak spesifik kepada React). Itu memungkinkan anda menandai fungsi utama di sebuah file supaya anda bisa mengimport itu dari *file-file* lain nantinya. (Lebih lanjut tentang mengimport di [Mengimport dan Mengeksport Komponen](/learn/importing-and-exporting-components)!) +awalan `export default` adalah sebuah [sintaksis *Javascript* standar](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (tidak spesifik kepada React). Itu memungkinkan Anda menandai fungsi utama di sebuah file supaya Anda bisa mengimport itu dari *file-file* lain nantinya. (Lebih lanjut tentang mengimport di [Mengimport dan Mengeksport Komponen](/learn/importing-and-exporting-components)!) ### Langkah 2: Definisikan fungsinya {/*step-2-define-the-function*/} -Dengan `function Profile() { }` anda mendefinisikan fungsi *Javascript* dengan nama `Profile`. +Dengan `function Profile() { }` Anda mendefinisikan fungsi *Javascript* dengan nama `Profile`. @@ -94,7 +94,7 @@ Komponen React adalah fungsi *Javascript* biasa, tetapi **nama mereka harus dimu ### Langkah 3: Tambahkan *markup* {/*step-3-add-markup*/} -Komponen itu mengembalikan *tag* `` dengan atribut `src` dan `alt`. `` ditulis seperti HTML, tetapi ini sebenarnya merupakan *Javascript* di belakang! Sintaksis ini disebut [JSX](/learn/writing-markup-with-jsx), dan ini memungkinkan anda untuk *embed* *markup* di dalam *Javascript*. +Komponen itu mengembalikan *tag* `` dengan atribut `src` dan `alt`. `` ditulis seperti HTML, tetapi ini sebenarnya merupakan *Javascript* di belakang! Sintaksis ini disebut [JSX](/learn/writing-markup-with-jsx), dan ini memungkinkan Anda untuk *embed* *markup* di dalam *Javascript*. Pernyataan-pernyataan yang dikembalikan bisa ditulis semua pada satu baris, seperti dalam komponen ini. @@ -102,7 +102,7 @@ Pernyataan-pernyataan yang dikembalikan bisa ditulis semua pada satu baris, sepe return Katherine Johnson; ``` -Tetapi jika *markup* anda tidak semua ada di baris yang sama dengan *keyword* `return`, anda harus membungkus itu dalam tanda kurung: +Tetapi jika *markup* Anda tidak semua ada di baris yang sama dengan *keyword* `return`, Anda harus membungkus itu dalam tanda kurung: ```js return ( @@ -120,7 +120,7 @@ Tanpa tanda kurung, kode apapun di baris-baris setelah `return` [akan diabaikan] ## Menggunakan suatu komponen {/*using-a-component*/} -Sekarang setelah anda mendefinisikan komponen `Profile` anda, anda bisa meletakkan itu di dalam komponen-komponen lain secara bertingkat. Misalnya, anda bisa eksport sebuah komponen `Gallery` yang menggunakan beberapa komponen `Profile`: +Sekarang setelah Anda mendefinisikan komponen `Profile` Anda, Anda bisa meletakkan itu di dalam komponen-komponen lain secara bertingkat. Misalnya, Anda bisa eksport sebuah komponen `Gallery` yang menggunakan beberapa komponen `Profile`: @@ -152,14 +152,14 @@ img { margin: 0 10px 10px 0; height: 90px; } -### Apa yang dilihat oleh *browser* {/*what-the-browser-sees*/} +### Apa yang dilihat oleh peramban {/*what-the-browser-sees*/} Perhatikanlah perbedaan pada huruf kapitalisasi: * `
                ` dimulai dengan huruf kecil, supaya React mengetahui bahwa kita merujuk pada *tag* HTML. * `` dimulai dengan huruf kapital `P`, supaya React mengetahui bahwa kita ingin menggunakan komponen kita bernama `Profile`. -Dan `Profile` berisi lebih banyak HTML: ``. Pada akhirnya, inilah yang dilihat oleh *browser*: +Dan `Profile` berisi lebih banyak HTML: ``. Pada akhirnya, inilah yang dilihat oleh peramban: ```html
                @@ -172,13 +172,13 @@ Dan `Profile` berisi lebih banyak HTML: ``. Pada akhirnya, inilah yang di ### Menyusun secara bertingkat dan mengorganisir komponen {/*nesting-and-organizing-components*/} -Komponen adalah fungsi *Javascript* biasa, sehingga anda bisa menjaga beberapa komponen di dalam *file* yang sama. Ini nyaman ketika komponen-komponen relatif kecil atau saling terkait secara erat. Jika *file* ini menjadi ramai, anda selalu bisa memindahkan `Profile` kepada suatu *file* yang beda. Anda akan belajar bagaimana cara melakukan ini segera di [halaman tentang import.](/learn/importing-and-exporting-components) +Komponen adalah fungsi *Javascript* biasa, sehingga Anda bisa menjaga beberapa komponen di dalam *file* yang sama. Ini nyaman ketika komponen-komponen relatif kecil atau saling terkait secara erat. Jika *file* ini menjadi ramai, Anda selalu bisa memindahkan `Profile` kepada suatu *file* yang beda. Anda akan belajar bagaimana cara melakukan ini segera di [halaman tentang import.](/learn/importing-and-exporting-components) -Karena komponen-komponen `Profile` di-*render* di dalam `Gallery`—bahkan beberapa kali!—kita dapat mengatakan bahwa `Gallery` adalah sebuah **komponen induk,** yang me-*render* setiap `Profile` sebagai sebuah "anak". Ini merupakan bagian ajaib dari React: anda bisa mendefinisikan suatu komponen sekali, kemudian digunakan di banyak tempat dan sebanyak kali yang anda suka. +Karena komponen-komponen `Profile` di-*render* di dalam `Gallery`—bahkan beberapa kali!—kita dapat mengatakan bahwa `Gallery` adalah sebuah **komponen induk,** yang me-*render* setiap `Profile` sebagai sebuah "anak". Ini merupakan bagian ajaib dari React: Anda bisa mendefinisikan suatu komponen sekali, kemudian digunakan di banyak tempat dan sebanyak kali yang Anda suka. -Komponen dapat me-*render* komponen lain, tetapi **anda tidak boleh menyusun definisinya secara bertingkat:** +Komponen dapat me-*render* komponen lain, tetapi **Anda tidak boleh menyusun definisinya secara bertingkat:** ```js {2-5} export default function Gallery() { @@ -211,11 +211,11 @@ Ketika suatu komponen anak membutuhkan data dari suatu induk, [operkan data mela #### Komponen sampai ke bawah {/*components-all-the-way-down*/} -Aplikasi React anda dimulai dari suatu komponen "*root*". Biasanya, itu dibuat secara otomatis saat anda memulai proyek baru. Misalnya, jika anda menggunakan [CodeSandbox](https://codesandbox.io/) atau [Create React App](https://create-react-app.dev/), komponen *root* didefinisikan di `src/App.js`. Jika anda menggunakan *framework* [Next.js](https://nextjs.org/), komponen *root* didefinisikan di `pages/index.js`. Dalam contoh-contoh berikut, anda telah mengeksport komponen-komponen *root*. +Aplikasi React Anda dimulai dari suatu komponen "*root*". Biasanya, itu dibuat secara otomatis saat Anda memulai proyek baru. Misalnya, jika Anda menggunakan [CodeSandbox](https://codesandbox.io/) atau [Create React App](https://create-react-app.dev/), komponen *root* didefinisikan di `src/App.js`. Jika Anda menggunakan *framework* [Next.js](https://nextjs.org/), komponen *root* didefinisikan di `pages/index.js`. Dalam contoh-contoh berikut, Anda telah mengeksport komponen-komponen *root*. -Sebagian besar aplikasi React menggunakan komponen sampai ke bawah. Ini berarti anda tidak akan hanya menggunakan komponen untuk bagian-bagian yang dapat digunakan kembali seperti tombol, tetapi juga bagian-bagian yang lebih besar seperti *sidebar*, daftar, dan juga, halaman lengkap! Komponen adalah sebuah cara yang praktis untuk mengorganisir kode UI dan *markup*, bahkan jika beberapa darinya hanya digunakan sekali. +Sebagian besar aplikasi React menggunakan komponen sampai ke bawah. Ini berarti Anda tidak akan hanya menggunakan komponen untuk bagian-bagian yang dapat digunakan kembali seperti tombol, tetapi juga bagian-bagian yang lebih besar seperti *sidebar*, daftar, dan juga, halaman lengkap! Komponen adalah sebuah cara yang praktis untuk mengorganisir kode UI dan *markup*, bahkan jika beberapa darinya hanya digunakan sekali. -[*Framework-framework* berbasis React](/learn/start-a-new-react-project) mengambil ini selangkah lebih jauh. Daripada menggunakan sebuah *file* HTML yang kosong dan membiarkan React untuk "mengambil alih" dalam mengelola halamannya dengan *Javascript*, mereka *juga* membuat HTML-nya secara otomatis dari komponen-komponen React anda. Ini memungkinkan aplikasi anda menampilkan beberapa konten sebelum kode *Javascript* dimuat. +[*Framework-framework* berbasis React](/learn/start-a-new-react-project) mengambil ini selangkah lebih jauh. Daripada menggunakan sebuah *file* HTML yang kosong dan membiarkan React untuk "mengambil alih" dalam mengelola halamannya dengan *Javascript*, mereka *juga* membuat HTML-nya secara otomatis dari komponen-komponen React Anda. Ini memungkinkan aplikasi Anda menampilkan beberapa konten sebelum kode *Javascript* dimuat. Namun, banyak *website* hanya menggunakan React untuk [menambahkan interaktivitas kepada halaman HTML yang sudah ada.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Mereka memiliki banya komponen *root* daripada satu untuk seluruh halaman. Anda dapat menggunakan React sebanyaknya-banyaknya—atau sesedikit mungkin—sesuai dengan yang dibutuhkan. @@ -223,9 +223,9 @@ Namun, banyak *website* hanya menggunakan React untuk [menambahkan interaktivita -Anda baru saja mendapatkan rasa pertama anda dari React! Mari kita rekap beberapa poin penting. +Anda baru saja mendapatkan rasa pertama Anda dari React! Mari kita rekap beberapa poin penting. -* React memungkinkan anda untuk membuat komponen, **elemen UI yang dapat digunakan kembali untuk aplikasi anda** +* React memungkinkan Anda untuk membuat komponen, **elemen UI yang dapat digunakan kembali untuk aplikasi Anda** * Dalam suatu aplikasi React, setiap bagian dari UI adalah sebuah komponen. * Komponen React adalah fungsi *Javascript* biasa kecuali: @@ -292,7 +292,7 @@ Anda mungkin heran mengapa menulis `export` sendiri tidak cukup untuk memperbaik #### Perbaikilah pernyataan pengembalian {/*fix-the-return-statement*/} -Ada yang tidak benar tentang pernyataan `return` ini. Dapatkah anda memperbaikinya? +Ada yang tidak benar tentang pernyataan `return` ini. Dapatkah Anda memperbaikinya? @@ -359,7 +359,7 @@ img { height: 180px; } #### Temukanlah kesalahannya {/*spot-the-mistake*/} -Ada yang salah dengan bagaimana komponen `Profile` dideklarasi dan digunakan. Dapatkah anda temukan masalahnya? (Coba untuk mengingat kembali bagaimana React membedakan komponen dengan *tag* HTML biasa!) +Ada yang salah dengan bagaimana komponen `Profile` dideklarasi dan digunakan. Dapatkah Anda temukan masalahnya? (Coba untuk mengingat kembali bagaimana React membedakan komponen dengan *tag* HTML biasa!) @@ -429,14 +429,14 @@ img { margin: 0 10px 10px 0; } -#### Komponen anda sendiri {/*your-own-component*/} +#### Komponen Anda sendiri {/*your-own-component*/} -Tulislah sebuah komponen dari awal. Anda bisa memberikannya nama apapun yang benar dan mengembalikan *markup* apapun. Jika anda kehabisan ide, anda bisa tulis sebuah komponen `Congratuliations` yang menampilkan `

                Kerja bagus!

                `. Jangan lupa untuk dieksport! +Tulislah sebuah komponen dari awal. Anda bisa memberikannya nama apapun yang benar dan mengembalikan *markup* apapun. Jika Anda kehabisan ide, Anda bisa tulis sebuah komponen `Congratuliations` yang menampilkan `

                Kerja bagus!

                `. Jangan lupa untuk dieksport! ```js -// Tulislah komponen anda di bawah ini! +// Tulislah komponen Anda di bawah ini! ``` From 3daaaac961a8e44ef642ebed9be13a4e706a5b5c Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Thu, 27 Apr 2023 09:33:30 +0700 Subject: [PATCH 4/4] Apply suggestions from code review --- src/content/learn/your-first-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index ff7c47498..ee1a98dcf 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -296,7 +296,7 @@ Ada yang tidak benar tentang pernyataan `return` ini. Dapatkah Anda memperbaikin -Anda mungkin mendapatakan sebuah kesalahan "*Unexpected Token*" saat mencoba memperbaiki ini. Dalam hal itu, cek kembali bahwa titik koma muncul *setelah* tanda kurung. Meletakkan suatu titik koma di dalam `return ( )` akan mengakibatkan sebuah kesalahan. +Anda mungkin mendapatkan sebuah kesalahan "*Unexpected Token*" saat mencoba memperbaiki ini. Dalam hal itu, cek kembali bahwa titik koma muncul *setelah* tanda kurung. Meletakkan suatu titik koma di dalam `return ( )` akan mengakibatkan sebuah kesalahan.