From 2f2fc79ecbb15004679368a5b8e0124a6993bf04 Mon Sep 17 00:00:00 2001 From: regalius Date: Wed, 6 Mar 2019 00:53:12 +0700 Subject: [PATCH] docs(add-react-to-a-website): translate add react to a website --- content/docs/add-react-to-a-website.md | 405 +++++++++++++------------ 1 file changed, 203 insertions(+), 202 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 6a668e0a1..7c0a3d285 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,202 +1,203 @@ ---- -id: add-react-to-a-website -title: Add React to a Website -permalink: docs/add-react-to-a-website.html -redirect_from: - - "docs/add-react-to-an-existing-app.html" -prev: getting-started.html -next: create-a-new-react-app.html ---- - -Use as little or as much React as you need. - -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. - -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. - ---- - -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) - -## Add React in One Minute {#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. - -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.** - -Optional: [Download the full example (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} - -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: - -```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. - ->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. - -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} - -Next, add three ` - - - - - - -``` - -The first two tags load React. The third one will load your component code. - -### Step 3: Create a React Component {#step-3-create-a-react-component} - -Create a file called `like_button.js` next to your HTML page. - -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. - ->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! - -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: - -```js{3,4} -// ... the starter code you pasted ... - -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. - -### That's It! {#thats-it} - -There is no step four. **You have just added the first React component to your website.** - -Check out the next sections for more tips on integrating React. - -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** - -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** - -### Tip: Reuse a Component {#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: - -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) - -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) - ->Note -> ->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. - -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} - -Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. - -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`: - -```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). - -## Optional: Try React with 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: - -```js -const e = React.createElement; - -// Display a "Like" -); -``` - -These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries. - -You can play with JSX using [this online converter](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). - -### Quickly Try JSX {#quickly-try-jsx} - -The quickest way to try JSX in your project is to add this ` -``` - -Now you can use JSX in any ` + + + + + + +``` + +*Tag* pertama dan kedua akan memuat React. *Tag* ketiga akan memuat kode komponen Anda. + + +### Langkah 3: Buat Sebuah Komponen React {#step-3-create-a-react-component} + +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 +> +>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! + +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} +// ... kode permulaan yang telah Anda paste ... + +const domContainer = document.querySelector('#like_button_container'); +ReactDOM.render(e(LikeButton), domContainer); +``` + +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. + +### Itu Saja! {#thats-it} + +Tidak ada langkah ke empat. **Anda baru saja menambahkan komponen React pertama pada situs Anda** + +Kunjungi bagian-bagian berikutnya untuk tips lebih lanjut mengenai mengintegrasikan React. + +**[Lihat contoh kode sumber lengkapnya](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** + +**[Unduh contoh lengkapnya (2KB *zipped*)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** + +### Tip: Penggunaan Ulang Sebuah Komponen {#tip-reuse-a-component} + +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. + +[Lihat contoh kode sumber lengkapnya](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) + +[Unduh contoh lengkapnya (2KB *zipped*)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) + +>Catatan +> +>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: Minifikasi JavaScript untuk Production {#tip-minify-javascript-for-production} + +Sebelum men-*deploy* situs Anda ke *production*, berhati-hatilah terhadap JavaScript yang belum diminifikasi yang dapat secara signifikan memperlambat laman untuk pengguna Anda. + +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 + + +``` + +Jika Anda belum memiliki proses minifikasi untuk *script* Anda, [berikut salah satu cara untuk mempersiapkannya](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). + +## Opsional: Mencoba React dengan JSX {#optional-try-react-with-jsx} + +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; + +// Tampilkan sebuah +); +``` + +Kedua potongan kode di atas akan menghasilkan hal yang sama. Meskipun **JSX bersifat [opsional sepenuhnya](/docs/react-without-jsx.html)**, banyak orang yang menganggapnya berguna untuk menuliskan kode antarmuka pengguna -- dengan menggunakan React maupun *library* lainnya. + +Anda dapat bermain-main dengan JSX menggunakan [konverter daring ini](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). + +### Mencoba JSX Secara Cepat {#quickly-try-jsx} + +Cara tercepat untuk mencoba JSX di proyek Anda adalah dengan menambahkan *tag* ` +``` + +Sekarang Anda dapat menggunakan JSX di *tag* `