diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index b103cfae4..a35fdd7e3 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: Menambahkan React pada Sebuah Situs permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,127 +8,128 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +Anda dapat menggunakan React sesedikit atau sebanyak mungkin sesuai kebutuhan Anda. -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +React telah didesain dari awal untuk adopsi secara bertahap, dan **Anda dapat menggunakan React sesedikit atau sebanyak mungkin sesuai kebutuhan Anda**. Mungkin Anda hanya ingin menambahkan "sedikit interaktivitas" di laman yang sudah ada. Komponen React adalah cara yang tepat untuk melakukan hal tersebut. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +Mayoritas situs bukan, dan tidak perlu, untuk bersifat *Single Page Application*. Dengan **beberapa baris kode dan tanpa *build tool***, Anda dapat mencoba React di bagian kecil dari situs Anda. Anda kemudian dapat secara bertahap memperluas penggunaannya, atau membiarkannya berada di beberapa *widget* yang dinamis saja. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [Tambahkan React Dalam Satu Menit](#add-react-in-one-minute) +- [Opsional: Mencoba React Dengan JSX](#optional-try-react-with-jsx) (no bundler necessary!) -## Add React in One Minute {#add-react-in-one-minute} +## Tambahkan React Dalam Satu Menit {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +Pada bagian ini, kami akan menunjukkan bagaimana Anda dapat menambahkan sebuah komponen React ke laman HTML yang sudah ada. Anda dapat mengikuti dengan situs Anda sendiri, atau dengan membuat sebuah berkas HTML kosong untuk berlatih. -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +Di sini tidak akan ada alat yang membingungkan atau persyaratan pemasangan apapun -- **untuk menyelesaikan bagian ini, Anda hanya butuh koneksi internet, dan semenit dari waktu Anda** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Opsional: [Unduh contoh lengkap (2KB *zipped*)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### Langkah 1: Tambahkan sebuah Kontainer DOM ke dalam HTML {#step-1-add-a-dom-container-to-the-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +Pertama, buka laman HTML yang ingin Anda sunting. Tambahkan sebuah *tag* `
` kosong untuk menandai di mana Anda ingin menampilkan sesuatu dengan React. Sebagai contoh: ```html{3} - +
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +Kita memberikan atribut HTML `id` yang unik kepada `
` ini. Hal ini memungkinkan kita untuk menemukannya dari kode JavaScript nantinya dan menampilkan sebuah komponen React di dalamnya. >Tip > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +>Anda dapat menaruh sebuah `
` kontainer seperti ini **di mana saja** di dalam *tag* ``. Anda dapat memiliki sebanyak apapun kontainer DOM independen dalam satu laman sesuai yang Anda butuhkan. Mereka biasanya kosong -- React akan menimpa konten apapun yang berada di dalam kontainer DOM. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Langkah 2: Tambahkan Tag Script {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +*Tag* pertama dan kedua akan memuat React. *Tag* ketiga akan memuat kode komponen Anda. -### Step 3: Create a React Component {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +### Langkah 3: Buat Sebuah Komponen React {#step-3-create-a-react-component} -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Buat sebuah berkas bernama `like_button.js` tepat disebelah berkas laman HTML Anda. + +Buka **[kode permulaan](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** dan *paste*-kan kode tersebut ke berkas yang baru saja Anda buat. >Tip > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>Kode ini mendefinisikan sebuah komponen React bernama `LikeButton`. Jangan khawatir jika Anda belum memahaminya -- kita akan membahas blok-blok pembangun React nantinya di [tutorial langsung](/tutorial/tutorial.html) dan [panduan konsep utama](/docs/hello-world.html). Untuk sekarang, mari kita fokus untuk membuatnya muncul di layar terlebih dahulu! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +Setelah **[kode permulaan](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, tambahkan dua barus di bawah berkas `like_button.js`: ```js{3,4} -// ... the starter code you pasted ... +// ... kode permulaan yang telah Anda paste ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +Kedua baris kode di atas akan menemukan `
` yang telah kita tambahkan ke HTML kita di langkah pertama, kemudian menampilkan komponen React tombol "Like" kita di dalamnya. -### That's It! {#thats-it} +### Itu Saja! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +Tidak ada langkah ke empat. **Anda baru saja menambahkan komponen React pertama pada situs Anda** -Check out the next sections for more tips on integrating React. +Kunjungi bagian-bagian berikutnya untuk tips lebih lanjut mengenai mengintegrasikan React. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Lihat contoh kode sumber lengkapnya](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Unduh contoh lengkapnya (2KB *zipped*)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Tip: Penggunaan Ulang Sebuah Komponen {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +Umumnya, Anda mungkin ingin menampilkan komponen React di berbagai tempat di laman HTML. Ini adalah sebuah contoh untuk menampilkan tombol "Like" tiga kali dan mengoperkan data ke dalamnya. -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Lihat contoh kode sumber lengkapnya](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Unduh contoh lengkapnya (2KB *zipped*)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Catatan > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>Strategi ini akan lebih berguna untuk penggunaan React di bagian-bagian laman yang terisolasi satu sama lain. Di dalam kode React sendiri, akan lebih mudah menggunakan [komposisi komponen](/docs/components-and-props.html#composing-components). -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Tip: Minifikasi JavaScript untuk Production {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. +Sebelum men-*deploy* situs Anda ke *production*, berhati-hatilah terhadap JavaScript yang belum diminifikasi yang dapat secara signifikan memperlambat laman untuk pengguna Anda. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +Jika Anda telah meminifikasi *script* aplikasi, **situs Anda telah siap untuk *production*** jika Anda telah memastikan HTML yang ter-*deploy* memuat versi React yang berakhiran dengan `production.min.js`: ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +Jika Anda belum memiliki proses minifikasi untuk *script* Anda, [berikut salah satu cara untuk mempersiapkannya](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Opsional: Mencoba React dengan JSX {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +Pada contoh di atas, kita hanya bergantung pada fitur-fitur yang secara langsung didukung oleh *browser*. Inilah alasan mengapa kita menggunakan sebuah fungsi JavaScript untuk memberitahukan React apa yang akan ditampilkan: ```js const e = React.createElement; -// Display a "Like"