You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/your-first-component.md
+10-10Lines changed: 10 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -31,9 +31,9 @@ Di dalam *web*, HTML memungkinkan kita membuat dokumen-dokumen terstruktur yang
31
31
</article>
32
32
```
33
33
34
-
*Markup* ini merepresentasikan artikel `<article>`, heading `<h1>` dan daftar isi (yang disingkat) sebagai daftar yang tersusun `<ol>`. *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*.
34
+
*Markup* ini merepresentasikan artikel `<article>`, heading `<h1>` dan daftar isi (yang disingkat) sebagai daftar yang tersusun `<ol>`. *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*.
35
35
36
-
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 `<TableOfContents />` yang dapat Anda *render* pada setiap halaman. Dari belakang, itu tetap menggunakan *tag* HTML yang sama seperti `<article>`, `h1`, dll.
36
+
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 `<TableOfContents />` yang dapat Anda *render* pada setiap halaman. Dari belakang, itu tetap menggunakan *tag* HTML yang sama seperti `<article>`, `h1`, dll.
37
37
38
38
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:
39
39
@@ -55,7 +55,7 @@ Seiring berkembangnya proyek Anda, Anda akan memperhatikan bahwa banyak desain A
55
55
56
56
## Mendefinisikan suatu komponen {/*defining-a-component*/}
57
57
58
-
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):
58
+
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):
59
59
60
60
<Sandpack>
61
61
@@ -80,21 +80,21 @@ Dan ini bagaimana cara membuat sebuah komponen:
80
80
81
81
### Langkah 1: Eksport komponennya {/*step-1-export-the-component*/}
82
82
83
-
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)!)
83
+
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)!)
Komponen itu mengembalikan *tag*`<img />` dengan atribut `src` dan `alt`. `<img />` 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*.
97
+
Komponen itu mengembalikan *tag*`<img />` dengan atribut `src` dan `alt`. `<img />` 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.
98
98
99
99
Pernyataan-pernyataan yang dikembalikan bisa ditulis semua pada satu baris, seperti dalam komponen ini.
100
100
@@ -172,7 +172,7 @@ Dan `Profile` berisi lebih banyak HTML: `<img />`. Pada akhirnya, inilah yang di
172
172
173
173
### Menyusun secara bertingkat dan mengorganisir komponen {/*nesting-and-organizing-components*/}
174
174
175
-
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)
175
+
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)
176
176
177
177
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.
178
178
@@ -215,7 +215,7 @@ Aplikasi React Anda dimulai dari suatu komponen "*root*". Biasanya, itu dibuat s
215
215
216
216
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.
217
217
218
-
[*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.
218
+
[*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.
219
219
220
220
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.
221
221
@@ -227,7 +227,7 @@ Anda baru saja mendapatkan rasa pertama Anda dari React! Mari kita rekap beberap
227
227
228
228
* React memungkinkan Anda untuk membuat komponen, **elemen UI yang dapat digunakan kembali untuk aplikasi Anda**
229
229
* Dalam suatu aplikasi React, setiap bagian dari UI adalah sebuah komponen.
230
-
* Komponen React adalah fungsi *Javascript* biasa kecuali:
230
+
* Komponen React adalah fungsi JavaScript biasa kecuali:
231
231
232
232
1. Nama mereka selalu dimulai dengan huruf kapital.
0 commit comments