From 60fb910e5f1022a856c7441e7a4e5d3d9d16ec9f Mon Sep 17 00:00:00 2001
From: Naruth Kongurai <naruth1212@gmail.com>
Date: Mon, 19 Oct 2020 11:13:14 +0700
Subject: [PATCH 1/2] fix: resolved conflict in tutorial section

---
 content/tutorial/tutorial.md | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index d8928e5cf..c1c454b49 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -170,11 +170,7 @@ JSX นั้นมากับพลังความสามารถขอ
 
 คอมโพเนนท์ `ShoppingList` ข้างบนนั้นทำได้เพียงแค่สร้าง DOM พวกที่เป็น `<div />` และ `<li />`. แต่คุณก็สามารถสร้างและประกอบมันได้เช่นกัน ตัวอย่างเช่น เราสามารถอ้างถึงตัวรายการซื้อสินค้าทั้งหมด ด้วยการเขียนโค้ดแค่ `<ShoppingList />` React คอมโนเนนท์แต่ละตัวนั้นจะแยกการทำงานและห่อหุ้มความสามารถของตัวเองไว้อย่างชัดเจน; ซึ่งด้วยเหตุผลนี้ทำให้เราสามารถที่จะสร้าง UI ที่ซับซ้อนได้จากคอมโพเนนท์ที่เรียบง่ายเหล่านี้นั่นเอง
 
-<<<<<<< HEAD
 ## ตรวจสอบโค้ดเริ่มต้น {#inspecting-the-starter-code}
