Merge pull request #66 from reactjs/sync-bd0c9d8c

Sync with reactjs.org @ bd0c9d8

content/blog/2020-08-10-react-v17-rc.md

@@ -164,8 +164,7 @@ Most effects don't need to delay screen updates, so React runs them asynchronous
 
 However, when a component is unmounting, effect *cleanup* functions used to run synchronously (similar to `componentWillUnmount` being synchronous in classes). We've found that this is not ideal for larger apps because it slows down large screen transitions (e.g. switching tabs).
 
-**In React 17, the effect cleanup function will always runs asynchronously -- for example, if the component is unmounting, the cleanup will run _after_ the screen has been updated.**
-
+**In React 17, the effect cleanup function always runs asynchronously -- for example, if the component is unmounting, the cleanup runs _after_ the screen has been updated.**
 This mirrors how the effects themselves run more closely. In the rare cases where you might want to rely on the synchronous execution, you can switch to `useLayoutEffect` instead.
 
 >Note
@@ -272,20 +271,20 @@ We encourage you to try React 17.0 Release Candidate soon and [raise any issues]
 To install React 17 RC with npm, run:
 
 ```bash
-npm install [email protected].2 [email protected].2
+npm install [email protected].3 [email protected].3
 ```
 
 To install React 17 RC with Yarn, run:
 
 ```bash
-yarn add [email protected].2 [email protected].2
+yarn add [email protected].3 [email protected].3
 ```
 
 We also provide UMD builds of React via a CDN:
 
 ```html
-<script crossorigin src="https://unpkg.com/[email protected].2/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/[email protected].2/umd/react-dom.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/[email protected].3/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/[email protected].3/umd/react-dom.production.min.js"></script>
 ```
 
 Refer to the documentation for [detailed installation instructions](/docs/installation.html).
