From 9d82fe5ed8b9bd8650cb633d9cd37221fd3155d7 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 00:51:19 +0700
Subject: [PATCH 01/22] Start to translate to Thai language

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

diff --git a/README-th.md b/README-th.md
new file mode 100644
index 0000000..46db022
--- /dev/null
+++ b/README-th.md
@@ -0,0 +1,123 @@
+# react-howto
+
+If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this.
+สำหรับผู้เริ่มต้นศึกษาและนำ React มาพัฒนาระบบนั้น มักจะมีความสับสนอย่างมากกับภาพรวมของ React เนื่องด้วยเหตุผลดังนี้
+
+* เป้าหมายของ React นั้นสำหรับนักพัฒนาที่ชอบลองของใหม่ ๆ และผู้เชี่ยวชาญ
+
+* นี่คือสิ่งที่ Facebook ใช้งาน ดังนั้นไม่ได้สนใจว่าจะนำไปใช้กับระบบที่เล็กกว่าอย่างไร
+
+* มีเอกสารต่าง ๆ ที่แย่เอามาก ๆ เช่น React guide เป็นต้น
+
+
+Throughout this document, I’ll assume you’ve built a web page with HTML, CSS and JavaScript.
+คาดหวังว่าทุกคนที่เข้ามาอ่านเอกสารนี้ ต้องมีความรู้และเข้าใจเกี่ยวกับการพัฒนาระบบเว็บด้วย HTML, CSS และ JavaScript
+
+## Why should you listen to me?
+
+There’s a ton of conflicting advice about React out there; why listen to me?
+ในปัจจุบันมีความแนะนำต่าง ๆ มากมายแถมขัดแย้งกันเกี่ยวกับ React
+
+I was one of the original members of the Facebook team that built and open-sourced React. I’m no longer at Facebook and I’m now at a small startup, so I have a non-Facebook perspective as well.
+ผู้เขียนเอกสารฉบับนี้เคยร่วมทีมพัฒนา React ที่ Facebook แต่ตอนนี้ออกมาทำบริษัท Startup เอง ดังนั้นสิ่งต่าง ๆ ในเอกสารนี้จึงเป็นมุมมองจากภายนอก
+
+## How to tackle the React ecosystem
+
+All software is built on a stack of technologies, and you need to understand enough of that stack to build your app. The reason why the React ecosystem of tooling seems overwhelming is because it’s always explained in the wrong order.
+
+ระบบงานต่าง ๆ สร้างอยู่ในเทคโนโลยีมากมาย ดังนั้นผู้พัฒนาจะต้องรู้และเข้าใจในเทคโนโลยีต่าง ๆ ที่ใช้ในการพัฒนาเป็นอย่างดี เมื่อกลับมาดู React พบว่ามีเครื่องมือและชุดของ library ต่าง ๆ จำนวนมากมาย ซึ่งทำให้เกิดความสับสนในการศึกษาและนำไปใช้งานอย่างมาก เหตุผลหลัก ๆ มาจากลำดับการอธิบายที่ผิดพลาด
+
+You should learn, in this order, **without skipping ahead or learning concurrently**:
+
+ดังนั้นต้องทำการศึกษาตามลำดับนี้ **อย่าข้ามโดยเด็ดขาด**
+
+* [ศึกษา React ด้วยตนเอง](#learning-react-itself)
+* [ศึกษา`npm`](#learning-npm)
+* [ศึกษา JavaScript “bundlers”](#learning-javascript-bundlers)
+* [ศึกษา ES6](#learning-es6)
+* [ศึกษา Routing](#learning-routing)
+* [ศึกษา Flux](#learning-flux)
+
+**You don't need to learn all of these to be productive with React.** Only move to the next step if you have a problem that needs to be solved.
+
+Additionally, there are a few topics that are often mentioned in the React community that are "bleeding edge". The topics below are interesting, but they're difficult to understand, are far less popular than the above topics and **aren't required for most apps**.
+* [Inline styles](#learning-inline-styles)
+* [Server rendering](#learning-server-rendering)
+* [Immutable.js](#learning-immutablejs)
+* [Relay, Falcor, etc](#learning-relay-falcor-etc)
+
+## Learning React itself
+
+It’s a common misconception that you need to waste a lot of time setting up tooling to start to learn React. In the official documentation you’ll find a [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) that you can save in an `.html` file and get started right away. **No tooling is required for this step, and don’t start learning extra tooling until you’re comfortable with React basics.**
+
+I still think the easiest way to learn React is [the official tutorial](https://facebook.github.io/react/docs/tutorial.html).
+
+## Learning `npm`
+
+`npm` is the Node.js package manager and is the most popular way front-end engineers and designers share JavaScript code. It includes a module system called `CommonJS` and lets you install command-line tools written in JavaScript. Read [this post](http://0fps.net/2013/01/22/commonjs-why-and-how/) for background on why `CommonJS` is necessary for browsers, or the [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) for more on the `CommonJS` API.
+
+Most reusable components, libraries and tools in the React ecosystem are available as `CommonJS` modules and are installed with `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 8f0d752715b8fda96f802e3bc797942850d73b32 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 07:51:56 +0700
Subject: [PATCH 02/22] Translate basic topic

---
 README-th.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README-th.md b/README-th.md
index 46db022..cdb2a7d 100644
--- a/README-th.md
+++ b/README-th.md
@@ -41,11 +41,14 @@ You should learn, in this order, **without skipping ahead or learning concurrent
 **You don't need to learn all of these to be productive with React.** Only move to the next step if you have a problem that needs to be solved.
 
 Additionally, there are a few topics that are often mentioned in the React community that are "bleeding edge". The topics below are interesting, but they're difficult to understand, are far less popular than the above topics and **aren't required for most apps**.
+
+ใน community ของ React นั้นมีหัวข้อหรือเรื่องใหม่ ๆ เกิดขึ้นอยู่เป็นประจำ แถมยากต่อการทำความเข้าใจ โดยมีความข้อที่น่าสนใจดังนี้ *** บางระบบไม่จำเป็นต้องใช้ ***
 * [Inline styles](#learning-inline-styles)
 * [Server rendering](#learning-server-rendering)
 * [Immutable.js](#learning-immutablejs)
 * [Relay, Falcor, etc](#learning-relay-falcor-etc)
 
+
 ## Learning React itself
 
 It’s a common misconception that you need to waste a lot of time setting up tooling to start to learn React. In the official documentation you’ll find a [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) that you can save in an `.html` file and get started right away. **No tooling is required for this step, and don’t start learning extra tooling until you’re comfortable with React basics.**

From 5b7ed58430503c3919ce76b18974eba2252a9496 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 07:55:32 +0700
Subject: [PATCH 03/22] Translate basic topic

---
 README-th.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README-th.md b/README-th.md
index cdb2a7d..86a4fd5 100644
--- a/README-th.md
+++ b/README-th.md
@@ -39,6 +39,7 @@ You should learn, in this order, **without skipping ahead or learning concurrent
 * [ศึกษา Flux](#learning-flux)
 
 **You don't need to learn all of these to be productive with React.** Only move to the next step if you have a problem that needs to be solved.
+**ไม่จำเป็นต้องเรียนรู้ทุกสิ่งทุกอย่างในแต่ละหัวข้อ** เรียนรู้เท่าที่จะสามารถแก้ไขปัญหาของเราได้ จากนั้นไปยังข้ออื่นต่อไป
 
 Additionally, there are a few topics that are often mentioned in the React community that are "bleeding edge". The topics below are interesting, but they're difficult to understand, are far less popular than the above topics and **aren't required for most apps**.
 

From 37d8c228c45e68e9b4a129e22d118aa1c8c67ad6 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 08:03:04 +0700
Subject: [PATCH 04/22] Translate topic learn react itself

---
 README-th.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README-th.md b/README-th.md
index 86a4fd5..8b58aa3 100644
--- a/README-th.md
+++ b/README-th.md
@@ -54,7 +54,9 @@ Additionally, there are a few topics that are often mentioned in the React commu
 
 It’s a common misconception that you need to waste a lot of time setting up tooling to start to learn React. In the official documentation you’ll find a [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) that you can save in an `.html` file and get started right away. **No tooling is required for this step, and don’t start learning extra tooling until you’re comfortable with React basics.**
 
-I still think the easiest way to learn React is [the official tutorial](https://facebook.github.io/react/docs/tutorial.html).
+ความเข้าใจผิดในการเริ่มเรียนรู้ React คือการเสียเวลามากมายไปกับการติดตั้งเครื่องมือ และ configuration ระบบงาน สามารถหาได้จากเอกสารของ React เอง โดยทำการ [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) และบันทึกไฟล์ด้วยนามสกุล `.html` นี่คือการเริ่มต้นศึกษาที่ถูกต้อง **ในขั้นตอนนี้ไม่ต้องการเครื่องมือใด ๆ ทั้งสิ้น เป็นเพียงการศึกษาพื้นฐานของ React เท่านั้น จนกว่าเราจะพร้อมและเข้าใจจึงเริ่มต้นศึกษาเครื่องมืออื่น ๆ ต่อไป**
+
+เส้นทางการเรียนรู้ React ที่ง่ายที่สุดอยู่ที่ [the official tutorial](https://facebook.github.io/react/docs/tutorial.html)
 
 ## Learning `npm`
 

From aa4bb4954e600b680791506d213688a195a1cffe Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 08:10:53 +0700
Subject: [PATCH 05/22] Translate topic npm

---
 README-th.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README-th.md b/README-th.md
index 8b58aa3..3d57624 100644
--- a/README-th.md
+++ b/README-th.md
@@ -62,7 +62,10 @@ It’s a common misconception that you need to waste a lot of time setting up to
 
 `npm` is the Node.js package manager and is the most popular way front-end engineers and designers share JavaScript code. It includes a module system called `CommonJS` and lets you install command-line tools written in JavaScript. Read [this post](http://0fps.net/2013/01/22/commonjs-why-and-how/) for background on why `CommonJS` is necessary for browsers, or the [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) for more on the `CommonJS` API.
 
+`npm` เป็นเครื่องมือในการจัดการ package ต่าง ๆ ของ Node.js ซึ่งได้รับความนิยมจากนักพัฒนาและนักออกแบบ ซึ่งจะมี module สำคัญชื่อว่า `CommonJS` และทำการติดตั้ง commad-line tool ต่าง ๆ ที่เขียนด้วยภาษา JavaScript สามารถอ่านเรื่อง `CommonJS` เพิ่มเติมได้จาก [this post](http://0fps.net/2013/01/22/commonjs-why-and-how/) ว่าทำไมจึงมีความสำคัญ หรืออ่านเพิ่มเติมเกี่ยวกับ `CommonJS` API ได้จาก [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction)
+
 Most reusable components, libraries and tools in the React ecosystem are available as `CommonJS` modules and are installed with `npm`.
+Reusable component, library และเครื่องมือต่าง ๆ ของ React นั้นจะมาจาก module `CommonJS` ซึ่งสามารถติดตั้งผ่าน `npm`
 
 ## Learning JavaScript bundlers
 

From a567457bbf4d4884eda4b35cfd88744886f9ecfb Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 08:32:49 +0700
Subject: [PATCH 06/22] Translate topic learn javascript bundlers

---
 README-th.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README-th.md b/README-th.md
index 3d57624..9236ce3 100644
--- a/README-th.md
+++ b/README-th.md
@@ -70,12 +70,16 @@ Reusable component, library และเครื่องมือต่าง
 ## 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.
+ในเชิงเทคนิคแล้วสิ่งต่าง ๆ ใน module `CommonJS` นั้นไม่สามารถใช้งานใน browser ได้ ดังนั้นจำเป็นต้องใช้งาน JavaScript “bundler” เพื่อทำการ “bundle” สิ่งต่างของ module นี้ไปเป็นไฟล์ `.js` ซึ่งถูกเรียกใช้จาก web page ด้วย 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.
+ตัวอย่างของ JavaScript bundlers เช่น `webpack` และ `browserify` โดยทั้งสองเป็นตัวเลือกที่ดี แต่ทางผู้เขียนแนะนำให้ใช้ `webpack` เพราะว่ามีความสามารถมากมายและง่ายต่อการพัฒนาระบบที่มีขนาดใหญ่ แต่ข้อเสียคือ เอกสารมันแย่มาก ๆ ทำให้เกิดความสับสนได้ จึงได้เขียนเอกสารอธิบายไว้ประกอบไปด้วย [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) สำหรับการเริ่มต้น และ [how-to guide for webpack](https://github.com/petehunt/webpack-howto) สำหรับระบบที่มีความซับซ้อน
 
 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 มี CLI tool ชื่อว่า [Create React App] (https://github.com/facebookincubator/create-react-app) ให้ใช้งาน ช่วยทำให้สามารถสร้าง React project ที่มาพร้อมกับ `webpack` โดยที่ไม่ต้องทำการ configuration อะไรเลย แน่นอนว่าย่อมมีข้อจำกัด แต่ว่าเป็นจุดเริ่มต้นที่ดีมาก ๆ ที่สำคัญเครื่องมือนี้มีการเพิ่มเติมและปรับปรุงแก้ไขความสามารถต่าง ๆ อยู่เป็นประจำ เช่น "ejection" ทำให้สามารถ copy พวก configuration และ dependency/library ต่าง ๆ เข้ามายัง project ได้
 
 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.
+มีสิ่งหนึ่งที่ต้องเข้าใจคือ ใน module `CommonJS` นั้นจะใช้งาน function `require()` เพื่อ import หรือเรียกใช้งาน module อื่น ๆ ซึ่งเรื่องนี้ทำให้นักพัฒนาจำนวนมากเข้าใจผิดหรือสับสนกับ project `require.js` ซึ่งมันเป็นคนละเรื่องกันเลย  ที่สำคัญทางผู้เขียนยังแนะนำให้หลีกเลี่ยงการใช้งาน `require.js` อีกด้วยเนื่องจากไม่ค่อยได้รับความนิยมใน React มากนัก
 
 ## Learning ES6
 

From 0aa1befbdbc32dee26495ea560e68d4c18e9bb4c Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 08:39:09 +0700
Subject: [PATCH 07/22] Remove original

---
 README-th.md | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/README-th.md b/README-th.md
index 9236ce3..2d0d0c1 100644
--- a/README-th.md
+++ b/README-th.md
@@ -1,6 +1,5 @@
 # react-howto
 
-If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this.
 สำหรับผู้เริ่มต้นศึกษาและนำ React มาพัฒนาระบบนั้น มักจะมีความสับสนอย่างมากกับภาพรวมของ React เนื่องด้วยเหตุผลดังนี้
 
 * เป้าหมายของ React นั้นสำหรับนักพัฒนาที่ชอบลองของใหม่ ๆ และผู้เชี่ยวชาญ
@@ -9,26 +8,18 @@ If you’re new to React (or frontend in general) you may find the ecosystem con
 
 * มีเอกสารต่าง ๆ ที่แย่เอามาก ๆ เช่น React guide เป็นต้น
 
-
-Throughout this document, I’ll assume you’ve built a web page with HTML, CSS and JavaScript.
 คาดหวังว่าทุกคนที่เข้ามาอ่านเอกสารนี้ ต้องมีความรู้และเข้าใจเกี่ยวกับการพัฒนาระบบเว็บด้วย HTML, CSS และ JavaScript
 
 ## Why should you listen to me?
 
-There’s a ton of conflicting advice about React out there; why listen to me?
 ในปัจจุบันมีความแนะนำต่าง ๆ มากมายแถมขัดแย้งกันเกี่ยวกับ React
 
-I was one of the original members of the Facebook team that built and open-sourced React. I’m no longer at Facebook and I’m now at a small startup, so I have a non-Facebook perspective as well.
 ผู้เขียนเอกสารฉบับนี้เคยร่วมทีมพัฒนา React ที่ Facebook แต่ตอนนี้ออกมาทำบริษัท Startup เอง ดังนั้นสิ่งต่าง ๆ ในเอกสารนี้จึงเป็นมุมมองจากภายนอก
 
 ## How to tackle the React ecosystem
 
-All software is built on a stack of technologies, and you need to understand enough of that stack to build your app. The reason why the React ecosystem of tooling seems overwhelming is because it’s always explained in the wrong order.
-
 ระบบงานต่าง ๆ สร้างอยู่ในเทคโนโลยีมากมาย ดังนั้นผู้พัฒนาจะต้องรู้และเข้าใจในเทคโนโลยีต่าง ๆ ที่ใช้ในการพัฒนาเป็นอย่างดี เมื่อกลับมาดู React พบว่ามีเครื่องมือและชุดของ library ต่าง ๆ จำนวนมากมาย ซึ่งทำให้เกิดความสับสนในการศึกษาและนำไปใช้งานอย่างมาก เหตุผลหลัก ๆ มาจากลำดับการอธิบายที่ผิดพลาด
 
-You should learn, in this order, **without skipping ahead or learning concurrently**:
-
 ดังนั้นต้องทำการศึกษาตามลำดับนี้ **อย่าข้ามโดยเด็ดขาด**
 
 * [ศึกษา React ด้วยตนเอง](#learning-react-itself)
@@ -38,11 +29,8 @@ You should learn, in this order, **without skipping ahead or learning concurrent
 * [ศึกษา Routing](#learning-routing)
 * [ศึกษา Flux](#learning-flux)
 
-**You don't need to learn all of these to be productive with React.** Only move to the next step if you have a problem that needs to be solved.
 **ไม่จำเป็นต้องเรียนรู้ทุกสิ่งทุกอย่างในแต่ละหัวข้อ** เรียนรู้เท่าที่จะสามารถแก้ไขปัญหาของเราได้ จากนั้นไปยังข้ออื่นต่อไป
 
-Additionally, there are a few topics that are often mentioned in the React community that are "bleeding edge". The topics below are interesting, but they're difficult to understand, are far less popular than the above topics and **aren't required for most apps**.
-
 ใน community ของ React นั้นมีหัวข้อหรือเรื่องใหม่ ๆ เกิดขึ้นอยู่เป็นประจำ แถมยากต่อการทำความเข้าใจ โดยมีความข้อที่น่าสนใจดังนี้ *** บางระบบไม่จำเป็นต้องใช้ ***
 * [Inline styles](#learning-inline-styles)
 * [Server rendering](#learning-server-rendering)
@@ -52,33 +40,24 @@ Additionally, there are a few topics that are often mentioned in the React commu
 
 ## Learning React itself
 
-It’s a common misconception that you need to waste a lot of time setting up tooling to start to learn React. In the official documentation you’ll find a [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) that you can save in an `.html` file and get started right away. **No tooling is required for this step, and don’t start learning extra tooling until you’re comfortable with React basics.**
-
 ความเข้าใจผิดในการเริ่มเรียนรู้ React คือการเสียเวลามากมายไปกับการติดตั้งเครื่องมือ และ configuration ระบบงาน สามารถหาได้จากเอกสารของ React เอง โดยทำการ [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) และบันทึกไฟล์ด้วยนามสกุล `.html` นี่คือการเริ่มต้นศึกษาที่ถูกต้อง **ในขั้นตอนนี้ไม่ต้องการเครื่องมือใด ๆ ทั้งสิ้น เป็นเพียงการศึกษาพื้นฐานของ React เท่านั้น จนกว่าเราจะพร้อมและเข้าใจจึงเริ่มต้นศึกษาเครื่องมืออื่น ๆ ต่อไป**
 
 เส้นทางการเรียนรู้ React ที่ง่ายที่สุดอยู่ที่ [the official tutorial](https://facebook.github.io/react/docs/tutorial.html)
 
 ## Learning `npm`
 
-`npm` is the Node.js package manager and is the most popular way front-end engineers and designers share JavaScript code. It includes a module system called `CommonJS` and lets you install command-line tools written in JavaScript. Read [this post](http://0fps.net/2013/01/22/commonjs-why-and-how/) for background on why `CommonJS` is necessary for browsers, or the [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) for more on the `CommonJS` API.
-
 `npm` เป็นเครื่องมือในการจัดการ package ต่าง ๆ ของ Node.js ซึ่งได้รับความนิยมจากนักพัฒนาและนักออกแบบ ซึ่งจะมี module สำคัญชื่อว่า `CommonJS` และทำการติดตั้ง commad-line tool ต่าง ๆ ที่เขียนด้วยภาษา JavaScript สามารถอ่านเรื่อง `CommonJS` เพิ่มเติมได้จาก [this post](http://0fps.net/2013/01/22/commonjs-why-and-how/) ว่าทำไมจึงมีความสำคัญ หรืออ่านเพิ่มเติมเกี่ยวกับ `CommonJS` API ได้จาก [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction)
 
-Most reusable components, libraries and tools in the React ecosystem are available as `CommonJS` modules and are installed with `npm`.
 Reusable component, library และเครื่องมือต่าง ๆ ของ React นั้นจะมาจาก module `CommonJS` ซึ่งสามารถติดตั้งผ่าน `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.
 ในเชิงเทคนิคแล้วสิ่งต่าง ๆ ใน module `CommonJS` นั้นไม่สามารถใช้งานใน browser ได้ ดังนั้นจำเป็นต้องใช้งาน JavaScript “bundler” เพื่อทำการ “bundle” สิ่งต่างของ module นี้ไปเป็นไฟล์ `.js` ซึ่งถูกเรียกใช้จาก web page ด้วย 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.
 ตัวอย่างของ JavaScript bundlers เช่น `webpack` และ `browserify` โดยทั้งสองเป็นตัวเลือกที่ดี แต่ทางผู้เขียนแนะนำให้ใช้ `webpack` เพราะว่ามีความสามารถมากมายและง่ายต่อการพัฒนาระบบที่มีขนาดใหญ่ แต่ข้อเสียคือ เอกสารมันแย่มาก ๆ ทำให้เกิดความสับสนได้ จึงได้เขียนเอกสารอธิบายไว้ประกอบไปด้วย [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) สำหรับการเริ่มต้น และ [how-to guide for webpack](https://github.com/petehunt/webpack-howto) สำหรับระบบที่มีความซับซ้อน
 
-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 มี CLI tool ชื่อว่า [Create React App] (https://github.com/facebookincubator/create-react-app) ให้ใช้งาน ช่วยทำให้สามารถสร้าง React project ที่มาพร้อมกับ `webpack` โดยที่ไม่ต้องทำการ configuration อะไรเลย แน่นอนว่าย่อมมีข้อจำกัด แต่ว่าเป็นจุดเริ่มต้นที่ดีมาก ๆ ที่สำคัญเครื่องมือนี้มีการเพิ่มเติมและปรับปรุงแก้ไขความสามารถต่าง ๆ อยู่เป็นประจำ เช่น "ejection" ทำให้สามารถ copy พวก configuration และ dependency/library ต่าง ๆ เข้ามายัง project ได้
 
-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.
 มีสิ่งหนึ่งที่ต้องเข้าใจคือ ใน module `CommonJS` นั้นจะใช้งาน function `require()` เพื่อ import หรือเรียกใช้งาน module อื่น ๆ ซึ่งเรื่องนี้ทำให้นักพัฒนาจำนวนมากเข้าใจผิดหรือสับสนกับ project `require.js` ซึ่งมันเป็นคนละเรื่องกันเลย  ที่สำคัญทางผู้เขียนยังแนะนำให้หลีกเลี่ยงการใช้งาน `require.js` อีกด้วยเนื่องจากไม่ค่อยได้รับความนิยมใน React มากนัก
 
 ## Learning ES6

From 7ee8a1641eab7c2186aae4218b99f2b0183cc11a Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 08:41:47 +0700
Subject: [PATCH 08/22] Fix syntax of markdown

---
 README-th.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README-th.md b/README-th.md
index 2d0d0c1..0fe5480 100644
--- a/README-th.md
+++ b/README-th.md
@@ -31,7 +31,7 @@
 
 **ไม่จำเป็นต้องเรียนรู้ทุกสิ่งทุกอย่างในแต่ละหัวข้อ** เรียนรู้เท่าที่จะสามารถแก้ไขปัญหาของเราได้ จากนั้นไปยังข้ออื่นต่อไป
 
-ใน community ของ React นั้นมีหัวข้อหรือเรื่องใหม่ ๆ เกิดขึ้นอยู่เป็นประจำ แถมยากต่อการทำความเข้าใจ โดยมีความข้อที่น่าสนใจดังนี้ *** บางระบบไม่จำเป็นต้องใช้ ***
+ใน community ของ React นั้นมีหัวข้อหรือเรื่องใหม่ ๆ เกิดขึ้นอยู่เป็นประจำ แถมยากต่อการทำความเข้าใจ โดยมีความข้อที่น่าสนใจดังนี้ ***บางระบบไม่จำเป็นต้องใช้***
 * [Inline styles](#learning-inline-styles)
 * [Server rendering](#learning-server-rendering)
 * [Immutable.js](#learning-immutablejs)

From 2a921fa4e7d0a3f307e535585984fe7925b4d4f8 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 08:50:40 +0700
Subject: [PATCH 09/22] Translate topic learn ES6

---
 README-th.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README-th.md b/README-th.md
index 0fe5480..5c1a37b 100644
--- a/README-th.md
+++ b/README-th.md
@@ -62,11 +62,11 @@ Reusable component, library และเครื่องมือต่าง
 
 ## 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.
+นอกเหนือจาก JSX ซึ่งเรียนรู้มาจาก React tutorial แล้ว อาจะพบเจอรูปแบบของ code ที่แปลกตาจากตัวอย่างต่าง ๆ ของ React โดยรูปแบบ code เหล่านั้นเรียกว่า ES6 ซึ่งเป็นภาษา JavaScript เวอร์ชันล่าสุด ที่ไม่จำเป็นต้องเรียนรู้ในตอนนี้ก็ได้ เนื่องจากว่ายังใหม่มาก ๆ แถม broser ต่าง ๆ ก็ยังไม่รองรับ แต่ที่สามารถใช้งานได้เนื่องจาก bundler ทำการแปลงให้นั่นเอง
 
-If you just want to get things done with React, **you can skip learning ES6**, or try to pick it up along the way.
+ถ้าผู้ศึกษาเพียงต้องการศึกษาเพียง React เท่านั้น **สามารถข้ามหัวข้อนี้ไปได้เลย** หรือลองศึกษาเพิ่มเติมได้
 
-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()`.
+อาจจะเคยดูและฟังมาว่า แนะนำให้สร้าง React component ด้วย ES6 แต่ว่ามันไม่จริงเลย เนื่องจากคนส่วนใหญ่รวมทั้ง Facebook ด้วยยังใช้ `React.createClass()` อยู่เลย
 
 ## Learning routing
 

From c7e2a8c9d4b673de282a574b50fe11f49ee4d0ac Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 12:02:00 +0700
Subject: [PATCH 10/22] Translate topic learn routing

---
 README-th.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README-th.md b/README-th.md
index 5c1a37b..c5c0c9c 100644
--- a/README-th.md
+++ b/README-th.md
@@ -70,11 +70,12 @@ Reusable component, library และเครื่องมือต่าง
 
 ## 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**.
+“Single-page applications”  นั้นได้รับความนิยมอย่างมาก โดยที่หน้า web ทำการโหลดเพียงครั้งเดียวเท่านั้น จากนั้นเมื่อเกิดเหตุการณ์ต่าง ๆ จากผู้ใช้งาน เช่น กดปุ่ม กด link แล้ว JavaScript จะทำเปลี่ยนแปลงและ update สิ่งต่าง ๆ บน browser โดยไม่ refresh หน้า web เลย ส่วนการจัดการ url ต่าง ๆ บน address bar ใน browser นั้น ถูกจัดการด้วยสิ่งที่เรียกว่า **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 ที่ได้รับความนิยมใน React คือ [react-router](https://github.com/rackt/react-router)
 
-**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.
+***อย่าใช้ router ถ้าไม่ได้สร้าง single-page applications*** โดยที่ระบบส่วนใหญ่เริ่มจาก component เล็ก ๆ ซึ่งอยู่ภายในระบบใหญ่นั่นเอง
 
 ## Learning Flux
 

From 70156d2ff9a93f479e61cd2c6fbfbf45b58c41e1 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 12:06:56 +0700
Subject: [PATCH 11/22] Translate topic learn routing

---
 README-th.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README-th.md b/README-th.md
index c5c0c9c..417c7a6 100644
--- a/README-th.md
+++ b/README-th.md
@@ -72,7 +72,6 @@ Reusable component, library และเครื่องมือต่าง
 
 “Single-page applications”  นั้นได้รับความนิยมอย่างมาก โดยที่หน้า web ทำการโหลดเพียงครั้งเดียวเท่านั้น จากนั้นเมื่อเกิดเหตุการณ์ต่าง ๆ จากผู้ใช้งาน เช่น กดปุ่ม กด link แล้ว JavaScript จะทำเปลี่ยนแปลงและ update สิ่งต่าง ๆ บน browser โดยไม่ refresh หน้า web เลย ส่วนการจัดการ url ต่าง ๆ บน address bar ใน browser นั้น ถูกจัดการด้วยสิ่งที่เรียกว่า **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 ที่ได้รับความนิยมใน React คือ [react-router](https://github.com/rackt/react-router)
 
 ***อย่าใช้ router ถ้าไม่ได้สร้าง single-page applications*** โดยที่ระบบส่วนใหญ่เริ่มจาก component เล็ก ๆ ซึ่งอยู่ภายในระบบใหญ่นั่นเอง

From 18ee1ea13bf068dc1d7cb547cb83e8afcefe0593 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 12:26:58 +0700
Subject: [PATCH 12/22] Translate topic learn flux

---
 README-th.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/README-th.md b/README-th.md
index 417c7a6..cbb5064 100644
--- a/README-th.md
+++ b/README-th.md
@@ -79,14 +79,16 @@ Reusable component, library และเครื่องมือต่าง
 ## Learning Flux
 
 You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.
+อาจจะเคยได้ยินคำว่า Flux มาบ้าง ซึ่งมีข้อมูลที่ผิดจำนวนมากมาย !!
 
 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.**
+มีนักพัฒนาจำนวนมากคิดว่า ถ้าต้องการสร้างระบบงานและทำการกำหนด data model ต่าง ๆ ขึ้นมา จากนั้นก็นำ Flux มาใช้งานเพื่อสร้างระบบงานขึ้นมาเลย **เป็นความคิดที่ผิดมาก ๆ สำหรับการนำ Flux มาใช้**
 
-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 component นั้นจะถูกจัดเรียงเป็นลำดับชั้น ดังนั้น data model จึงอยู่ในรูปแบบเดียวกัน ซึ่งในกรณีนี้ Flux อาจจะไม่เหมาะสมเท่าไร แต่ในบางครั้ง data model อาจจะไม่เป็นลำดับชั้นก็ได้ มาดูการทำงานของ React กัน เริ่มจาก React component รับข้อมูลผ่าน `props` ซึ่งดูแล้วไม่มีอะไรถ้าจำนวน component ไม่เยอะ แต่ถ้าระบบงานเริ่มซับซ้อน จำนวน component เริ่มเยอะ ดังนั้นการส่งข้อมูลผ่าน props น่าจะไม่เหมาะสมเท่าไร ดังนั้นถึงเวลาที่ต้องนำ Flux มาใช้งาน
 
-**You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.**
+**คนใช้งานต้องรู้ว่าเมื่อไรต้องใช้ 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.
+แต่ถ้าตัดสินใจแล้วว่าต้องใช้งาน Flux แนะนำให้ใช้งาน library ที่ชื่อว่า [Redux](http://redux.js.org/) แถมยังมีทางเลือกอื่น ๆ อีกมากมาย แต่แนะนำให้ใช้ library ที่ได้รับความนิยมจะดีกว่า
 
 ## Learning inline styles
 

From 0e48f66d4dea84541e63ebaa9040c4b2e527c956 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Tue, 16 May 2017 12:34:46 +0700
Subject: [PATCH 13/22] Translate topic learn flux

---
 README-th.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README-th.md b/README-th.md
index cbb5064..fc12dc3 100644
--- a/README-th.md
+++ b/README-th.md
@@ -84,7 +84,7 @@ You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux
 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.**
 มีนักพัฒนาจำนวนมากคิดว่า ถ้าต้องการสร้างระบบงานและทำการกำหนด data model ต่าง ๆ ขึ้นมา จากนั้นก็นำ Flux มาใช้งานเพื่อสร้างระบบงานขึ้นมาเลย **เป็นความคิดที่ผิดมาก ๆ สำหรับการนำ Flux มาใช้**
 
-React component นั้นจะถูกจัดเรียงเป็นลำดับชั้น ดังนั้น data model จึงอยู่ในรูปแบบเดียวกัน ซึ่งในกรณีนี้ Flux อาจจะไม่เหมาะสมเท่าไร แต่ในบางครั้ง data model อาจจะไม่เป็นลำดับชั้นก็ได้ มาดูการทำงานของ React กัน เริ่มจาก React component รับข้อมูลผ่าน `props` ซึ่งดูแล้วไม่มีอะไรถ้าจำนวน component ไม่เยอะ แต่ถ้าระบบงานเริ่มซับซ้อน จำนวน component เริ่มเยอะ ดังนั้นการส่งข้อมูลผ่าน props น่าจะไม่เหมาะสมเท่าไร ดังนั้นถึงเวลาที่ต้องนำ Flux มาใช้งาน
+React component นั้นจะถูกจัดเรียงเป็นลำดับชั้น ดังนั้น data model จึงอยู่ในรูปแบบเดียวกัน ซึ่งในกรณีนี้ Flux อาจจะไม่เหมาะสมเท่าไร แต่ในบางครั้ง data model อาจจะไม่เป็นลำดับชั้นก็ได้ มาดูการทำงานของ React กัน เริ่มจาก React component รับข้อมูลผ่าน `props` ซึ่งดูแล้วไม่มีอะไรถ้าจำนวน component ไม่เยอะ แต่ถ้าระบบงานเริ่มซับซ้อน จำนวน component และลำดับชั้นเริ่มเยอะ การส่งข้อมูลผ่าน props น่าจะไม่เหมาะสมเท่าไร ดังนั้นถึงเวลาที่ต้องนำ Flux มาใช้งาน
 
 **คนใช้งานต้องรู้ว่าเมื่อไรต้องใช้ Flux ถ้ายังไม่แน่ใจยังไม่เข้าใจ แสดงว่ายังไม่จไเป็นต้องใช้งาน**
 

From c26928d374d939d4155011c48601895d9a685db0 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 00:56:47 +0700
Subject: [PATCH 14/22] Translate topic inline style

---
 README-th.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README-th.md b/README-th.md
index fc12dc3..91be5c6 100644
--- a/README-th.md
+++ b/README-th.md
@@ -94,12 +94,19 @@ React component นั้นจะถูกจัดเรียงเป็น
 
 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.
 
+ก่อนที่ React จะถูกสร้างมานั้น นักพัฒนาจำนวนมากจะทำการเขียน CSS style เพื่อให้สามารถ reuse ได้ง่ายด้วยวิธีการที่ซับซ้อนเช่น SASS !! แต่เมื่อมี React ขึ้นมาก็ทำให้การเขียน reuse component ง่ายขึ้น และช่วยทำให้การเขียน 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.**
+**สำหรับการเริ่มต้นกับ React นั้นให้เริ่มจากสิ่งที่เรียบง่ายก่อน**
 
 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.
 
+เมื่อเรารู้สึกว่าการนำ React มาใช้แล้วดีมีประโยชน์แล้ว แนะนำให้หาเทคนิทและวิธีการอื่นๆ มาใช้ เช่น [BEM](https://en.bem.info/) เป็นต้น คำแนะนำคือ ให้ ลด ละ เลิกการใช้งาน CSS processor ลง เนื่องจาก React นั้นทำให้การ reuse stylesheet ง่ายขึ้น ที่สำคัญ JavaScript bundler จะทำการแปลง stylesheet ที่เขียนให้อยู่ในรูปแบบที่มีประสิทธิภาพมากยิ่งขึ้นให้อีกด้วย สามารถดู VDO เพิ่มเติมได้จากงาน [OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)
+
 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.
 
+ไม่เพียงแค่นี้ ยังมีทางเครื่องมืออื่น ๆ อีก เช่น [CSS Modules](http://glenmaddern.com/articles/css-modules) และ [react-css-modules](https://github.com/gajus/react-css-modules) โดยที่ CSS module นั้นยังสามารถเขียน CSS/SASS/LESS/Stylus ได้อีกด้วย
+
 ## 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.

From dae3793f8528c3c00b436c07fe3e7c43cb8fe849 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 01:18:54 +0700
Subject: [PATCH 15/22] Translate topic server rendering

---
 README-th.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README-th.md b/README-th.md
index 91be5c6..28cda8d 100644
--- a/README-th.md
+++ b/README-th.md
@@ -111,10 +111,16 @@ Alternatively, you can also use [CSS Modules](http://glenmaddern.com/articles/cs
 
 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 นั้นมักจะถูกเรียกว่า "universal" หรือ "isomorphic" คือการที่ render React component ไปอยู่ในรูปแบบของ static HTML เพื่อปรับปรุงประสิทธิภาพของระบบงาน เนื่องจากไม่ต้องทำการ download JavaScript มาเพื่อทำงาน อีกทั้ง React สามารถ reuse static HTML เหล่านี้มาใช้ได้อีกด้วย
+
 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 จะมีประโยชน์เมื่อการ render ของระบบช้า หรือต้องการปรับปรุง search ranking จาก Google
+
 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 นั้นต้องการเครื่องมือจำนวนมาก ดังนั้นสำหรับผู้เริ่มต้นให้สนใจกับการพัฒนาระบบก่อน จากนั้นค่อยมาดูเรื่อง server rendering ต่อไป เนื่องจากหลาย ๆ  component อาจจะไม่ต้องการก็ได้
+
 ## 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.

From 016d893402cbd5a1a1e7bbb586d14b3774e75422 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 11:29:55 +0700
Subject: [PATCH 16/22] Translate topic immutable.js

---
 README-th.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README-th.md b/README-th.md
index 28cda8d..db3172c 100644
--- a/README-th.md
+++ b/README-th.md
@@ -123,7 +123,7 @@ Server rendering still requires a lot of tooling to get right. Since it transpar
 
 ## 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/) เตรียมชุดของโครงสร้างข้อมูลสำหรับช่วยแก้ไขปัญหาเรื่องประสิทธิภาพการทำงานของระบบที่พัฒนาด้วย React ไว้ให้ เป็นชุด library ที่ดีมาก ๆ ช่วยทำให้การพัฒนารวดเร็วขึ้น แต่สิ่งที่ควรจำไว้คือ ใช้เมื่อเจอปัญหาเรื่องประสิทธิภาพการทำงานของระบบ (ใช้เมื่อจำเป็นจริง ๆ เท่านั้น)
 
 ## Learning Relay, Falcor etc
 

From ffbca7037675ce0fd356a684d2916c131012aa83 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 11:33:55 +0700
Subject: [PATCH 17/22] Translate relat, falcor ...

---
 README-th.md | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/README-th.md b/README-th.md
index db3172c..c9b932b 100644
--- a/README-th.md
+++ b/README-th.md
@@ -92,33 +92,20 @@ React component นั้นจะถูกจัดเรียงเป็น
 
 ## 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.
-
 ก่อนที่ React จะถูกสร้างมานั้น นักพัฒนาจำนวนมากจะทำการเขียน CSS style เพื่อให้สามารถ reuse ได้ง่ายด้วยวิธีการที่ซับซ้อนเช่น SASS !! แต่เมื่อมี React ขึ้นมาก็ทำให้การเขียน reuse component ง่ายขึ้น และช่วยทำให้การเขียน 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.**
 **สำหรับการเริ่มต้นกับ React นั้นให้เริ่มจากสิ่งที่เรียบง่ายก่อน**
 
-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.
-
 เมื่อเรารู้สึกว่าการนำ React มาใช้แล้วดีมีประโยชน์แล้ว แนะนำให้หาเทคนิทและวิธีการอื่นๆ มาใช้ เช่น [BEM](https://en.bem.info/) เป็นต้น คำแนะนำคือ ให้ ลด ละ เลิกการใช้งาน CSS processor ลง เนื่องจาก React นั้นทำให้การ reuse stylesheet ง่ายขึ้น ที่สำคัญ JavaScript bundler จะทำการแปลง stylesheet ที่เขียนให้อยู่ในรูปแบบที่มีประสิทธิภาพมากยิ่งขึ้นให้อีกด้วย สามารถดู VDO เพิ่มเติมได้จากงาน [OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)
 
-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.
-
 ไม่เพียงแค่นี้ ยังมีทางเครื่องมืออื่น ๆ อีก เช่น [CSS Modules](http://glenmaddern.com/articles/css-modules) และ [react-css-modules](https://github.com/gajus/react-css-modules) โดยที่ CSS module นั้นยังสามารถเขียน CSS/SASS/LESS/Stylus ได้อีกด้วย
 
 ## 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 นั้นมักจะถูกเรียกว่า "universal" หรือ "isomorphic" คือการที่ render React component ไปอยู่ในรูปแบบของ static HTML เพื่อปรับปรุงประสิทธิภาพของระบบงาน เนื่องจากไม่ต้องทำการ download JavaScript มาเพื่อทำงาน อีกทั้ง React สามารถ reuse static HTML เหล่านี้มาใช้ได้อีกด้วย
 
-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 จะมีประโยชน์เมื่อการ render ของระบบช้า หรือต้องการปรับปรุง search ranking จาก Google
 
-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 นั้นต้องการเครื่องมือจำนวนมาก ดังนั้นสำหรับผู้เริ่มต้นให้สนใจกับการพัฒนาระบบก่อน จากนั้นค่อยมาดูเรื่อง server rendering ต่อไป เนื่องจากหลาย ๆ  component อาจจะไม่ต้องการก็ได้
 
 ## Learning Immutable.js
@@ -127,4 +114,4 @@ Server rendering still requires a lot of tooling to get right. Since it transpar
 
 ## 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.
+สิ่งต่าง ๆ เหล่านี้คือเทคโนโลยีที่ช่วยลดจำนวนการส่ง AJAX request ไปยังฝั่ง server แน่นอนว่า ถ้าระบบงานที่พัฒนาจะยังมีปัญหาเรื่องจำนวน request ที่ส่งไปยัง server มากจนเกินไปก็ยังไม่จำเป็นต้องใช้งาน

From 7c2e35849608d8c4f8c687cc0560d2c641e1f3b0 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 11:38:12 +0700
Subject: [PATCH 18/22] Change topics

---
 README-th.md | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/README-th.md b/README-th.md
index c9b932b..5468beb 100644
--- a/README-th.md
+++ b/README-th.md
@@ -22,35 +22,35 @@
 
 ดังนั้นต้องทำการศึกษาตามลำดับนี้ **อย่าข้ามโดยเด็ดขาด**
 
-* [ศึกษา React ด้วยตนเอง](#learning-react-itself)
-* [ศึกษา`npm`](#learning-npm)
-* [ศึกษา JavaScript “bundlers”](#learning-javascript-bundlers)
-* [ศึกษา ES6](#learning-es6)
-* [ศึกษา Routing](#learning-routing)
-* [ศึกษา Flux](#learning-flux)
+* [เรียนรู้ React ด้วยตนเอง](#learning-react-itself)
+* [เรียนรู้`npm`](#learning-npm)
+* [เรียนรู้ JavaScript “bundlers”](#learning-javascript-bundlers)
+* [เรียนรู้ ES6](#learning-es6)
+* [เรียนรู้ Routing](#learning-routing)
+* [เรียนรู้ Flux](#learning-flux)
 
 **ไม่จำเป็นต้องเรียนรู้ทุกสิ่งทุกอย่างในแต่ละหัวข้อ** เรียนรู้เท่าที่จะสามารถแก้ไขปัญหาของเราได้ จากนั้นไปยังข้ออื่นต่อไป
 
 ใน community ของ React นั้นมีหัวข้อหรือเรื่องใหม่ ๆ เกิดขึ้นอยู่เป็นประจำ แถมยากต่อการทำความเข้าใจ โดยมีความข้อที่น่าสนใจดังนี้ ***บางระบบไม่จำเป็นต้องใช้***
-* [Inline styles](#learning-inline-styles)
-* [Server rendering](#learning-server-rendering)
-* [Immutable.js](#learning-immutablejs)
-* [Relay, Falcor, etc](#learning-relay-falcor-etc)
+* [เรียนรู้ Inline styles](#learning-inline-styles)
+* [เรียนรู้ Server rendering](#learning-server-rendering)
+* [เรียนรู้ Immutable.js](#learning-immutablejs)
+* [เรียนรู้ Relay, Falcor, etc](#learning-relay-falcor-etc)
 
 
-## Learning React itself
+## เรียนรู้ React ด้วยตนเอง
 
 ความเข้าใจผิดในการเริ่มเรียนรู้ React คือการเสียเวลามากมายไปกับการติดตั้งเครื่องมือ และ configuration ระบบงาน สามารถหาได้จากเอกสารของ React เอง โดยทำการ [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) และบันทึกไฟล์ด้วยนามสกุล `.html` นี่คือการเริ่มต้นศึกษาที่ถูกต้อง **ในขั้นตอนนี้ไม่ต้องการเครื่องมือใด ๆ ทั้งสิ้น เป็นเพียงการศึกษาพื้นฐานของ React เท่านั้น จนกว่าเราจะพร้อมและเข้าใจจึงเริ่มต้นศึกษาเครื่องมืออื่น ๆ ต่อไป**
 
 เส้นทางการเรียนรู้ React ที่ง่ายที่สุดอยู่ที่ [the official tutorial](https://facebook.github.io/react/docs/tutorial.html)
 
-## Learning `npm`
+## เรียนรู้ `npm`
 
 `npm` เป็นเครื่องมือในการจัดการ package ต่าง ๆ ของ Node.js ซึ่งได้รับความนิยมจากนักพัฒนาและนักออกแบบ ซึ่งจะมี module สำคัญชื่อว่า `CommonJS` และทำการติดตั้ง commad-line tool ต่าง ๆ ที่เขียนด้วยภาษา JavaScript สามารถอ่านเรื่อง `CommonJS` เพิ่มเติมได้จาก [this post](http://0fps.net/2013/01/22/commonjs-why-and-how/) ว่าทำไมจึงมีความสำคัญ หรืออ่านเพิ่มเติมเกี่ยวกับ `CommonJS` API ได้จาก [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction)
 
 Reusable component, library และเครื่องมือต่าง ๆ ของ React นั้นจะมาจาก module `CommonJS` ซึ่งสามารถติดตั้งผ่าน `npm`
 
-## Learning JavaScript bundlers
+## เรียนรู้ JavaScript bundlers
 
 ในเชิงเทคนิคแล้วสิ่งต่าง ๆ ใน module `CommonJS` นั้นไม่สามารถใช้งานใน browser ได้ ดังนั้นจำเป็นต้องใช้งาน JavaScript “bundler” เพื่อทำการ “bundle” สิ่งต่างของ module นี้ไปเป็นไฟล์ `.js` ซึ่งถูกเรียกใช้จาก web page ด้วย tag `<script>`
 
@@ -60,7 +60,7 @@ Reusable component, library และเครื่องมือต่าง
 
 มีสิ่งหนึ่งที่ต้องเข้าใจคือ ใน module `CommonJS` นั้นจะใช้งาน function `require()` เพื่อ import หรือเรียกใช้งาน module อื่น ๆ ซึ่งเรื่องนี้ทำให้นักพัฒนาจำนวนมากเข้าใจผิดหรือสับสนกับ project `require.js` ซึ่งมันเป็นคนละเรื่องกันเลย  ที่สำคัญทางผู้เขียนยังแนะนำให้หลีกเลี่ยงการใช้งาน `require.js` อีกด้วยเนื่องจากไม่ค่อยได้รับความนิยมใน React มากนัก
 
-## Learning ES6
+## เรียนรู้ ES6
 
 นอกเหนือจาก JSX ซึ่งเรียนรู้มาจาก React tutorial แล้ว อาจะพบเจอรูปแบบของ code ที่แปลกตาจากตัวอย่างต่าง ๆ ของ React โดยรูปแบบ code เหล่านั้นเรียกว่า ES6 ซึ่งเป็นภาษา JavaScript เวอร์ชันล่าสุด ที่ไม่จำเป็นต้องเรียนรู้ในตอนนี้ก็ได้ เนื่องจากว่ายังใหม่มาก ๆ แถม broser ต่าง ๆ ก็ยังไม่รองรับ แต่ที่สามารถใช้งานได้เนื่องจาก bundler ทำการแปลงให้นั่นเอง
 
@@ -68,7 +68,7 @@ Reusable component, library และเครื่องมือต่าง
 
 อาจจะเคยดูและฟังมาว่า แนะนำให้สร้าง React component ด้วย ES6 แต่ว่ามันไม่จริงเลย เนื่องจากคนส่วนใหญ่รวมทั้ง Facebook ด้วยยังใช้ `React.createClass()` อยู่เลย
 
-## Learning routing
+## เรียนรู้ routing
 
 “Single-page applications”  นั้นได้รับความนิยมอย่างมาก โดยที่หน้า web ทำการโหลดเพียงครั้งเดียวเท่านั้น จากนั้นเมื่อเกิดเหตุการณ์ต่าง ๆ จากผู้ใช้งาน เช่น กดปุ่ม กด link แล้ว JavaScript จะทำเปลี่ยนแปลงและ update สิ่งต่าง ๆ บน browser โดยไม่ refresh หน้า web เลย ส่วนการจัดการ url ต่าง ๆ บน address bar ใน browser นั้น ถูกจัดการด้วยสิ่งที่เรียกว่า **router**
 
@@ -76,7 +76,7 @@ Reusable component, library และเครื่องมือต่าง
 
 ***อย่าใช้ router ถ้าไม่ได้สร้าง single-page applications*** โดยที่ระบบส่วนใหญ่เริ่มจาก component เล็ก ๆ ซึ่งอยู่ภายในระบบใหญ่นั่นเอง
 
-## Learning Flux
+## เรียนรู้ Flux
 
 You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.
 อาจจะเคยได้ยินคำว่า Flux มาบ้าง ซึ่งมีข้อมูลที่ผิดจำนวนมากมาย !!
@@ -90,7 +90,7 @@ React component นั้นจะถูกจัดเรียงเป็น
 
 แต่ถ้าตัดสินใจแล้วว่าต้องใช้งาน Flux แนะนำให้ใช้งาน library ที่ชื่อว่า [Redux](http://redux.js.org/) แถมยังมีทางเลือกอื่น ๆ อีกมากมาย แต่แนะนำให้ใช้ library ที่ได้รับความนิยมจะดีกว่า
 
-## Learning inline styles
+## เรียนรู้ inline styles
 
 ก่อนที่ React จะถูกสร้างมานั้น นักพัฒนาจำนวนมากจะทำการเขียน CSS style เพื่อให้สามารถ reuse ได้ง่ายด้วยวิธีการที่ซับซ้อนเช่น SASS !! แต่เมื่อมี React ขึ้นมาก็ทำให้การเขียน reuse component ง่ายขึ้น และช่วยทำให้การเขียน stylesheet ซับซ้อนน้อยลง
 
@@ -100,7 +100,7 @@ React component นั้นจะถูกจัดเรียงเป็น
 
 ไม่เพียงแค่นี้ ยังมีทางเครื่องมืออื่น ๆ อีก เช่น [CSS Modules](http://glenmaddern.com/articles/css-modules) และ [react-css-modules](https://github.com/gajus/react-css-modules) โดยที่ CSS module นั้นยังสามารถเขียน CSS/SASS/LESS/Stylus ได้อีกด้วย
 
-## Learning server rendering
+## เรียนรู้ server rendering
 
 Server rendering นั้นมักจะถูกเรียกว่า "universal" หรือ "isomorphic" คือการที่ render React component ไปอยู่ในรูปแบบของ static HTML เพื่อปรับปรุงประสิทธิภาพของระบบงาน เนื่องจากไม่ต้องทำการ download JavaScript มาเพื่อทำงาน อีกทั้ง React สามารถ reuse static HTML เหล่านี้มาใช้ได้อีกด้วย
 
@@ -108,10 +108,10 @@ Server rendering จะมีประโยชน์เมื่อการ re
 
 โดยที่ Server rendering นั้นต้องการเครื่องมือจำนวนมาก ดังนั้นสำหรับผู้เริ่มต้นให้สนใจกับการพัฒนาระบบก่อน จากนั้นค่อยมาดูเรื่อง server rendering ต่อไป เนื่องจากหลาย ๆ  component อาจจะไม่ต้องการก็ได้
 
-## Learning Immutable.js
+## เรียนรู้ Immutable.js
 
 [Immutable.js](https://facebook.github.io/immutable-js/) เตรียมชุดของโครงสร้างข้อมูลสำหรับช่วยแก้ไขปัญหาเรื่องประสิทธิภาพการทำงานของระบบที่พัฒนาด้วย React ไว้ให้ เป็นชุด library ที่ดีมาก ๆ ช่วยทำให้การพัฒนารวดเร็วขึ้น แต่สิ่งที่ควรจำไว้คือ ใช้เมื่อเจอปัญหาเรื่องประสิทธิภาพการทำงานของระบบ (ใช้เมื่อจำเป็นจริง ๆ เท่านั้น)
 
-## Learning Relay, Falcor etc
+## เรียนรู้ Relay, Falcor etc
 
 สิ่งต่าง ๆ เหล่านี้คือเทคโนโลยีที่ช่วยลดจำนวนการส่ง AJAX request ไปยังฝั่ง server แน่นอนว่า ถ้าระบบงานที่พัฒนาจะยังมีปัญหาเรื่องจำนวน request ที่ส่งไปยัง server มากจนเกินไปก็ยังไม่จำเป็นต้องใช้งาน

From 88ab5326368dacb692a981a74a62066d266a3bcb Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 11:40:20 +0700
Subject: [PATCH 19/22] Fix link of create react app

---
 README-th.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README-th.md b/README-th.md
index 5468beb..8951f72 100644
--- a/README-th.md
+++ b/README-th.md
@@ -56,7 +56,7 @@ Reusable component, library และเครื่องมือต่าง
 
 ตัวอย่างของ JavaScript bundlers เช่น `webpack` และ `browserify` โดยทั้งสองเป็นตัวเลือกที่ดี แต่ทางผู้เขียนแนะนำให้ใช้ `webpack` เพราะว่ามีความสามารถมากมายและง่ายต่อการพัฒนาระบบที่มีขนาดใหญ่ แต่ข้อเสียคือ เอกสารมันแย่มาก ๆ ทำให้เกิดความสับสนได้ จึงได้เขียนเอกสารอธิบายไว้ประกอบไปด้วย [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) สำหรับการเริ่มต้น และ [how-to guide for webpack](https://github.com/petehunt/webpack-howto) สำหรับระบบที่มีความซับซ้อน
 
-ทีมพัฒนาของ React มี CLI tool ชื่อว่า [Create React App] (https://github.com/facebookincubator/create-react-app) ให้ใช้งาน ช่วยทำให้สามารถสร้าง React project ที่มาพร้อมกับ `webpack` โดยที่ไม่ต้องทำการ configuration อะไรเลย แน่นอนว่าย่อมมีข้อจำกัด แต่ว่าเป็นจุดเริ่มต้นที่ดีมาก ๆ ที่สำคัญเครื่องมือนี้มีการเพิ่มเติมและปรับปรุงแก้ไขความสามารถต่าง ๆ อยู่เป็นประจำ เช่น "ejection" ทำให้สามารถ copy พวก configuration และ dependency/library ต่าง ๆ เข้ามายัง project ได้
+ทีมพัฒนาของ React มี CLI tool ชื่อว่า [Create React App](https://github.com/facebookincubator/create-react-app) ให้ใช้งาน ช่วยทำให้สามารถสร้าง React project ที่มาพร้อมกับ `webpack` โดยที่ไม่ต้องทำการ configuration อะไรเลย แน่นอนว่าย่อมมีข้อจำกัด แต่ว่าเป็นจุดเริ่มต้นที่ดีมาก ๆ ที่สำคัญเครื่องมือนี้มีการเพิ่มเติมและปรับปรุงแก้ไขความสามารถต่าง ๆ อยู่เป็นประจำ เช่น "ejection" ทำให้สามารถ copy พวก configuration และ dependency/library ต่าง ๆ เข้ามายัง project ได้
 
 มีสิ่งหนึ่งที่ต้องเข้าใจคือ ใน module `CommonJS` นั้นจะใช้งาน function `require()` เพื่อ import หรือเรียกใช้งาน module อื่น ๆ ซึ่งเรื่องนี้ทำให้นักพัฒนาจำนวนมากเข้าใจผิดหรือสับสนกับ project `require.js` ซึ่งมันเป็นคนละเรื่องกันเลย  ที่สำคัญทางผู้เขียนยังแนะนำให้หลีกเลี่ยงการใช้งาน `require.js` อีกด้วยเนื่องจากไม่ค่อยได้รับความนิยมใน React มากนัก
 

From dcc5bb10593e35b104fc2fcf0c9f0c33c7e5b01a Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 11:42:30 +0700
Subject: [PATCH 20/22] Remove original

---
 README-th.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/README-th.md b/README-th.md
index 8951f72..a99dcca 100644
--- a/README-th.md
+++ b/README-th.md
@@ -78,10 +78,8 @@ Reusable component, library และเครื่องมือต่าง
 
 ## เรียนรู้ Flux
 
-You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.
 อาจจะเคยได้ยินคำว่า Flux มาบ้าง ซึ่งมีข้อมูลที่ผิดจำนวนมากมาย !!
 
-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.**
 มีนักพัฒนาจำนวนมากคิดว่า ถ้าต้องการสร้างระบบงานและทำการกำหนด data model ต่าง ๆ ขึ้นมา จากนั้นก็นำ Flux มาใช้งานเพื่อสร้างระบบงานขึ้นมาเลย **เป็นความคิดที่ผิดมาก ๆ สำหรับการนำ Flux มาใช้**
 
 React component นั้นจะถูกจัดเรียงเป็นลำดับชั้น ดังนั้น data model จึงอยู่ในรูปแบบเดียวกัน ซึ่งในกรณีนี้ Flux อาจจะไม่เหมาะสมเท่าไร แต่ในบางครั้ง data model อาจจะไม่เป็นลำดับชั้นก็ได้ มาดูการทำงานของ React กัน เริ่มจาก React component รับข้อมูลผ่าน `props` ซึ่งดูแล้วไม่มีอะไรถ้าจำนวน component ไม่เยอะ แต่ถ้าระบบงานเริ่มซับซ้อน จำนวน component และลำดับชั้นเริ่มเยอะ การส่งข้อมูลผ่าน props น่าจะไม่เหมาะสมเท่าไร ดังนั้นถึงเวลาที่ต้องนำ Flux มาใช้งาน

From 7c7b856748f448f760374070330a261c2823905b Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 11:43:42 +0700
Subject: [PATCH 21/22] Fix typo

---
 README-th.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README-th.md b/README-th.md
index a99dcca..5aa68c3 100644
--- a/README-th.md
+++ b/README-th.md
@@ -84,9 +84,9 @@ Reusable component, library และเครื่องมือต่าง
 
 React component นั้นจะถูกจัดเรียงเป็นลำดับชั้น ดังนั้น data model จึงอยู่ในรูปแบบเดียวกัน ซึ่งในกรณีนี้ Flux อาจจะไม่เหมาะสมเท่าไร แต่ในบางครั้ง data model อาจจะไม่เป็นลำดับชั้นก็ได้ มาดูการทำงานของ React กัน เริ่มจาก React component รับข้อมูลผ่าน `props` ซึ่งดูแล้วไม่มีอะไรถ้าจำนวน component ไม่เยอะ แต่ถ้าระบบงานเริ่มซับซ้อน จำนวน component และลำดับชั้นเริ่มเยอะ การส่งข้อมูลผ่าน props น่าจะไม่เหมาะสมเท่าไร ดังนั้นถึงเวลาที่ต้องนำ Flux มาใช้งาน
 
-**คนใช้งานต้องรู้ว่าเมื่อไรต้องใช้ Flux ถ้ายังไม่แน่ใจยังไม่เข้าใจ แสดงว่ายังไม่จไเป็นต้องใช้งาน**
+**คนใช้งานต้องรู้ว่าเมื่อไรต้องใช้ Flux ถ้ายังไม่แน่ใจยังไม่เข้าใจ แสดงว่ายังไม่จำเป็นต้องใช้งาน**
 
-แต่ถ้าตัดสินใจแล้วว่าต้องใช้งาน Flux แนะนำให้ใช้งาน library ที่ชื่อว่า [Redux](http://redux.js.org/) แถมยังมีทางเลือกอื่น ๆ อีกมากมาย แต่แนะนำให้ใช้ library ที่ได้รับความนิยมจะดีกว่า
+ถ้าตัดสินใจแล้วว่าต้องใช้งาน Flux แนะนำให้ใช้งาน library ที่ชื่อว่า [Redux](http://redux.js.org/) แถมยังมีทางเลือกอื่น ๆ อีกมากมาย แต่แนะนำให้ใช้ library ที่ได้รับความนิยมจะดีกว่า
 
 ## เรียนรู้ inline styles
 

From 03383b9d760643d4626f38e548541a74176528c7 Mon Sep 17 00:00:00 2001
From: somkiat <somkiat.p@gmail.com>
Date: Wed, 17 May 2017 11:45:03 +0700
Subject: [PATCH 22/22] Fix typo

---
 README-th.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README-th.md b/README-th.md
index 5aa68c3..5e06d15 100644
--- a/README-th.md
+++ b/README-th.md
@@ -90,11 +90,11 @@ React component นั้นจะถูกจัดเรียงเป็น
 
 ## เรียนรู้ inline styles
 
-ก่อนที่ React จะถูกสร้างมานั้น นักพัฒนาจำนวนมากจะทำการเขียน CSS style เพื่อให้สามารถ reuse ได้ง่ายด้วยวิธีการที่ซับซ้อนเช่น SASS !! แต่เมื่อมี React ขึ้นมาก็ทำให้การเขียน reuse component ง่ายขึ้น และช่วยทำให้การเขียน stylesheet ซับซ้อนน้อยลง
+ก่อนที่ React จะถูกสร้างมานั้น นักพัฒนาจำนวนมากจะทำการเขียน CSS style เพื่อให้สามารถ reuse ได้ง่าย ด้วยวิธีการที่ซับซ้อนเช่น SASS !! แต่เมื่อมี React ขึ้นมาก็ทำให้การเขียน reuse component ง่ายขึ้น และช่วยทำให้การเขียน stylesheet ซับซ้อนน้อยลง
 
 **สำหรับการเริ่มต้นกับ React นั้นให้เริ่มจากสิ่งที่เรียบง่ายก่อน**
 
-เมื่อเรารู้สึกว่าการนำ React มาใช้แล้วดีมีประโยชน์แล้ว แนะนำให้หาเทคนิทและวิธีการอื่นๆ มาใช้ เช่น [BEM](https://en.bem.info/) เป็นต้น คำแนะนำคือ ให้ ลด ละ เลิกการใช้งาน CSS processor ลง เนื่องจาก React นั้นทำให้การ reuse stylesheet ง่ายขึ้น ที่สำคัญ JavaScript bundler จะทำการแปลง stylesheet ที่เขียนให้อยู่ในรูปแบบที่มีประสิทธิภาพมากยิ่งขึ้นให้อีกด้วย สามารถดู VDO เพิ่มเติมได้จากงาน [OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)
+เมื่อเรารู้สึกว่าการนำ React มาใช้แล้วดีและมีประโยชน์แล้ว แนะนำให้หาเทคนิทและวิธีการอื่นๆ มาใช้ เช่น [BEM](https://en.bem.info/) เป็นต้น คำแนะนำคือ ให้ ลด ละ เลิกการใช้งาน CSS processor ลง เนื่องจาก React นั้นทำให้การ reuse stylesheet ง่ายขึ้น ที่สำคัญ JavaScript bundler จะทำการแปลง stylesheet ที่เขียนให้อยู่ในรูปแบบที่มีประสิทธิภาพมากยิ่งขึ้นให้อีกด้วย สามารถดู VDO เพิ่มเติมได้จากงาน [OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)
 
 ไม่เพียงแค่นี้ ยังมีทางเครื่องมืออื่น ๆ อีก เช่น [CSS Modules](http://glenmaddern.com/articles/css-modules) และ [react-css-modules](https://github.com/gajus/react-css-modules) โดยที่ CSS module นั้นยังสามารถเขียน CSS/SASS/LESS/Stylus ได้อีกด้วย