Skip to content

Commit e11794d

Browse files
merging all conflicts
2 parents d5ecc36 + 519a3ae commit e11794d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1363
-110
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ It contains a handful of new features, including:
2020

2121
## Installation {#installation}
2222

23-
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.
23+
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.
2424

2525
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.
2626

content/blog/2018-03-27-update-on-async-rendering.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,15 @@ These lifecycle methods have often been misunderstood and subtly misused; furthe
2525

2626
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.
2727

28+
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:
29+
30+
```bash
31+
cd your_project
32+
npx react-codemod rename-unsafe-lifecycles
33+
```
34+
35+
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)
36+
2837
---
2938

3039
## Migrating from Legacy Lifecycles {#migrating-from-legacy-lifecycles}

content/blog/2018-11-27-react-16-roadmap.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ author: [gaearon]
44
---
55

66
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.
7+
8+
> An Update from August, 2019
9+
>
10+
> 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).
11+
712

813
## tl;dr {#tldr}
914

content/blog/2019-02-06-react-v16.8.0.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ Even while Hooks were in alpha, the React community created many interesting [ex
5050

5151
## Testing Hooks {#testing-hooks}
5252

53-
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).
53+
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).
5454

5555
For example, the counter example from [this page](/docs/hooks-effect.html) can be tested like this:
5656

@@ -95,7 +95,7 @@ The calls to `act()` will also flush the effects inside of them.
9595

9696
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.
9797

98-
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.
98+
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.
9999

100100
## Thanks {#thanks}
101101

content/blog/2019-08-08-react-v16.9.0.md