-=======
-### Inspecting the Starter Code {#inspecting-the-starter-code}
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
 
 ถ้าคุณกำลังที่จะทำแบบฝึกหัดนี้ใน **เบราเซอร์ของคุณ** เปิด **[โค้ดเริ่มต้น](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** นี้ในแท็ปใหม่ ถ้าคุณกำลังที่จะทำแบบฝึกหัดนี้ **จากเครื่องของคุณเอง** ให้ไปที่โฟลเดอร์โปรเจคของคุณ แล้วไปที่ `src/index.js` แทน (ซึ่งคุณได้มีการแตะไฟล์นี้ไปแล้วนิดหน่อยตอนที่เราทำการ [ติดตั้ง](#setup-option-2-local-development-environment) กันไป)
 
@@ -564,11 +560,7 @@ var newPlayer = Object.assign({}, player, {score: 2});
 
 #### พิจารณาว่าเมื่อใดที่จะ Re-Render ใน React {#determining-when-to-re-render-in-react}
 
-<<<<<<< HEAD
 ประโยชน์หลัก ๆ ของ การไม่เปลี่ยนรูป คือช่วยให้คุณสร้าง _คอมโพเนนท์บริสุทธิ์ (Pure components)_ ใน React ข้อมูลที่ไม่เปลี่ยนรูปสามารถระบุได้อย่างง่ายดายว่ามีการเปลี่ยนแปลงใดเกิดขึ้นบ้างซึ่งช่วยในการพิจารณาว่าเมื่อใดที่ต้อง re-rendering
-=======
-The main benefit of immutability is that it helps you build _pure components_ in React. Immutable data can easily determine if changes have been made, which helps to determine when a component requires re-rendering.
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
 
 คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ `shouldComponentUpdate()` และวิธีการสร้าง *คอมโพเนนท์บริสุทธิ์ (Pure components)* โดยการอ่าน [การปรับปรุงประสิทธิภาพ](/docs/optimizing-performance.html#examples)
 
@@ -1053,11 +1045,7 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6]
 
 **[ดูโค้ดเต็มของจุดนี้](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)**
 
-<<<<<<< HEAD
 สำหรับการเดินแต่ละครั้งในประวัติของเกมโอ-เอ็กซ์, เราสร้างรายการของ `<li>` ซึ่งมีปุ่ม `<button>` ตัวปุ่มนั้นจะมีฟังก์ชั่น `onClick` เพื่อที่จะรองรับการคลิกแล้วจะเรียกใช้ฟังก์ชั่น `this.jumpTo()` ณ ตรงนี้เราจะยังไม่ทำฟังก์ชั่น `jumpTo()` แต่ตอนนี้, เราควรจะเห็นรายการการเดินที่เกิดขึ้นภายในเกมและคำเตือนในหน้าจอคอนโซลของนักพัฒนาที่กล่าวว่า:
-=======
-For each move in the tic-tac-toe game's history, we create a list item `<li>` which contains a button `<button>`. The button has a `onClick` handler which calls a method called `this.jumpTo()`. We haven't implemented the `jumpTo()` method yet. For now, we should see a list of the moves that have occurred in the game and a warning in the developer tools console that says:
->>>>>>> bc91fe4101420f98454a59ac34c1cf1d4d4f4476
 
 >  คำเตือน:
 >  ลูกในอาเรย์แต่ละตัวควรจะมีค่าของพร็อบ "key" ที่ไม่ซ้ำกัน ตรวจสอบฟังก์ชั่น `render` ของ "คอมโพเนนท์ Game"
@@ -1207,11 +1195,7 @@ class Game extends React.Component {
 * เก็บประวัติของเกมไว้ในขณะที่เกมยังคงดำเนินไป,
 * อนุญาตให้ผู้เล่นสามารถดูประวัติเกมย้อนหลังในกระดาน
 
-<<<<<<< HEAD
 ทำได้ดีมาก! เราหวังว่าคุณจะรู้สึกว่าคุณเข้าใจวิธีการทำงานของ React ได้ดีมากขึ้น
-=======
-Nice work! We hope you now feel like you have a decent grasp of how React works.
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
 
 ตรวจสอบผลลัพธ์สุดท้ายที่นี่: **[ผลลัพธ์สุดท้าย](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**.
 

From 9289f0fbdb7f1b7476d868f94e6244d2feb7e83f Mon Sep 17 00:00:00 2001
From: Naruth Kongurai <naruth1212@gmail.com>
Date: Mon, 19 Oct 2020 11:31:03 +0700
Subject: [PATCH 2/2] fix: resolved additional conflict in docs

---
 content/docs/components-and-props.md  |  4 ----
 content/docs/conditional-rendering.md | 10 ++--------
 content/docs/handling-events.md       | 10 +---------
 content/docs/lists-and-keys.md        |  6 ------
 content/docs/state-and-lifecycle.md   |  3 ---
 5 files changed, 3 insertions(+), 30 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index c5ef190e1..aa1d584d3 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -232,11 +232,7 @@ function Comment(props) {
 
 [ทดลองเขียนบน CodePen](codepen://components-and-props/extracting-components-continued)
 
-<<<<<<< HEAD
 การแบ่งส่วนคอมโพเนนท์อาจจะดูเป็นงานที่ดูจุกจิกในตอนแรก แต่การมีชุดของคอมโพเนนท์ที่สามารถนำไปใช้ซ้ำได้เยอะๆส่งผลดีต่อการพัฒนาในแอพที่ใหญ่ขึ้น หลักการง่ายๆคือถ้ามีส่วนของการแสดงผลที่นำไปใช้หลายๆครั้ง (เช่น `Button`, `Panel`, `Avatar`) หรือคอมโพเนนท์ที่ซับซ้อน (อย่างเช่น `App`, `FeedStory`, `Comment`) การสร้างมันให้เป็นคอมโพเนนท์ก็เป็นตัวเลือกดี
-=======
-Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be extracted to a separate component.
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
 
 ## พรอพส์นั้นต้องไม่เปลี่ยนแปลง {#props-are-read-only}
 
diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index b6cb74bd0..c71bc4af1 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -122,11 +122,7 @@ ReactDOM.render(
 
 ### Inline If กับ Logical && Operator {#inline-if-with-logical--operator}
 
-<<<<<<< HEAD
 คุณอาจจะใช้ [embed expressions อะไรก็ได้ใน JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) โดยการครอบพวกมันไว้ในวงเล็บปีกกา(curly braces) โดยใช้ JavaScript logical `&&` operator ในการสร้างเงื่อนใขในการนำ element เข้ามาประกอบกันหรือไม่:
-=======
-You may [embed expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
 
 ```js{6-10}
 function Mailbox(props) {
@@ -156,10 +152,9 @@ ReactDOM.render(
 
 ด้วยเหตุนี้ถ้าเงื่อนใขเป็น `true` แล้ว element ด้านขวาที่อยู่หลัง `&&` จะปรากฏเป็นเป็นผลลัพธ์เสมอ ถ้ามันเป็น `false` แล้ว React จะเพิกเฉยและข้ามมันไป
 
-<<<<<<< HEAD
 ### Inline If-Else กับ Conditional Operator {#inline-if-else-with-conditional-operator}
-=======
-Note that returning a falsy expression will still cause the element after `&&` to be skipped but will return the falsy expression. In the example below, `<div>0</div>` will be returned by the render method.
+
+ข้อสังเกตอีกหนึ่งอย่างคือ ถึงแม้ว่า `expression` นั้นจะเป็น `false` และทำให้ผลลัพธ์ที่อยู่หลัง `&&` ถูกข้ามไป แต่ค่าที่ประมวนออกมาจะยังแสดงเป็นค่าลบ (falsy expression) ในตัวอย่างข้างล่างนี้ `<div>0</div>` จะปรากฏเป็นเป็นผลลัพธ์จากเมธอด `render`:
 
 ```javascript{2,5}
 render() {
@@ -173,7 +168,6 @@ render() {
 ```
 
 ### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator}
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
 
 อีกวิธีหนึ่งสำหรับการสร้างเงื่อนใขในการแสดงผลแบบ inline คือ การใช้ JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
 
diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md
index 55ab10916..3641905bf 100644
--- a/content/docs/handling-events.md
+++ b/content/docs/handling-events.md
@@ -8,11 +8,7 @@ redirect_from:
   - "docs/events-ko-KR.html"
 ---
 
-<<<<<<< HEAD
 การจัดการเหตุการณ์ที่เกิดบน React elements นั้นมีความคล้ายคลึงกับการจัดการเหตุการณ์บน DOM elements มาก มีเพียงไวยากรณ์ที่ต่างกันเล็กน้อย
-=======
-Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:
->>>>>>> 2ef0ee1e4fc4ce620dce1f3e0530471195dc64d1
 
 * เหตุการณ์ที่เกิดบน React ใช้วิธีเขียนชื่อแบบ camelCase แทนที่จะเป็นภาษาอังกฤษตัวพิมพ์เล็ก
 * เราส่งฟังก์ชั่นเข้ามาเป็นตัวจัดการเหตุการณ์ใน JSX เลย แทนที่จะเป็น string
@@ -58,11 +54,7 @@ function ActionLink() {
 }
 ```
 
-<<<<<<< HEAD
-โดย `e` ในที่นี้เป็นข้อมูลที่สังเคราะห์ขึ้นจากเหตุการณ์นั้น ซึ่ง React สร้างขึ้นมาตาม[ข้อกำหนดของ W3C](https://www.w3.org/TR/DOM-Level-3-Events/) ดังนั้นจึงไม่ต้องกังวลกับการรองรับการใช้งานในหลายบราว์เซอร์ ดูรายละเอียดเพิ่มเ
-=======
-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. React events do not work exactly the same as native events. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
+โดย `e` ในที่นี้เป็นข้อมูลที่สังเคราะห์ขึ้นจากเหตุการณ์นั้น ซึ่ง React สร้างขึ้นมาตาม[ข้อกำหนดของ W3C](https://www.w3.org/TR/DOM-Level-3-Events/) ดังนั้นจึงไม่ต้องกังวลกับการรองรับการใช้งานในหลายบราว์เซอร์ ดูรายละเอียดในบทความ [ข้อมูลสังเคราะห์](../docs/reference-events.md) เพื่อเรียนรู้เพิ่มเติม
 
 ในการเขียน React นั้น มักจะไม่จำเป็นที่ต้องเรียก `addEventListener` เพื่อเพิ่มข้อมูลการรับฟัง (listener) บน DOM element หลังจากที่มันถูกสร้าง เราเพียงแค่ให้ข้อมูลการรับฟัง(listener) เมื่อ element นั้นถูกนำไปแสดงผลในครั้งแรก
 
diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 0fc7e573f..204b99022 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -184,14 +184,8 @@ function ListItem(props) {
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-<<<<<<< HEAD
     // ถูกต้อง! Key ควรถูกกำหนดภายใน array
-    <ListItem key={number.toString()}
-              value={number} />
-=======
-    // Correct! Key should be specified inside the array.
     <ListItem key={number.toString()} value={number} />
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
   );
   return (
     <ul>
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 919bcdf61..12617ba50 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -418,15 +418,12 @@ this.setState(function(state, props) {
 คอมโพเนนท์นั้นอาจจะเลือกที่จะส่งผ่าน state ลงไปสู่คอมโพเนนท์ลูก ด้วยการส่งผ่าน props ของคอมโพเนนท์ลูก:
 
 ```js
-<<<<<<< HEAD
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
 นี้ยังใช้งานกันคอมโพเนนท์ที่สร้างขึ้นมาเองได้ด้วย:
 
 ```js
-=======
->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
 <FormattedDate date={this.state.date} />
 ```