reactjs · jakubdrozdek · Aug 26, 2019 · Aug 6, 2019 · Aug 7, 2019 · Aug 8, 2019
diff --git a/content/blog/2015-09-02-new-react-developer-tools.md b/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.
 

diff --git a/content/blog/2018-03-27-update-on-async-rendering.md b/content/blog/2018-03-27-update-on-async-rendering.md
@@ -25,6 +25,15 @@ These lifecycle methods have often been misunderstood and subtly misused; furthe
 
 We maintain over 50,000 React components at Facebook, and we don't plan to rewrite them all immediately. We understand that migrations take time. We will take the gradual migration path along with everyone in the React community.
 
+If you don't have the time to migrate or test these components, we recommend running a ["codemod"](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) script that renames them automatically:
+
+```bash
+cd your_project
+npx react-codemod rename-unsafe-lifecycles
+```
+
+Learn more about this codemod on the [16.9.0 release post.](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#renaming-unsafe-lifecycle-methods) 
+
 ---
 
 ## Migrating from Legacy Lifecycles {#migrating-from-legacy-lifecycles}

diff --git a/content/blog/2018-11-27-react-16-roadmap.md b/content/blog/2018-11-27-react-16-roadmap.md
@@ -4,6 +4,11 @@ author: [gaearon]
 ---
 
 You might have heard about features like "Hooks", "Suspense", and "Concurrent Rendering" in the previous blog posts and talks. In this post, we'll look at how they fit together and the expected timeline for their availability in a stable release of React.
+
+> An Update from August, 2019
+>
+> You can find an update to this roadmap in the [React 16.9 release blog post](/blog/2019/08/08/react-v16.9.0.html#an-update-to-the-roadmap).
+
 
 ## tl;dr {#tldr}
 

diff --git a/content/blog/2019-02-06-react-v16.8.0.md b/content/blog/2019-02-06-react-v16.8.0.md
@@ -50,7 +50,7 @@ Even while Hooks were in alpha, the React community created many interesting [ex
 
 ## Testing Hooks {#testing-hooks}
 
-We have added a new API called `ReactTestUtils.act()` in this release. It ensures that the behavior in your tests matches what happens in the browser more closely. We recommend to wrap any code rendering and triggering updates to your components into `act()` calls. Testing libraries can also wrap their APIs with it (for example, [`react-testing-library`](https://github.com/kentcdodds/react-testing-library)'s `render` and `fireEvent` utilities do this).
+We have added a new API called `ReactTestUtils.act()` in this release. It ensures that the behavior in your tests matches what happens in the browser more closely. We recommend to wrap any code rendering and triggering updates to your components into `act()` calls. Testing libraries can also wrap their APIs with it (for example, [`react-testing-library`](https://testing-library.com/react)'s `render` and `fireEvent` utilities do this).
 
 For example, the counter example from [this page](/docs/hooks-effect.html) can be tested like this:
 
@@ -95,7 +95,7 @@ The calls to `act()` will also flush the effects inside of them.
 
 If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.
 
-To reduce the boilerplate, we recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to encourage writing tests that use your components as the end users do.
+To reduce the boilerplate, we recommend using [`react-testing-library`](https://testing-library.com/react) which is designed to encourage writing tests that use your components as the end users do.
 
 ## Thanks {#thanks}
 

diff --git a/content/blog/2019-08-08-react-v16.9.0.md b/content/blog/2019-08-08-react-v16.9.0.md
diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md
@@ -0,0 +1,79 @@
+---
+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
+
+# Checkout the previous release branch
+git checkout v3
+
+# 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).
diff --git a/content/community/articles.md b/content/community/articles.md
@@ -13,3 +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/) - Eric Bishard's step-by-step guide to learning React Hooks.
diff --git a/content/community/conferences.md b/content/community/conferences.md
@@ -12,6 +12,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
+### React Conf Iran 2019 {#react-conf-iran-2019}
+August 29, 2019. Tehran, Iran.
+
+[Website](https://reactconf.ir/) - [Twitter](https://twitter.com/reactconf_ir) - [Instagram](https://www.instagram.com/reactconf/)
+
 ### React Rally 2019 {#react-rally-2019}
 August 22-23, 2019. Salt Lake City, USA.
 
@@ -75,7 +80,18 @@ February 27 & 28, 2020 in Sydney, Australia
 ### Render-Atlanta 2020 {#render-atlanta-2020}
 May 4-6, 2020. Atlanta, GA, USA.
 
-[Website](https://renderatl.com)
+[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) 
+
+### React Finland 2020 {#react-finland-2020}
+May 26-29 in Helsinki, Finland
+
+[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
+
+### 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}
 

diff --git a/content/community/courses.md b/content/community/courses.md
@@ -8,6 +8,8 @@ permalink: community/courses.html
 
 ## Free Courses {#free-courses}
 
+- [Glitch: React Starter Kit](https://glitch.com/culture/react-starter-kit/) - A free, 5-part video course with interactive code examples that will help you learn React.
+
 - [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React.
 
 - [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - This series will explore the basic fundamentals of React to get you started.

diff --git a/content/community/meetups.md b/content/community/meetups.md
@@ -22,6 +22,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Brazil {#brazil}
 * [Belo Horizonte](https://www.meetup.com/reactbh/)
 * [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/)
+* [Joinville](https://www.meetup.com/pt-BR/React-Joinville/)
 * [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
 * [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/)
 
@@ -68,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/)
@@ -78,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/)
 
@@ -107,8 +112,12 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Scotland (UK) {#scotland-uk}
 * [Edinburgh](https://www.meetup.com/React-Scotland/)
 
+## Singapore {#singapore}
+* [Singapore - React Knowledgeable](https://reactknowledgeable.org/)
+
 ## Spain {#spain}
 * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
+* [Canarias](https://www.meetup.com/React-Canarias/)
 
 ## Sweden {#sweden}
 * [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
@@ -130,6 +139,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Leesburg, VA - ReactJS](https://www.meetup.com/React-NOVA/)
 * [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/)
 * [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/)
+* [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/)
 * [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/)
 * [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
 * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)

diff --git a/content/community/nav.yml b/content/community/nav.yml
@@ -34,8 +34,6 @@
       title: Model Management
     - id: data-fetching
       title: Data Fetching
-    - id: testing
-      title: Testing
     - id: ui-components
       title: UI Components
     - id: misc

diff --git a/content/community/tools-testing.md b/content/community/tools-testing.md
diff --git a/content/community/videos.md b/content/community/videos.md
@@ -53,8 +53,7 @@ Facebook engineers Bill Fisher and Jing Chen talk about Flux and React at Forwar
 ### Going Big with React {#going-big-with-react}
 
 Areeb Malik investigates how React performs in a high stress situation, and how it helped his team build safe code on a massive scale - (2014 - 0h31m).
-[![going big with React](https://i.vimeocdn.com/video/481670116_650.jpg)]
-
+<iframe title="Areeb Malik : Going big with React" width="650" height="366" src="https://www.youtube-nocookie.com/embed/9qcBlN6-qwY" frameborder="0" allowfullscreen></iframe>
 
 ### Rethinking Best Practices {#rethinking-best-practices}
 

diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md
@@ -122,7 +122,9 @@ it('potrafi wyrenderować i aktualizować licznik', () => {
 });
 ```
 
-Zwróć uwagę, że przesyłanie zdarzeń DOM działa tylko wtedy, gdy kontener jest umieszczony w `document`. Aby uniknąć powtarzania szablonowego kodu, możesz użyć biblioteki pomocniczej, jak na przykład [`react-testing-library`](https://github.com/kentcdodds/react-testing-library).
+Zwróć uwagę, że przesyłanie zdarzeń DOM działa tylko wtedy, gdy kontener jest umieszczony w `document`. Aby uniknąć powtarzania szablonowego kodu, możesz użyć biblioteki pomocniczej, jak na przykład [React Testing Library](https://testing-library.com/react).
+
+W [`przykładach`](/docs/testing-recipes.html) znajdziesz więcej szczegółów na temat zachowania funkcji `act()`, jak również przykłady jej użycia.
 
 * * *
 
@@ -139,7 +141,7 @@ Jeśli przekażesz do tej funkcji atrapę komponentu (ang. *mocked component*),
 
 > Uwaga:
 >
-> Funkcja `mockComponent()` jest przestarzała. Zamiast niej zalecamy używanie ["płytkiego renderowania"](/docs/shallow-renderer.html) (ang. *shallow rendering*) lub funkcji [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock).
+> Funkcja `mockComponent()` jest przestarzała. Zamiast niej zalecamy używanie funkcji [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock).
 
 * * *
 

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
@@ -7,7 +7,7 @@ permalink: docs/code-splitting.html
 ## Pakowanie {#bundling}
 
 Większość reactowych aplikacji będzie "dołączała" swoje pliki poprzez narzędzia takie jak
-[Webpack](https://webpack.js.org/) czy [Browserify](http://browserify.org/).
+[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) czy [Browserify](http://browserify.org/).
 Pakowanie to proces śledzenia zaimportowanych plików i łączenia ich w pojedynczy plik tzw. "bundle" (pol. *paczka*).
 Taka paczka może zostać umieszczona na stronie w celu załadowania całej aplikacji naraz.
 

diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
@@ -217,7 +217,7 @@ Its source code is located in [`packages/react-reconciler`](https://github.com/f
 
 ### Event System {#event-system}
 
-React implements a synthetic event system which is agnostic of the renderers and works both with React DOM and React Native. Its source code is located in [`packages/events`](https://github.com/facebook/react/tree/master/packages/events).
+React implements a synthetic event system which is agnostic of the renderers and works both with React DOM and React Native. Its source code is located in [`packages/events`](https://github.com/facebook/react/tree/master/packages/react-events).
 
 There is a [video with a deep code dive into it](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 mins).
 

diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md
@@ -36,9 +36,9 @@ class ErrorBoundary extends React.Component {
     return { hasError: true };
   }
 
-  componentDidCatch(error, info) {
+  componentDidCatch(error, errorInfo) {
     // You can also log the error to an error reporting service
-    logErrorToMyService(error, info);
+    logErrorToMyService(error, errorInfo);
   }
 
   render() {

diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md
@@ -48,4 +48,4 @@ _Note that this functionality is not a part of React, but provided by third-part
 
 ### Can I do animations in React? {#can-i-do-animations-in-react}
 
-React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example.
+React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion) or [React Spring](https://github.com/react-spring/react-spring), for example.
diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md
@@ -131,6 +131,7 @@ function Example() {
   useEffect(() => {
     document.title = `Kliknięto ${count} razy`;
   });
+}
 ```
 
 Deklarujemy zmienną stanu `count`, a następnie mówimy Reactowi, że będziemy chcieli użyć efektu. Zatem do hooka `useEffect` przekazujemy funkcję, która *jest* naszym efektem. Wewnątrz tego efektu ustawiamy tytuł dokumentu, korzystając z interfejsu API przeglądarki (`document.title`). Możemy odczytać ostatnią wartość zmiennej `count` z wewnątrz efektu, ponieważ znajduje się ona w zasięgu naszej funkcji. Kiedy React będzie renderować nasz komponent, zapamięta użyty przez nas efekt, a następnie wywoła go po zaktualizowaniu drzewa DOM. Dzieje się to przy każdym renderowaniu, włączając pierwsze.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -48,4 +48,4 @@ _Note that this functionality is not a part of React, but provided by third-part

		### Can I do animations in React? {#can-i-do-animations-in-react}

		React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example.
		React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion) or [React Spring](https://github.com/react-spring/react-spring), for example.
-Original file line number
+Diff line change
@@ Expand Up / @@ -131,6 +131,7 @@ function Example() { @@
       useEffect(() => {
         document.title = `Kliknięto ${count} razy`;
       });
+    }
     ```
     Deklarujemy zmienną stanu `count`, a następnie mówimy Reactowi, że będziemy chcieli użyć efektu. Zatem do hooka `useEffect` przekazujemy funkcję, która *jest* naszym efektem. Wewnątrz tego efektu ustawiamy tytuł dokumentu, korzystając z interfejsu API przeglądarki (`document.title`). Możemy odczytać ostatnią wartość zmiennej `count` z wewnątrz efektu, ponieważ znajduje się ona w zasięgu naszej funkcji. Kiedy React będzie renderować nasz komponent, zapamięta użyty przez nas efekt, a następnie wywoła go po zaktualizowaniu drzewa DOM. Dzieje się to przy każdym renderowaniu, włączając pierwsze.
@@ Expand Down @@