Lines changed: 241 additions & 0 deletions
Large diffs are not rendered by default.
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: "Introducing the New React DevTools"
3+
author: [bvaughn]
4+
---
5+
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
6+
7+
## What's changed?
8+
9+
A lot has changed in version 4!
10+
At a high level, this new version should offer significant performance gains and an improved navigation experience.
11+
It also offers full support for React Hooks, including inspecting nested objects.
12+
13+
![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png)
14+
15+
[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.
16+
17+
## Which versions of React are supported?
18+
19+
**`react-dom`**
20+
21+
* `0`-`14.x`: Not supported
22+
* `15.x`: Supported (except for the new component filters feature)
23+
* `16.x`: Supported
24+
25+
**`react-native`**
26+
* `0`-`0.61`: Not supported
27+
* `0.62`: Will be supported (when 0.62 is released)
28+
29+
## How do I get the new DevTools?
30+
31+
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/).
32+
If you have already installed the extension, it should update automatically within the next couple of hours.
33+
34+
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):
35+
36+
```shell
37+
npm install -g react-devtools@^4
38+
```
39+
40+
## Where did all of the DOM elements go?
41+
42+
The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
43+
Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:
44+
45+
![DevTools component filters](../images/blog/devtools-component-filters.gif)
46+
47+
## How do I get the old version back?
48+
49+
If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
50+
51+
```shell
52+
npm install --dev react-devtools@^3
53+
```
54+
55+
For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:
56+
57+
```shell
58+
# Checkout the extension source
59+
git clone https://github.com/facebook/react-devtools
60+
61+
cd react-devtools
62+
63+
# Checkout the previous release branch
64+
git checkout v3
65+
66+
# Install dependencies and build the unpacked extension
67+
yarn install
68+
yarn build:extension
69+
70+
# Follow the on-screen instructions to complete installation
71+
```
72+
73+
## Thank you!
74+
75+
We'd like to thank everyone who tested the early release of DevTools version 4.
76+
Your feedback helped improve this initial release significantly.
77+
78+
We still have many exciting features planned and feedback is always welcome!
79+
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ permalink: community/articles.html
1313
- [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's recommended timeline for learning React and the React ecosystem.
1414
- [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.
1515
- [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state.
16+
- [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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
1212

1313
## Upcoming Conferences {#upcoming-conferences}
1414

15+
### React Conf Iran 2019 {#react-conf-iran-2019}
16+
August 29, 2019. Tehran, Iran.
17+
18+
[Website](https://reactconf.ir/) - [Twitter](https://twitter.com/reactconf_ir) - [Instagram](https://www.instagram.com/reactconf/)
19+
1520
### React Rally 2019 {#react-rally-2019}
1621
August 22-23, 2019. Salt Lake City, USA.
1722

@@ -75,7 +80,18 @@ February 27 & 28, 2020 in Sydney, Australia
7580
### Render-Atlanta 2020 {#render-atlanta-2020}
7681
May 4-6, 2020. Atlanta, GA, USA.
7782

78-
[Website](https://renderatl.com)
83+
[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/)
84+
85+
### React Finland 2020 {#react-finland-2020}
86+
May 26-29 in Helsinki, Finland
87+
88+
[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
89+
90+
### React Next 2020 {#react-next-2020}
91+
June 15, 2020. Tel Aviv, Israel.
92+
93+
[Website](https://react-next.com/) - [Twitter](https://twitter.com/reactnext) - [Facebook](https://www.facebook.com/ReactNext2016/)
94+
7995

8096
## Past Conferences {#past-conferences}
8197

content/community/courses.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ permalink: community/courses.html
88

99
## Free Courses {#free-courses}
1010

11+
- [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.
12+
1113
- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React.
1214

1315
- [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.

content/community/meetups.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
2222
## Brazil {#brazil}
2323
* [Belo Horizonte](https://www.meetup.com/reactbh/)
2424
* [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/)
25+
* [Joinville](https://www.meetup.com/pt-BR/React-Joinville/)
2526
* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
2627
* [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/)
2728

@@ -68,6 +69,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
6869

6970
## India {#india}
7071
* [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
72+
* [Chandigarh](https://www.meetup.com/Chandigarh-React-Developers/)
7173
* [Chennai](https://www.meetup.com/React-Chennai/)
7274
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
7375
* [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
7880
## Israel {#israel}
7981
* [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
8082

83+
## Malaysia {#malaysia}
84+
* [Penang](https://www.facebook.com/groups/reactpenang/)
85+
8186
## Netherlands {#netherlands}
8287
* [Amsterdam](https://www.meetup.com/React-Amsterdam/)
8388

@@ -107,8 +112,12 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
107112
## Scotland (UK) {#scotland-uk}
108113
* [Edinburgh](https://www.meetup.com/React-Scotland/)
109114

115+
## Singapore {#singapore}
116+
* [Singapore - React Knowledgeable](https://reactknowledgeable.org/)
117+
110118
## Spain {#spain}
111119
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
120+
* [Canarias](https://www.meetup.com/React-Canarias/)
112121

113122
## Sweden {#sweden}
114123
* [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
130139
* [Leesburg, VA - ReactJS](https://www.meetup.com/React-NOVA/)
131140
* [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/)
132141
* [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/)
142+
* [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/)
133143
* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/)
134144
* [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
135145
* [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)

content/community/nav.yml

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,6 @@
3434
title: Model Management
3535
- id: data-fetching
3636
title: Data Fetching
37-
- id: testing
38-
title: Testing
3937
- id: ui-components
4038
title: UI Components
4139
- id: misc

content/community/tools-testing.md

Lines changed: 0 additions & 13 deletions
This file was deleted.

content/community/videos.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@ Facebook engineers Bill Fisher and Jing Chen talk about Flux and React at Forwar
5353
### Going Big with React {#going-big-with-react}
5454

5555
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).
56-
[![going big with React](https://i.vimeocdn.com/video/481670116_650.jpg)]
57-
56+
<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>
5857

5958
### Rethinking Best Practices {#rethinking-best-practices}
6059

content/docs/addons-test-utils.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,13 @@ it('potrafi wyrenderować i aktualizować licznik', () => {
122122
});
123123
```
124124

125+
<<<<<<< HEAD
125126
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).
127+
=======
128+
- Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a library like [React Testing Library](https://testing-library.com/react) to reduce the boilerplate code.
129+
130+
- The [`recipes`](/docs/testing-recipes.html) document contains more details on how `act()` behaves, with examples and usage.
131+
>>>>>>> 519a3aec91a426b0c8c9ae59e292d064df48c66a
126132
127133
* * *
128134

@@ -139,7 +145,11 @@ Jeśli przekażesz do tej funkcji atrapę komponentu (ang. *mocked component*),
139145

140146
> Uwaga:
141147
>
148+
<<<<<<< HEAD
142149
> 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).
150+
=======
151+
> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
152+
>>>>>>> 519a3aec91a426b0c8c9ae59e292d064df48c66a
143153
144154
* * *
145155

content/docs/code-splitting.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,19 @@ permalink: docs/code-splitting.html
66

77
## Pakowanie {#bundling}
88

9+
<<<<<<< HEAD
910
Większość reactowych aplikacji będzie "dołączała" swoje pliki poprzez narzędzia takie jak
1011
[Webpack](https://webpack.js.org/) czy [Browserify](http://browserify.org/).
1112
Pakowanie to proces śledzenia zaimportowanych plików i łączenia ich w pojedynczy plik tzw. "bundle" (pol. *paczka*).
1213
Taka paczka może zostać umieszczona na stronie w celu załadowania całej aplikacji naraz.
14+
=======
15+
Most React apps will have their files "bundled" using tools like
16+
[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) or
17+
[Browserify](http://browserify.org/).
18+
Bundling is the process of following imported files and merging them into a
19+
single file: a "bundle". This bundle can then be included on a webpage to load
20+
an entire app at once.
21+
>>>>>>> 519a3aec91a426b0c8c9ae59e292d064df48c66a
1322
1423
#### Przykład {#example}
1524

content/docs/codebase-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ Its source code is located in [`packages/react-reconciler`](https://github.com/f
217217

218218
### Event System {#event-system}
219219

220-
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).
220+
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).
221221

222222
There is a [video with a deep code dive into it](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 mins).
223223

content/docs/error-boundaries.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ class ErrorBoundary extends React.Component {
3636
return { hasError: true };
3737
}
3838
39-
componentDidCatch(error, info) {
39+
componentDidCatch(error, errorInfo) {
4040
// You can also log the error to an error reporting service
41-
logErrorToMyService(error, info);
41+
logErrorToMyService(error, errorInfo);
4242
}
4343
4444
render() {

content/docs/faq-styling.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,4 @@ _Note that this functionality is not a part of React, but provided by third-part
4848

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

51-
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.
51+
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.

content/docs/hooks-effect.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ function Example() {
131131
useEffect(() => {
132132
document.title = `Kliknięto ${count} razy`;
133133
});
134+
}
134135
```
135136

136137
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.

0 commit comments

Comments
 (0)