merging all conflicts

content/blog/2015-09-02-new-react-developer-tools.md

@@ -20,7 +20,7 @@ It contains a handful of new features, including:
 
 ## Installation {#installation}
 
-Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
+Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
 
 If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to `chrome://extensions` and click "Update extensions now" if you'd like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes.
 

content/blog/2019-08-15-new-react-devtools.md

@@ -0,0 +1,76 @@
+---
+title: "Introducing the New React DevTools"
+author: [bvaughn]
+---
+We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
+
+## What's changed?
+
+A lot has changed in version 4!
+At a high level, this new version should offer significant performance gains and an improved navigation experience.
+It also offers full support for React Hooks, including inspecting nested objects.
+
+![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png)
+
+[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
+
+## Which versions of React are supported?
+
+**`react-dom`**
+
+* `0`-`14.x`: Not supported
+* `15.x`: Supported (except for the new component filters feature)
+* `16.x`: Supported
+
+**`react-native`**
+* `0`-`0.61`: Not supported
+* `0.62`: Will be supported (when 0.62 is released)
+
+## How do I get the new DevTools?
+
+React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
+If you have already installed the extension, it should update automatically within the next couple of hours.
+
+If you use the standalone shell (e.g. in React Native or Safari), you can install the new version [from NPM](https://www.npmjs.com/package/react-devtools):
+
+```shell
+npm install -g react-devtools@^4
+```
+
+## Where did all of the DOM elements go?
+
+The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
+Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:
+
+![DevTools component filters](../images/blog/devtools-component-filters.gif)
+
+## How do I get the old version back?
+
+If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
+
+```shell
+npm install --dev react-devtools@^3
+```
+
+For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:
+
+```shell
+# Checkout the extension source
+git clone https://github.com/facebook/react-devtools
+
+cd react-devtools
+
+# Install dependencies and build the unpacked extension
+yarn install
+yarn build:extension
+
+# Follow the on-screen instructions to complete installation
+```
+
+## Thank you!
+
+We'd like to thank everyone who tested the early release of DevTools version 4.
+Your feedback helped improve this initial release significantly.
+
+We still have many exciting features planned and feedback is always welcome!
+Please feel free to open a [GitHub issue](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) or tag [@reactjs on Twitter](https://twitter.com/reactjs).

content/community/articles.md

@@ -13,4 +13,4 @@ permalink: community/articles.html
 - [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's recommended timeline for learning React and the React ecosystem.
 - [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - Joshua Comeau's guide to showcase how easy it can be to start modern React development.
 - [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state.
-- [The Hands-On Guide to Learning React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/)
+- [The Hands-On Guide to Learning React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/) - Eric Bishard's step-by-step guide to learning React Hooks.

content/community/conferences.md

@@ -82,6 +82,12 @@ May 4-6, 2020. Atlanta, GA, USA.
 
 [Website](https://renderatl.com)
 
+### React Next 2020 {#react-next-2020}
+June 15, 2020. Tel Aviv, Israel.
+
+[Website](https://react-next.com/) - [Twitter](https://twitter.com/reactnext) - [Facebook](https://www.facebook.com/ReactNext2016/) 
+
+
 ## Past Conferences {#past-conferences}
 
 ### React.js Conf 2015 {#reactjs-conf-2015}

content/community/meetups.md

@@ -69,6 +69,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## India {#india}
 * [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
+* [Chandigarh](https://www.meetup.com/Chandigarh-React-Developers/)
 * [Chennai](https://www.meetup.com/React-Chennai/)
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
 * [Jaipur](https://www.meetup.com/JaipurJS-Developer-Meetup/)
@@ -79,6 +80,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Israel {#israel}
 * [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
 
+## Malaysia {#malaysia}
+* [Penang](https://www.facebook.com/groups/reactpenang/)
+
 ## Netherlands {#netherlands}
 * [Amsterdam](https://www.meetup.com/React-Amsterdam/)
 

content/docs/addons-test-utils.md

@@ -124,7 +124,11 @@ it('can render and update a counter', () => {
 
 千万不要忘记，只有将 DOM 容器添加到 `document` 时，触发 DOM 事件才生效。你可以使用类似于 [React Testing Library](https://testing-library.com/react) 等库来减少样板代码（boilerplate code）。
 
+<<<<<<< HEAD
 - [`recipes`](/docs/recipes.html) 文档包含了关于 `act()` 函数的示例、用法及更多详细信息。
+=======
+- The [`recipes`](/docs/testing-recipes.html) document contains more details on how `act()` behaves, with examples and usage.
+>>>>>>> de497e250340ff597ce4964279369f16315b8b4b
 
 * * *
 

content/docs/hooks-faq.md

@@ -64,13 +64,18 @@ prev: hooks-reference.html
 从 16.8.0 开始，React 在以下模块中包含了 React Hook 的稳定实现：
 
 * React DOM
+* React Native
 * React DOM Server
 * React Test Renderer
 * React Shallow Renderer
 
 请注意，**要启用 Hook，所有 React 相关的 package 都必须升级到 16.8.0 或更高版本**。如果你忘记更新诸如 React DOM 之类的 package，Hook 将无法运行。
 
+<<<<<<< HEAD
 React Native 0.59 及更新版本会支持 Hook。
+=======
+[React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) and above support Hooks.
+>>>>>>> de497e250340ff597ce4964279369f16315b8b4b
 
 ### 我需要重写所有的 class 组件吗？ {#do-i-need-to-rewrite-all-my-class-components}
 

content/docs/hooks-intro.md

@@ -31,7 +31,12 @@ function Example() {
 
 >注意
 >
+<<<<<<< HEAD
 >React 16.8.0 是第一个支持 Hook 的版本。升级时，请注意更新所有的 package，包括 React DOM。React Native 将在下一个稳定版本中支持 Hook。
+=======
+>React 16.8.0 is the first release to support Hooks. When upgrading, don't forget to update all packages, including React DOM.
+>React Native supports Hooks since [the 0.59 release of React Native](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059).
+>>>>>>> de497e250340ff597ce4964279369f16315b8b4b
 
 ## 视频介绍 {#video-introduction}
 

content/docs/jsx-in-depth.md

@@ -423,7 +423,11 @@ function ListOfTenThings() {
 <div>{true}</div>
 ```
 
+<<<<<<< HEAD
 这有助于依据特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 `showHeader` 为 `true` 时，才会渲染 `<Header />`：
+=======
+This can be useful to conditionally render React elements. This JSX renders the `<Header />` component only if `showHeader` is `true`:
+>>>>>>> de497e250340ff597ce4964279369f16315b8b4b
 
 ```js{2}
 <div>

content/docs/optimizing-performance.md

@@ -213,6 +213,7 @@ React 构建并维护了一套内部的 UI 渲染描述。它包含了来自你
 
 当一个组件的 props 或 state 变更，React 会将最新返回的元素与之前渲染的元素进行对比，以此决定是否有必要更新真实的 DOM。当它们不相同时，React 会更新该 DOM。
 
+<<<<<<< HEAD
 你可以通过 React 开发者工具可视化地查看这些重新渲染的虚拟 DOM：
 
 - [Chrome 浏览器扩展](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
@@ -232,6 +233,9 @@ React 构建并维护了一套内部的 UI 渲染描述。它包含了来自你
 注意到当我们输入第二个待办事项时，第一个待办事项在每次按键时也一并闪烁了。这意味着输入时，它也被 React 一并重新渲染了。这通常被称作“无用的”渲染。我们知道这是毫无必要的，因为第一个待办事项并没有改变，但是 React 并不知道。
 
 即使 React 只更新改变了的 DOM 节点，重新渲染仍然花费了一些时间。在大部分情况下它并不是问题，不过如果它已经慢到让人注意了，你可以通过覆盖生命周期方法 `shouldComponentUpdate` 来进行提速。该方法会在重新渲染前被触发。其默认实现总是返回 `true`，让 React 执行更新：
+=======
+Even though React only updates the changed DOM nodes, re-rendering still takes some time. In many cases it's not a problem, but if the slowdown is noticeable, you can speed all of this up by overriding the lifecycle function `shouldComponentUpdate`, which is triggered before the re-rendering process starts. The default implementation of this function returns `true`, leaving React to perform the update:
+>>>>>>> de497e250340ff597ce4964279369f16315b8b4b
 
 ```javascript
 shouldComponentUpdate(nextProps, nextState) {
@@ -399,6 +403,7 @@ function updateColorMap(colormap) {
 
 如果你在使用 Create React App，`Object.assign` 以及对象扩展运算符已经默认支持了。
 
+<<<<<<< HEAD
 ## 使用不可变数据结构 {#using-immutable-data-structures}
 
 [Immutable.js](https://github.com/facebook/immutable-js) 是另一种解决方案。它通过结构共享提供了不可变、持久化集合：
@@ -432,3 +437,6 @@ x === z; // true
 还有其他可以帮助实现不可变数据的库，分别是 [Immer](https://github.com/mweststrate/immer)， [immutability-helper](https://github.com/kolodny/immutability-helper) 以及 [seamless-immutable](https://github.com/rtfeldman/seamless-immutable)。
 
 不可变数据结构使你可以方便地追踪对象的变化，这是应用 `shouldComponentUpdate` 所需要的。让性能得以提升。
+=======
+When you deal with deeply nested objects, updating them in an immutable way can feel convoluted. If you run into this problem, check out [Immer](https://github.com/mweststrate/immer) or [immutability-helper](https://github.com/kolodny/immutability-helper). These libraries let you write highly readable code without losing the benefits of immutability.
+>>>>>>> de497e250340ff597ce4964279369f16315b8b4b

content/docs/reference-profiler.md

@@ -44,7 +44,7 @@ render(
     <Profiler id="Main" onRender={callback}>
       <Main {...props} />
     </Profiler>
-    </App>
+  </App>
 );
 ```
 

content/docs/reference-test-renderer.md

@@ -103,7 +103,11 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
 TestRenderer.create(element, options);
 ```
 
+<<<<<<< HEAD
 通过传来的 React 元素创建一个 `TestRenderer` 实例。它并不使用真实的 DOM，但是它依然将组件树完整地渲染到内存，以便于你对它进行断言。返回的实例拥有以下的方法和属性。
+=======
+Create a `TestRenderer` instance with the passed React element. It doesn't use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. Returns a [TestRenderer instance](#testrenderer-instance).
+>>>>>>> de497e250340ff597ce4964279369f16315b8b4b
 
 ### `TestRenderer.act()` {#testrendereract}
 

content/docs/static-type-checking.md

@@ -88,21 +88,21 @@ Flow 通过这种类型注释的特殊语法扩展了 JavaScript 语言。但是
 如果你使用 Yarn，执行：
 
 ```bash
-yarn add --dev babel-preset-flow
+yarn add --dev @babel/preset-flow
 ```
 
 如果你使用 npm，执行：
 
 ```bash
-npm install --save-dev babel-preset-flow
+npm install --save-dev @babel/preset-flow
 ```
 
 接下来将 `flow` preset 添加到你的 [Babel 配置](https://babeljs.io/docs/usage/babelrc/) 配置中。例如，如果你通过 `.babelrc` 文件配置 Babel，它可能会如下所示：
 
 ```js{3}
 {
   "presets": [
-    "flow",
+    "@babel/preset-flow",
     "react"
   ]
 }

src/components/CodeEditor/CodeEditor.js

@@ -269,7 +269,7 @@ class CodeEditor extends Component {
 
   _updateState(code, showJSX = true) {
     try {
-      let newState = {
+      const newState = {
         compiled: compileES5(code),
         error: null,
       };