From ab6544a50b018542b04fefa688234b868f7e488d Mon Sep 17 00:00:00 2001
From: "Moch. Ainun Najib" <ec2ainun@gmail.com>
Date: Sat, 22 Jul 2017 18:28:29 +0700
Subject: [PATCH 1/3] Create README-ina.md

---
 README-ina.md | 112 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 README-ina.md

diff --git a/README-ina.md b/README-ina.md
new file mode 100644
index 0000000..e8c4bd3
--- /dev/null
+++ b/README-ina.md
@@ -0,0 +1,112 @@
+# react-howto
+
+jika kamu Newbie dengan istilah React (atau istilah frontend secara umum), kamu akan sedikit kebingungan dengan ekosistem yang digunakan dalam teknologi React ini. Inilah alasannya:
+
+* React Teknologi hanya ditujukan untuk early-adopters(Pengadopsi awal) dan para ahli dibidangnya.
+* Facebook hanya meng-open-source teknologinya saja, sehingga tidak fokus dalam menyediakan alat untuk men-develop project yang lebih-kecil-dari-facebook
+* Marketing yang digunakan seperti React Guide tidak cukup mudah dicerna orang awam
+
+Di Tulisan ini, saya mengasumsikan kamu pernah membuat webpage menggukan HTML, CSS, dan JavaScript.
+
+## Kenapa mempercayai saya?
+
+Banyak sekali saran yang kontradiktif dalam penggunaan React diluar sana; kenapa mempercayai saya?
+
+Saya merupakan salah satu anggota dari tim Facebook yang membangun teknologi React. Saat ini saya tidak lagi dalam tim Facebook, sekarang saya sedang membangun startup kecil, sehingga saya mempunyai perspective dari luar facebook juga.
+
+## Bagaimana Mengatasi Masalah Ekosistem teknologi React
+
+Semua Software yang ada dibuat menggunakan berbagai teknologi, dan kamu harus cukup paham dalam mengaplikasikan berbagai teknologi tersebut dalam aplikasi yang kamu buat, Alasannya karena alat yang digunakan dalam ekosistem teknologi React ini terlihat sangat banyak, dan selalu dijelaskan dengan urutan yang salah.
+
+Kamu harus memahami sesuai dengan urutan dibawah ini, **tanpa melewati ataupun memahaminya secara acak**:
+
+* [Teknologi React](#teknologi-react)
+* [`npm`](#learning-npm)
+* [JavaScript “bundlers”](#learning-javascript-bundlers)
+* [ES6](#learning-es6)
+* [Routing](#learning-routing)
+* [Flux](#learning-flux)
+
+**Kamu tidak perlu untuk memahami semua teknologi ini untuk produktif dengan React.** Berpindalah ke langkah selanjutnya jika memiliki masalah yang perlu untuk dipecahkan.
+
+Sebagai tambahan, terdapat beberapa topik yang sering disebut dalam Komunitas React, termasuk "Approach terbaru". Topik dibawah ini sangat menarik, tapi cukup sulit untuk dipahami orang awam, dan tidak cukup populer dibandingkan topik diatas, serta **tidak selalu dibutuhkan untuk kebanyakan aplikasi.**
+* [Inline styles](#learning-inline-styles)
+* [Server rendering](#learning-server-rendering)
+* [Immutable.js](#learning-immutablejs)
+* [Relay, Falcor, etc](#learning-relay-falcor-etc)
+
+## Teknologi React
+
+Sudah menjadi miskonsepsi umum jika kamu perlu membuang banyak waktu dalam menyiapkan kebutuhan (IDE, ataupun dependensi) untuk memulai memahami React. Di dokumentasi resminya, kamu akan menemukan [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) yang dapat disimpan dalam bentuk `.html` file dan dapat langsung digunakan. **Tidak perlu IDE yang siap ataupun dependensi lain yang dibutuhkan dalam langkah ini, dan jangan mulai mempelajari teknologi tersebut sampai kamu nyaman dengan dasar penggunaan React**
+
+saya pikir bahwa cara termudah dalam mempelajari React yaitu dengan berdasarkan [tutorial resmi](https://facebook.github.io/react/docs/tutorial.html).
+
+## Learning `npm`
+
+`npm` merupakan Node.js package manager dan merupakan cara paling populer yang digunakan orang front-end dan designer dalam membagikan JavaScript code mereka. termasuk system modul yang disebut `CommonJS` dan sehingga memungkinkan untuk menginstall command-line tools yang ditulis dalam JavaScript. Baca [post ini](http://0fps.net/2013/01/22/commonjs-why-and-how/) untuk dasar kenapa `CommonJS` dibutuhkan untuk browser, atau [CommonJS Wiki](http://wiki.commonjs.org/wiki/Introduction) untuk memahami lebih lanjut tentang `CommonJS` API.
+
+Component, libaray, dan modul lain yang paling sering digunakan dan terkait dengan ekosistem React juga tersedia seperti modul `CommonJS` dan dapat di install dengan `npm`.
+
+## Learning JavaScript bundlers
+
+For a number of good technical reasons `CommonJS` modules (i.e. everything in `npm`) cannot be used natively in the browser. You need a JavaScript “bundler” to “bundle” these modules into `.js` files that you can include in your web page with a `<script>` tag.
+
+Examples of JavaScript bundlers include `webpack` and `browserify`. Both are good choices, but I prefer `webpack` since it has a lot of features that make development of large apps easier. Since its documentation can be confusing, I have a [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) and I wrote a [how-to guide for webpack](https://github.com/petehunt/webpack-howto) for more complex use cases.
+
+React also now offers [an officially supported CLI tool called Create React App](https://github.com/facebookincubator/create-react-app). It lets you create React projects powered by `webpack` without any configuration. It has its limitations, but it can serve as a great starting point, and its updates will add more features over time. It also offers an "ejection" feature that copies all configs and dependencies into your project so you have full control over them.
+
+One thing to keep in mind: `CommonJS` uses the `require()` function to import modules, so a lot of people get confused and think that it has something to do with a project called `require.js`. For a number of technical reasons, I would suggest that you avoid `require.js`. It’s also not very popular in the React ecosystem.
+
+## Learning ES6
+
+Outside of JSX (which you learned in the React tutorial), you may see some funny syntax in React examples. This is called ES6, and it’s the latest version of JavaScript so you may not have learned it yet. Since it’s so new, it’s not supported in browsers yet, but your bundler can translate it for you with the proper configuration.
+
+If you just want to get things done with React, **you can skip learning ES6**, or try to pick it up along the way.
+
+You may see some talk about ES6 classes being the preferred way to create React components. This is untrue. Most people (including Facebook) are using `React.createClass()`.
+
+## Learning routing
+
+“Single-page applications” are all the rage these days. These are web pages that load once, and when the user clicks on a link or a button, JavaScript running on the page updates the address bar, but the web page is not refreshed. Management of the address bar is done by something called a **router**.
+
+The most popular router in the React ecosystem is [react-router](https://github.com/rackt/react-router). If you’re building a single-page application, use it unless you have a good reason not to.
+
+**Don’t use a router if you aren’t building a single-page application**. Most projects start out as smaller components inside of a larger application anyway.
+
+## Learning Flux
+
+You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.
+
+A lot of people sit down to build an app and want to define their data model, and they think they need to use Flux to do it. **This is the wrong way to adopt Flux. Flux should only be added once many components have already been built.**
+
+React components are arranged in a hierarchy. Most of the time, your data model also follows a hierarchy. In these situations Flux doesn’t buy you much. Sometimes, however, your data model is not hierarchical. When your React components start to receive `props` that feel extraneous, or you have a small number of components starting to get very complex, then you might want to look into Flux.
+
+**You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.**
+
+If you have decided to use Flux, the most popular and well-documented Flux library is [Redux](http://redux.js.org/). There are *a lot* of alternatives out there, and you’ll be tempted to evaluate lots of them, but my advice is to just stick with the most popular one.
+
+## Learning inline styles
+
+Pre-React, a lot of people reused CSS styles with complicated style sheets built by preprocessors like SASS. Since React makes writing reusable components easy, your stylesheets can be less complicated. Many in the community (including myself) are experimenting with getting rid of stylesheets altogether.
+
+This is a fairly crazy idea for a number of reasons. It makes media queries more difficult, and it's possible that there are  performance limitations using this technique. **When starting out with React, just style things the way you normally would.**
+
+Once you've got a feel for how React works, you can look at alternate techniques. One popular one is [BEM](https://en.bem.info/). I recommend phasing out your CSS preprocessor, since React gives you a more powerful way to reuse styles (by reusing components) and your JavaScript bundler can generate more efficient stylesheets for you (I gave [a talk about this at OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). With that said, React, like any other JavaScript library, will work just fine with a CSS preprocessor.
+
+Alternatively, you can also use [CSS Modules](http://glenmaddern.com/articles/css-modules), more specifically [react-css-modules](https://github.com/gajus/react-css-modules). With CSS Modules you'll still write CSS (or SASS/LESS/Stylus), but you can manage and compose your CSS files like you'd do with inline styles in React. And you don't need to worry about managing your class names using methodologies like BEM, as this will be handled for you under the hood by the module system.
+
+## Learning server rendering
+
+Server rendering is often called "universal" or "isomorphic" JS. It means that you can take your React components and render them to static HTML on the server. This improves initial startup performance because the user does not need to wait for JS to download in order to see the initial UI, and React can re-use the server-rendered HTML so it doesn't need to generate it client-side.
+
+You need server rendering if you notice that your initial render is too slow or if you want to improve your search engine ranking. While it's true that Google now indexes client-rendered content, as of January 2016 every time it's been measured it's been shown to negatively affect ranking, potentially because of the performance penalty of client-side rendering.
+
+Server rendering still requires a lot of tooling to get right. Since it transparently supports React components written without server rendering in mind, you should build your app first and worry about server rendering later. You won't need to rewrite all of your components to support it.
+
+## Learning Immutable.js
+
+[Immutable.js](https://facebook.github.io/immutable-js/) provides a set of data structures that can help to solve certain performance issues when building React apps. It's a great library, and you'll probably use it a lot in your apps moving forward, but it's completely unnecessary until you have an appreciation of the performance implications. 
+
+## Learning Relay, Falcor etc
+
+These are technologies that help you reduce the number of AJAX requests. They’re still very cutting-edge, so if you don’t have a problem with too many AJAX requests, you don’t need Relay or Falcor.

From d023dd0fa7bf21b427b2f2d07b54587baca72826 Mon Sep 17 00:00:00 2001
From: "Moch. Ainun Najib" <ec2ainun@gmail.com>
Date: Sat, 22 Jul 2017 21:52:03 +0700
Subject: [PATCH 2/3] Update README-ina.md

---
 README-ina.md | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/README-ina.md b/README-ina.md
index e8c4bd3..d64bf4e 100644
--- a/README-ina.md
+++ b/README-ina.md
@@ -45,45 +45,45 @@ saya pikir bahwa cara termudah dalam mempelajari React yaitu dengan berdasarkan
 
 `npm` merupakan Node.js package manager dan merupakan cara paling populer yang digunakan orang front-end dan designer dalam membagikan JavaScript code mereka. termasuk system modul yang disebut `CommonJS` dan sehingga memungkinkan untuk menginstall command-line tools yang ditulis dalam JavaScript. Baca [post ini](http://0fps.net/2013/01/22/commonjs-why-and-how/) untuk dasar kenapa `CommonJS` dibutuhkan untuk browser, atau [CommonJS Wiki](http://wiki.commonjs.org/wiki/Introduction) untuk memahami lebih lanjut tentang `CommonJS` API.
 
-Component, libaray, dan modul lain yang paling sering digunakan dan terkait dengan ekosistem React juga tersedia seperti modul `CommonJS` dan dapat di install dengan `npm`.
+Component, library, dan modul lain yang paling sering digunakan dan terkait dengan ekosistem React juga tersedia seperti modul `CommonJS` dan dapat di install dengan `npm`.
 
 ## Learning JavaScript bundlers
 
-For a number of good technical reasons `CommonJS` modules (i.e. everything in `npm`) cannot be used natively in the browser. You need a JavaScript “bundler” to “bundle” these modules into `.js` files that you can include in your web page with a `<script>` tag.
+Untuk beberapa alasan teknikal yang baik modul `CommonJS` (dan semua yang ada di `npm`) tidak dapat digunakan secara native (di implementasikan secara spesifik) di dalam browser. kamu perlu JavaScript “bundler” untuk mem-“bundle” modul tersebut ke `.js` file yang nantinya di include ke dalam webpage dengan tag `<script>` .
 
-Examples of JavaScript bundlers include `webpack` and `browserify`. Both are good choices, but I prefer `webpack` since it has a lot of features that make development of large apps easier. Since its documentation can be confusing, I have a [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) and I wrote a [how-to guide for webpack](https://github.com/petehunt/webpack-howto) for more complex use cases.
+Contoh dari JavaScript bundlers adalah `webpack` and `browserify`. Keduanya merupakan pilihan yang bagus, tetapi saya lebih memilih `webpack` karena mempunyai banyak fitur yang membuat proses development dari aplikasi yang besar dan kompleks menjadi lebih mudah. karena dokumentasinya cukup rumit, saya punya [plug-and-play template untuk memulai](https://github.com/petehunt/react-webpack-template) dam saya juga menulis [panduan untuk webpack](https://github.com/petehunt/webpack-howto) untuk study kasus yang kompleks.
 
-React also now offers [an officially supported CLI tool called Create React App](https://github.com/facebookincubator/create-react-app). It lets you create React projects powered by `webpack` without any configuration. It has its limitations, but it can serve as a great starting point, and its updates will add more features over time. It also offers an "ejection" feature that copies all configs and dependencies into your project so you have full control over them.
+React juga menawarkan [secara resmi CLI tool yang disebut Create React App](https://github.com/facebookincubator/create-react-app). hal tersebut membuat kamu dapat membuat React project yang didukung oleh `webpack` tanpa configurasi. Tool tersebut terdapat batasan, tetapi dapat memberikanmu titik mulai yang bagus, dan Pembaruannya akan memberikan fitur tambahan. dan terdapat sebuah fitur "ejection" yang membuat semua konfigurasi dan dependensi yang ada di salin ke project mu, sehingga kamu punya kontrol penuh terhadap konfigurasi tersebut.
 
-One thing to keep in mind: `CommonJS` uses the `require()` function to import modules, so a lot of people get confused and think that it has something to do with a project called `require.js`. For a number of technical reasons, I would suggest that you avoid `require.js`. It’s also not very popular in the React ecosystem.
+Perlu diingat: `CommonJS` menggunakan `require()` untuk import modul yang ada, sehingga banyak orang bingung dan berfikir bahwa perlu dependensi/modul dari `require.js`. Untuk beberapa alasan teknikal, saya menyarankan untuk menghindari modul `require.js`. dan modul tersebut tidak populer di Ekositem React.
 
 ## Learning ES6
 
-Outside of JSX (which you learned in the React tutorial), you may see some funny syntax in React examples. This is called ES6, and it’s the latest version of JavaScript so you may not have learned it yet. Since it’s so new, it’s not supported in browsers yet, but your bundler can translate it for you with the proper configuration.
+Terlepas dari JSX (yang telah kamu pelajari di tutorial React), kamu mungkin menemukan beberapa syntax yang aneh dalam contohnya. Hal ini disebut ES6, dan merupakan versi terbaru dari JavaScript sehingga kamu belum mempelajarinya. Karena hal baru, teknologi tersebut belum di support oleh browser, tetapi modul “bundler” dapat menerjemahkannya untuk kamu dengan configurasi yang benar.
 
-If you just want to get things done with React, **you can skip learning ES6**, or try to pick it up along the way.
+jika kamu ingin menyelesaikan sesuatu dengan React secara cepat, **kamu dapat melewati ES6**, atau mencoba memahaminya dengan mengaplikasikannya langsung.
 
-You may see some talk about ES6 classes being the preferred way to create React components. This is untrue. Most people (including Facebook) are using `React.createClass()`.
+kamu mungkin mendengar bahwa ES6 class menjadi pilihan utama dalam membuat React component. hal ini salah. Kebanyakan orang (termasuk tim Facebook) menggunakan `React.createClass()`.
 
 ## Learning routing
 
-“Single-page applications” are all the rage these days. These are web pages that load once, and when the user clicks on a link or a button, JavaScript running on the page updates the address bar, but the web page is not refreshed. Management of the address bar is done by something called a **router**.
+Istilah “Single-page applications” sedang booming belakangan ini. SPA merupakan web pages yang di load sekali, dan ketika pengguna meng-click sebuah link atau tombol, JavaScript yang berjalan pada halaman tersebut meng-update address bar, tetapi web page tidak di refresh. Pengaturan dari address bar diatur oleh **router**.
 
-The most popular router in the React ecosystem is [react-router](https://github.com/rackt/react-router). If you’re building a single-page application, use it unless you have a good reason not to.
+Router paling populer di Ekosistem React adalah [react-router](https://github.com/rackt/react-router). jika kamu membuat SPA, gunakan react-router kecuali kamu memiliki alasan yang bagus untuk tidak menggunakannya.
 
-**Don’t use a router if you aren’t building a single-page application**. Most projects start out as smaller components inside of a larger application anyway.
+**jangan menggunakan router jika tidak membuat single-page application**. lagipula, Kebanyakan project dimulai dari komponen yang kecil yang nantinya membentuk aplikasi yang kompleks.
 
 ## Learning Flux
 
-You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.
+Kamu mungkin telah mengenal Flux. Terdapat *banyak sekali* misinformasi tentang Flux diluar sana.
 
-A lot of people sit down to build an app and want to define their data model, and they think they need to use Flux to do it. **This is the wrong way to adopt Flux. Flux should only be added once many components have already been built.**
+Banyak orang membuat aplikasi dan ingin mendefinisikan data model mereka, dan mereka berfikir untuk harus menggunakan Flux untuk melakukannya **Ini merupkan cara berfikir yang salah dalam mengadopsi teknologi Flux. Flux hanya harus ditambahkan saat telah terdapat banyak komponen.**
 
-React components are arranged in a hierarchy. Most of the time, your data model also follows a hierarchy. In these situations Flux doesn’t buy you much. Sometimes, however, your data model is not hierarchical. When your React components start to receive `props` that feel extraneous, or you have a small number of components starting to get very complex, then you might want to look into Flux.
+React komponen disusun sesuai hirarki. Kebanyakan, data model kamu juga tersusun dalam hirarki. didalam situasi seperti ini Flux tidak terlalu berguna. Terkadang, bagaimanapun data model kamu tidak tersusun secara hirarki. Ketika React komponen memulai menerima `props` yang besar, atau kamu memiliki beberapa komponen yang nantinya akan menjadi lebih kompleks, saat itulah kamu perlu menggunakan Flux.
 
-**You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.**
+**Kamu akan tahu kapan membutuhkan Flux. Jika kamu tidak yakin untuk memerlukannya, kamu tidak perlu menggunakan Flux**
 
-If you have decided to use Flux, the most popular and well-documented Flux library is [Redux](http://redux.js.org/). There are *a lot* of alternatives out there, and you’ll be tempted to evaluate lots of them, but my advice is to just stick with the most popular one.
+jika kamu memutuskan untuk menggunakan Flux, librari yang sangat populer dan terdokumentasi secara baik adalah [Redux](http://redux.js.org/). Terdapat *banyak sekali* alternatif yang ada diluar sana, dan kamu akan kebingungan untuk mengevaluasinya, tetapi saran saya, pilihlah librari yang paling populer.
 
 ## Learning inline styles
 

From 34b665920d1b852c179cb5b5b541f1a758850d3f Mon Sep 17 00:00:00 2001
From: "Moch. Ainun Najib" <ec2ainun@gmail.com>
Date: Sun, 23 Jul 2017 08:15:10 +0700
Subject: [PATCH 3/3] add support Indonesia language

---
 README-ina.md | 62 +++++++++++++++++++++++++--------------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/README-ina.md b/README-ina.md
index d64bf4e..64414d4 100644
--- a/README-ina.md
+++ b/README-ina.md
@@ -3,18 +3,18 @@
 jika kamu Newbie dengan istilah React (atau istilah frontend secara umum), kamu akan sedikit kebingungan dengan ekosistem yang digunakan dalam teknologi React ini. Inilah alasannya:
 
 * React Teknologi hanya ditujukan untuk early-adopters(Pengadopsi awal) dan para ahli dibidangnya.
-* Facebook hanya meng-open-source teknologinya saja, sehingga tidak fokus dalam menyediakan alat untuk men-develop project yang lebih-kecil-dari-facebook
-* Marketing yang digunakan seperti React Guide tidak cukup mudah dicerna orang awam
+* Facebook hanya meng-open-source teknologinya saja, sehingga tidak fokus dalam menyediakan alat untuk men-develop project yang lebih-kecil-dari-facebook.
+* Marketing yang digunakan seperti React Guide tidak cukup mudah dicerna orang awam.
 
-Di Tulisan ini, saya mengasumsikan kamu pernah membuat webpage menggukan HTML, CSS, dan JavaScript.
+Di Tulisan ini, saya mengasumsikan kamu pernah membuat webpage menggunakan HTML, CSS, dan JavaScript.
 
-## Kenapa mempercayai saya?
+## Kenapa kamu perlu untuk percaya dengan saya?
 
-Banyak sekali saran yang kontradiktif dalam penggunaan React diluar sana; kenapa mempercayai saya?
+Banyak sekali saran yang kontradiktif dalam penggunaan React diluar sana; kenapa perlu percaya dengan saya?
 
 Saya merupakan salah satu anggota dari tim Facebook yang membangun teknologi React. Saat ini saya tidak lagi dalam tim Facebook, sekarang saya sedang membangun startup kecil, sehingga saya mempunyai perspective dari luar facebook juga.
 
-## Bagaimana Mengatasi Masalah Ekosistem teknologi React
+## Bagaimana Mengatasi Masalah Ekosistem Teknologi React
 
 Semua Software yang ada dibuat menggunakan berbagai teknologi, dan kamu harus cukup paham dalam mengaplikasikan berbagai teknologi tersebut dalam aplikasi yang kamu buat, Alasannya karena alat yang digunakan dalam ekosistem teknologi React ini terlihat sangat banyak, dan selalu dijelaskan dengan urutan yang salah.
 
@@ -27,7 +27,7 @@ Kamu harus memahami sesuai dengan urutan dibawah ini, **tanpa melewati ataupun m
 * [Routing](#learning-routing)
 * [Flux](#learning-flux)
 
-**Kamu tidak perlu untuk memahami semua teknologi ini untuk produktif dengan React.** Berpindalah ke langkah selanjutnya jika memiliki masalah yang perlu untuk dipecahkan.
+**Kamu tidak perlu untuk memahami semua teknologi ini untuk produktif dengan React.** Berpindah lah ke langkah selanjutnya jika memiliki masalah yang perlu untuk dipecahkan.
 
 Sebagai tambahan, terdapat beberapa topik yang sering disebut dalam Komunitas React, termasuk "Approach terbaru". Topik dibawah ini sangat menarik, tapi cukup sulit untuk dipahami orang awam, dan tidak cukup populer dibandingkan topik diatas, serta **tidak selalu dibutuhkan untuk kebanyakan aplikasi.**
 * [Inline styles](#learning-inline-styles)
@@ -37,37 +37,37 @@ Sebagai tambahan, terdapat beberapa topik yang sering disebut dalam Komunitas Re
 
 ## Teknologi React
 
-Sudah menjadi miskonsepsi umum jika kamu perlu membuang banyak waktu dalam menyiapkan kebutuhan (IDE, ataupun dependensi) untuk memulai memahami React. Di dokumentasi resminya, kamu akan menemukan [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) yang dapat disimpan dalam bentuk `.html` file dan dapat langsung digunakan. **Tidak perlu IDE yang siap ataupun dependensi lain yang dibutuhkan dalam langkah ini, dan jangan mulai mempelajari teknologi tersebut sampai kamu nyaman dengan dasar penggunaan React**
+Sudah menjadi miskonsepsi umum jika kamu perlu membuang banyak waktu dalam menyiapkan kebutuhan (berbagai macam dependensi) untuk memulai memahami React. Di dokumentasi resminya, kamu akan menemukan [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) yang dapat disimpan dalam bentuk `.html` file dan dapat langsung digunakan. **Tidak perlu berbagai macam dependensi lain yang dibutuhkan dalam langkah ini, dan jangan mulai mempelajari teknologi dependensi tersebut sampai kamu nyaman dengan dasar penggunaan React**
 
 saya pikir bahwa cara termudah dalam mempelajari React yaitu dengan berdasarkan [tutorial resmi](https://facebook.github.io/react/docs/tutorial.html).
 
 ## Learning `npm`
 
-`npm` merupakan Node.js package manager dan merupakan cara paling populer yang digunakan orang front-end dan designer dalam membagikan JavaScript code mereka. termasuk system modul yang disebut `CommonJS` dan sehingga memungkinkan untuk menginstall command-line tools yang ditulis dalam JavaScript. Baca [post ini](http://0fps.net/2013/01/22/commonjs-why-and-how/) untuk dasar kenapa `CommonJS` dibutuhkan untuk browser, atau [CommonJS Wiki](http://wiki.commonjs.org/wiki/Introduction) untuk memahami lebih lanjut tentang `CommonJS` API.
+`npm` merupakan Node.js package manager dan merupakan cara paling populer yang digunakan orang front-end dan designer dalam membagikan JavaScript code mereka. termasuk sistem modul yang disebut `CommonJS` yang memungkinkan untuk menginstall command-line tools yang ditulis dalam JavaScript. Baca [postingan ini](http://0fps.net/2013/01/22/commonjs-why-and-how/) untuk dasar kenapa `CommonJS` dibutuhkan untuk browser, atau [CommonJS Wiki](http://wiki.commonjs.org/wiki/Introduction) untuk memahami lebih lanjut tentang `CommonJS` API.
 
-Component, library, dan modul lain yang paling sering digunakan dan terkait dengan ekosistem React juga tersedia seperti modul `CommonJS` dan dapat di install dengan `npm`.
+Component, library, dan modul lain yang paling sering digunakan yang terkait dengan ekosistem React, juga tersedia di `npm` seperti modul `CommonJS` dan dapat di install dengan `npm`.
 
 ## Learning JavaScript bundlers
 
-Untuk beberapa alasan teknikal yang baik modul `CommonJS` (dan semua yang ada di `npm`) tidak dapat digunakan secara native (di implementasikan secara spesifik) di dalam browser. kamu perlu JavaScript “bundler” untuk mem-“bundle” modul tersebut ke `.js` file yang nantinya di include ke dalam webpage dengan tag `<script>` .
+Untuk beberapa alasan teknikal yang baik, modul `CommonJS` (dan semua yang ada di `npm`) tidak dapat digunakan secara native (di implementasikan secara spesifik) di dalam browser. kamu perlu JavaScript “bundler” untuk mem-“bundle” modul tersebut ke `.js` file yang nantinya di include ke dalam webpage dengan tag `<script>` .
 
-Contoh dari JavaScript bundlers adalah `webpack` and `browserify`. Keduanya merupakan pilihan yang bagus, tetapi saya lebih memilih `webpack` karena mempunyai banyak fitur yang membuat proses development dari aplikasi yang besar dan kompleks menjadi lebih mudah. karena dokumentasinya cukup rumit, saya punya [plug-and-play template untuk memulai](https://github.com/petehunt/react-webpack-template) dam saya juga menulis [panduan untuk webpack](https://github.com/petehunt/webpack-howto) untuk study kasus yang kompleks.
+Contoh dari JavaScript bundlers adalah `webpack` and `browserify`. Keduanya merupakan pilihan yang bagus, tetapi saya lebih memilih `webpack` karena mempunyai banyak fitur yang membuat proses development dari aplikasi yang besar dan kompleks menjadi lebih mudah. Dikarenakan dokumentasinya cukup rumit, saya punya [plug-and-play template untuk memulai](https://github.com/petehunt/react-webpack-template) dan saya juga menulis [panduan untuk webpack](https://github.com/petehunt/webpack-howto) untuk study kasus yang kompleks.
 
-React juga menawarkan [secara resmi CLI tool yang disebut Create React App](https://github.com/facebookincubator/create-react-app). hal tersebut membuat kamu dapat membuat React project yang didukung oleh `webpack` tanpa configurasi. Tool tersebut terdapat batasan, tetapi dapat memberikanmu titik mulai yang bagus, dan Pembaruannya akan memberikan fitur tambahan. dan terdapat sebuah fitur "ejection" yang membuat semua konfigurasi dan dependensi yang ada di salin ke project mu, sehingga kamu punya kontrol penuh terhadap konfigurasi tersebut.
+React juga menawarkan [secara resmi CLI tool yang disebut Create React App](https://github.com/facebookincubator/create-react-app). hal tersebut memungkinkan kamu dapat membuat React project yang didukung oleh `webpack` tanpa perlu konfigurasi. Tool tersebut masih memiliki batasan, tetapi dapat memberikanmu titik mulai yang bagus, dan Pembaruannya akan memberikan fitur tambahan. Serta terdapat sebuah fitur "ejection" yang membuat semua konfigurasi dan dependensi yang ada di salin ke project mu, sehingga kamu mempunyai kontrol penuh terhadap konfigurasi tersebut.
 
-Perlu diingat: `CommonJS` menggunakan `require()` untuk import modul yang ada, sehingga banyak orang bingung dan berfikir bahwa perlu dependensi/modul dari `require.js`. Untuk beberapa alasan teknikal, saya menyarankan untuk menghindari modul `require.js`. dan modul tersebut tidak populer di Ekositem React.
+Perlu diingat: `CommonJS` memiliki `require()` untuk import modul yang ada, sehingga banyak orang bingung dan berfikir bahwa perlu dependensi/modul dari `require.js`. Untuk beberapa alasan teknikal, saya menyarankan untuk menghindari penggunaan modul `require.js`. dan juga modul tersebut tidak telalu populer di Ekosistem React.
 
 ## Learning ES6
 
-Terlepas dari JSX (yang telah kamu pelajari di tutorial React), kamu mungkin menemukan beberapa syntax yang aneh dalam contohnya. Hal ini disebut ES6, dan merupakan versi terbaru dari JavaScript sehingga kamu belum mempelajarinya. Karena hal baru, teknologi tersebut belum di support oleh browser, tetapi modul “bundler” dapat menerjemahkannya untuk kamu dengan configurasi yang benar.
+Terlepas dari JSX (yang telah kamu pelajari di tutorial React), kamu mungkin menemukan beberapa syntax yang aneh dalam contoh yang diberikan. Hal ini disebut ES6, yang merupakan versi terbaru dari JavaScript, sehingga kamu mungkin belum mempelajarinya. Karena merupakan hal baru, teknologi tersebut belum di support oleh browser, tetapi modul “bundler” dapat menerjemahkannya untuk kamu dengan konfigurasi yang benar.
 
-jika kamu ingin menyelesaikan sesuatu dengan React secara cepat, **kamu dapat melewati ES6**, atau mencoba memahaminya dengan mengaplikasikannya langsung.
+jika kamu ingin menyelesaikan sesuatu dengan React secara cepat, **kamu dapat melewati ES6**, atau mencoba memahaminya saat mengaplikasikannya langsung.
 
 kamu mungkin mendengar bahwa ES6 class menjadi pilihan utama dalam membuat React component. hal ini salah. Kebanyakan orang (termasuk tim Facebook) menggunakan `React.createClass()`.
 
 ## Learning routing
 
-Istilah “Single-page applications” sedang booming belakangan ini. SPA merupakan web pages yang di load sekali, dan ketika pengguna meng-click sebuah link atau tombol, JavaScript yang berjalan pada halaman tersebut meng-update address bar, tetapi web page tidak di refresh. Pengaturan dari address bar diatur oleh **router**.
+Istilah “Single-page applications” sedang populer belakangan ini. SPA merupakan web pages yang di load sekali, dan ketika pengguna meng-click sebuah link atau tombol, JavaScript yang berjalan pada halaman tersebut meng-update address bar, tetapi web page tidak di refresh. Pengaturan dari address bar diatur oleh **router**.
 
 Router paling populer di Ekosistem React adalah [react-router](https://github.com/rackt/react-router). jika kamu membuat SPA, gunakan react-router kecuali kamu memiliki alasan yang bagus untuk tidak menggunakannya.
 
@@ -75,38 +75,38 @@ Router paling populer di Ekosistem React adalah [react-router](https://github.co
 
 ## Learning Flux
 
-Kamu mungkin telah mengenal Flux. Terdapat *banyak sekali* misinformasi tentang Flux diluar sana.
+Kamu mungkin telah mengenal Flux. Terdapat *banyak sekali* mis-informasi tentang Flux diluar sana.
 
-Banyak orang membuat aplikasi dan ingin mendefinisikan data model mereka, dan mereka berfikir untuk harus menggunakan Flux untuk melakukannya **Ini merupkan cara berfikir yang salah dalam mengadopsi teknologi Flux. Flux hanya harus ditambahkan saat telah terdapat banyak komponen.**
+Banyak orang membuat aplikasi dan juga telah mendefinisikan data model mereka, lalu mereka berfikir harus menggunakan Flux untuk melakukannya **Ini merupkan cara berfikir yang salah dalam mengadopsi teknologi Flux. Flux hanya harus ditambahkan saat telah terdapat banyak komponen.**
 
-React komponen disusun sesuai hirarki. Kebanyakan, data model kamu juga tersusun dalam hirarki. didalam situasi seperti ini Flux tidak terlalu berguna. Terkadang, bagaimanapun data model kamu tidak tersusun secara hirarki. Ketika React komponen memulai menerima `props` yang besar, atau kamu memiliki beberapa komponen yang nantinya akan menjadi lebih kompleks, saat itulah kamu perlu menggunakan Flux.
+React komponen disusun sesuai hirarki. Kebanyakan, data model kamu miliki juga tersusun dalam hirarki. didalam situasi seperti ini Flux tidak terlalu berguna. Terkadang, bagaimanapun data model kamu tidak tersusun secara hirarki. Ketika React komponen memulai menerima `props` yang besar/banyak, atau kamu memiliki beberapa komponen yang nantinya akan menjadi lebih kompleks, saat itulah kamu perlu menggunakan Flux.
 
-**Kamu akan tahu kapan membutuhkan Flux. Jika kamu tidak yakin untuk memerlukannya, kamu tidak perlu menggunakan Flux**
+**Kamu akan tau kapan membutuhkan Flux. Jika kamu tidak yakin untuk memerlukannya, kamu tidak perlu menggunakan Flux**
 
-jika kamu memutuskan untuk menggunakan Flux, librari yang sangat populer dan terdokumentasi secara baik adalah [Redux](http://redux.js.org/). Terdapat *banyak sekali* alternatif yang ada diluar sana, dan kamu akan kebingungan untuk mengevaluasinya, tetapi saran saya, pilihlah librari yang paling populer.
+jika kamu memutuskan untuk menggunakan Flux, librari yang sangat populer dan terdokumentasi secara baik adalah [Redux](http://redux.js.org/). Terdapat *banyak sekali* alternatif yang ada diluar sana, dan kamu akan kebingungan untuk mengevaluasinya, tetapi saran saya, pilihlah librari yang paling populer saja.
 
 ## Learning inline styles
 
-Pre-React, a lot of people reused CSS styles with complicated style sheets built by preprocessors like SASS. Since React makes writing reusable components easy, your stylesheets can be less complicated. Many in the community (including myself) are experimenting with getting rid of stylesheets altogether.
+Pre-React, banyak orang memakai CSS style lagi dengan stylesheet yang kompleks yang di buat oleh preprocessor seperti SASS. Karena React memungkinkan membuat kembali komponen yang telah ada dengan mudah, stylesheet mu akan menjadi lebih simple. Di kebanyakan komunitas (termasuk saya) bereksperimen untuk dapat menghilangkan tool stylesheet.
 
-This is a fairly crazy idea for a number of reasons. It makes media queries more difficult, and it's possible that there are  performance limitations using this technique. **When starting out with React, just style things the way you normally would.**
+Ini merupakan ide yang cukup gila karena beberapa alasan. hal ini membuat query media semakin sulit, dan ada kemungkinan terdapat beberapa batasan menggunakan teknik ini. **ketika memulai menggunakan React, lakukan styling yang biasa kamu lalukan saja.**
 
-Once you've got a feel for how React works, you can look at alternate techniques. One popular one is [BEM](https://en.bem.info/). I recommend phasing out your CSS preprocessor, since React gives you a more powerful way to reuse styles (by reusing components) and your JavaScript bundler can generate more efficient stylesheets for you (I gave [a talk about this at OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). With that said, React, like any other JavaScript library, will work just fine with a CSS preprocessor.
+Ketika kamu telah terbiasa dengan bagaiman React bekerja, kamu dapat mencari teknik alternatif. Yang paling populer adalah [BEM](https://en.bem.info/). saya merekomendasikan untuk tidak menggunakan CSS preprocessor, karena React memberikanmu kebebasan untuk menggunakan kembali style yang ada (menggunakan kembali komponen) dan JavaScript bundler dapat membuat stylesheet yang lebih efisien untuk kamu (Aku pernah [berbicara tentang hal ini di OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Dalam pembicaraan tersebut, React, seperti JavaScript librari lainnya, juga akan bekerja dengan normal saat menggunakan CSS preprocessor.
 
-Alternatively, you can also use [CSS Modules](http://glenmaddern.com/articles/css-modules), more specifically [react-css-modules](https://github.com/gajus/react-css-modules). With CSS Modules you'll still write CSS (or SASS/LESS/Stylus), but you can manage and compose your CSS files like you'd do with inline styles in React. And you don't need to worry about managing your class names using methodologies like BEM, as this will be handled for you under the hood by the module system.
+Alternatifnya, kamu juga dapat menggunakan [Modul CSS](http://glenmaddern.com/articles/css-modules), lebih spesifiknya [react-css-modules](https://github.com/gajus/react-css-modules). Dengan Modul CSS, kamu masih menulis CSS (atau SASS/LESS/Stylus), tetapi kamu juga dapat mengatur dan membuat file CSS seperti yang kamu lakukan dengan inline styles dalam React. Dan kamu tidak perlu khawatir dengan pengaturan nama kelas yang ada seperti menggunakan metodologi seperti BEM, seperti semuanya telah diatur dengan sistem modul yang ada.
 
 ## Learning server rendering
 
-Server rendering is often called "universal" or "isomorphic" JS. It means that you can take your React components and render them to static HTML on the server. This improves initial startup performance because the user does not need to wait for JS to download in order to see the initial UI, and React can re-use the server-rendered HTML so it doesn't need to generate it client-side.
+Server rendering sering dikenal sebagai "universal" atau "isomorphic" JS. ini berarti React komponen yang kamu miliki akan dirender ke static HTML di server. ini meningkatkan performa inisialisasi awal karena pengguna tidak perlu menunggu file JS untuk di download saat melihat inisialisasi UI, dan React dapat menggunakan kembali hasil render HTML dari server sehingga tidak perlu di buat di client-side.
 
-You need server rendering if you notice that your initial render is too slow or if you want to improve your search engine ranking. While it's true that Google now indexes client-rendered content, as of January 2016 every time it's been measured it's been shown to negatively affect ranking, potentially because of the performance penalty of client-side rendering.
+Kamu membutuhkan server rendering jika kamu nyadari bahwa inisial rendering sangat lama atau jika kamu ingin meningkatkan rangking search engine dari webpage. Saat ini Google meng-index konten yang bersifat client-rendered, karena sejak January 2016 cara menghitung rangking webpage berubah dan berpengaruh terhadap rangking webpage, hal ini dikarenakan performa dari sisi render client-side di ikut sertakan dalam variable perhitungannya.
 
-Server rendering still requires a lot of tooling to get right. Since it transparently supports React components written without server rendering in mind, you should build your app first and worry about server rendering later. You won't need to rewrite all of your components to support it.
+Server rendering membutuhkan banyak tool atau dependensi yang diperlukan. Karena React komponen dapat dibuat tanpa perlu server rendering, kamu hanya perlu membuat aplikasimu dulu dan mengimplementasikan server rendering nantinya. Kamu juga tidak perlu menulis ulang kode React komponen lagi untuk bisa digunakan di server rendering.
 
 ## Learning Immutable.js
 
-[Immutable.js](https://facebook.github.io/immutable-js/) provides a set of data structures that can help to solve certain performance issues when building React apps. It's a great library, and you'll probably use it a lot in your apps moving forward, but it's completely unnecessary until you have an appreciation of the performance implications. 
+[Immutable.js](https://facebook.github.io/immutable-js/) menyediakan struktur data yang membantumu dalam mengatasi masalah performa ketika membangun sebuah aplikasi React. Librari ini sangat bagus, dan kamu mungkin akan sering menggunakannya nanti, tetapi teknologi ini tidak dibutuhkan sampai kamu memperhatikan sisi performa aplikasi.
 
 ## Learning Relay, Falcor etc
 
-These are technologies that help you reduce the number of AJAX requests. They’re still very cutting-edge, so if you don’t have a problem with too many AJAX requests, you don’t need Relay or Falcor.
+Teknologi ini memungkinkan kamu untuk mengurangi permintaan AJAX. Teknologi ini sangat baru, jika kamu tidak punya masalah dengan permintaan AJAX yang banyak, kamu tidak membutuhkan Relay atau Falcor.