@@ -356,6 +355,7 @@ Refer to the documentation for [detailed installation instructions](/docs/instal
 * Remove `unstable_discreteUpdates` and `unstable_flushDiscreteUpdates`. ([@trueadm](https://github.com/trueadm) in [#18825](https://github.com/facebook/react/pull/18825))
 * Remove the `timeoutMs` argument. ([@acdlite](https://github.com/acdlite) in [#19703](https://github.com/facebook/react/pull/19703))
 * Disable `<div hidden />` prerendering in favor of a different future API. ([@acdlite](https://github.com/acdlite) in [#18917](https://github.com/facebook/react/pull/18917))
+* Add `unstable_expectedLoadTime` to Suspense for CPU-bound trees. ([@acdlite](https://github.com/acdlite) in [#19936](https://github.com/facebook/react/pull/19936))
 * Add an experimental `unstable_useOpaqueIdentifier` Hook. ([@lunaruan](https://github.com/lunaruan) in [#17322](https://github.com/facebook/react/pull/17322))
 * Add an experimental `unstable_startTransition` API. ([@rickhanlonii](https://github.com/rickhanlonii) in [#19696](https://github.com/facebook/react/pull/19696))
 * Using `act` in the test renderer no longer flushes Suspense fallbacks. ([@acdlite](https://github.com/acdlite) in [#18596](https://github.com/facebook/react/pull/18596))

content/blog/2020-09-22-introducing-the-new-jsx-transform.md

@@ -54,7 +54,7 @@ function App() {
 
 However, this is not perfect:
 
-* Because JSX compiled into `React.createElement`, `React` needed to be in scope if you use JSX.
+* Because JSX was compiled into `React.createElement`, `React` needed to be in scope if you used JSX.
 * There are some [performance improvements and simplifications](https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation) that `React.createElement` does not allow.
 
 To solve these issues, React 17 introduces two new entry points to the React package that are intended to only be used by compilers like Babel and TypeScript. Instead of transforming JSX to `React.createElement`, **the new JSX transform** automatically imports special functions from those new entry points in the React package and calls them.

content/community/conferences.md

@@ -474,4 +474,4 @@ May 14-15, 2020 in Paris, France
 ### React Native EU 2020 {#react-native-eu-2020}
 September 3-4, 2020 - remote event
 
-[Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [YouTube](https://www.youtube.com/watch?v=m0GfmlGFh3E&list=PLZ3MwD-soTTHy9_88QPLF8DEJkvoB5Tl-) - [Instagram](https://www.instagram.com/reactnative_eu/)
+[Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [YouTube](https://www.youtube.com/watch?v=m0GfmlGFh3E&list=PLZ3MwD-soTTHy9_88QPLF8DEJkvoB5Tl-) - [Instagram](https://www.instagram.com/reactnative_eu/)

content/docs/components-and-props.md

@@ -232,7 +232,11 @@ 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}
 

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:
->>>>>>> 8f7ffa473905148fd5c7ecfd7fed5dabbd261bf0
 
 ```js{6-10}
 function Mailbox(props) {
@@ -156,24 +152,7 @@ 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.
-
-```javascript{2,5}
-render() {
-  const count = 0;
-  return (
-    <div>
-      { count && <h1>Messages: {count}</h1>}
-    </div>
-  );
-}
-```
-
 ### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator}
->>>>>>> 8f7ffa473905148fd5c7ecfd7fed5dabbd261bf0
 
 อีกวิธีหนึ่งสำหรับการสร้างเงื่อนใขในการแสดงผลแบบ inline คือ การใช้ JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
 

content/docs/design-principles.md

@@ -92,7 +92,7 @@ There is an internal joke in the team that React should have been called "Schedu
 
 Providing a good developer experience is important to us.
 
-For example, we maintain [React DevTools](https://github.com/facebook/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.
+For example, we maintain [React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.
 
 We also try to go an extra mile to provide helpful developer warnings. For example, React warns you in development if you nest tags in a way that the browser doesn't understand, or if you make a common typo in the API. Developer warnings and the related checks are the main reason why the development version of React is slower than the production version.
 

content/docs/handling-events.md

@@ -54,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.
->>>>>>> 8f7ffa473905148fd5c7ecfd7fed5dabbd261bf0
 
 ในการเขียน React นั้น มักจะไม่จำเป็นที่ต้องเรียก `addEventListener` เพื่อเพิ่มข้อมูลการรับฟัง (listener) บน DOM element หลังจากที่มันถูกสร้าง เราเพียงแค่ให้ข้อมูลการรับฟัง(listener) เมื่อ element นั้นถูกนำไปแสดงผลในครั้งแรก
 

content/docs/lists-and-keys.md

@@ -184,9 +184,14 @@ 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>

content/docs/state-and-lifecycle.md

@@ -418,12 +418,15 @@ this.setState(function(state, props) {
 คอมโพเนนท์นั้นอาจจะเลือกที่จะส่งผ่าน state ลงไปสู่คอมโพเนนท์ลูก ด้วยการส่งผ่าน props ของคอมโพเนนท์ลูก:
 
 ```js
+<<<<<<< HEAD
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
 นี้ยังใช้งานกันคอมโพเนนท์ที่สร้างขึ้นมาเองได้ด้วย:
 
 ```js
+=======
+>>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
 <FormattedDate date={this.state.date} />
 ```
 

content/tutorial/tutorial.md

@@ -170,7 +170,11 @@ 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) กันไป)
 
@@ -560,7 +564,11 @@ 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)
 
@@ -1195,7 +1203,11 @@ 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)**.
 

src/components/Banner/Banner.js

@@ -186,4 +186,4 @@ export default function Banner() {
       </div>
     </div>
   );
-}
+}

src/components/LayoutHeader/Header.js

@@ -50,34 +50,6 @@ const Header = ({location}: {location: Location}) => (
         </div>
       </Container>
     </ContainerWrapper>
-    <Container>
-      <div
-        css={{
-          height: 60,
-          fontSize: 20,
-          padding: 20,
-          textAlign: 'center',
-          [media.between('small', 'large')]: {
-            fontSize: 22,
-            height: 60,
-          },
-          [media.lessThan('small')]: {
-            height: 80,
-          },
-          [media.greaterThan('medium')]: {
-            fontSize: 25,
-          },
-        }}>
-        Black Lives Matter.{' '}
-        <a
-          style={{color: colors.brand}}
-          target="_blank"
-          rel="noopener"
-          href="https://support.eji.org/give/153413/#!/donation/checkout">
-          Support&nbsp;the&nbsp;Equal&nbsp;Justice&nbsp;Initiative.
-        </a>
-      </div>
-    </Container>
     <Container>
       <div
         css={{