Skip to content

Commit 9c4876e

Browse files
merging all conflicts
2 parents 07dd44b + 446345c commit 9c4876e

File tree

7 files changed

+16
-33
lines changed

7 files changed

+16
-33
lines changed

content/blog/2020-10-20-react-v17.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ React 17 supports the [new JSX transform](/blog/2020/09/22/introducing-the-new-j
5858

5959
## React Native {#react-native}
6060

61-
React Native has a separate release schedule. We currently expect the support for React 17 to land in React Native 0.65, but the exact version is subject to change. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases).
61+
React Native has a separate release schedule. We landed the support for React 17 in React Native 0.64. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases).
6262

6363
## Installation {#installation}
6464

content/community/courses.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ permalink: community/courses.html
2828

2929
- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
3030

31-
- [Frontend Masters](https://frontendmasters.com/courses/) - Video courses on React and other frontend frameworks.
31+
- [Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React.
3232

3333
- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.
3434

content/community/videos.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ Videos dedicated to the discussion of React and the React ecosystem.
1313
### React Conf 2019 {#react-conf-2019}
1414

1515
A playlist of videos from React Conf 2019.
16-
<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>
16+
<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>
1717

1818
### React Conf 2018 {#react-conf-2018}
1919

2020
A playlist of videos from React Conf 2018.
21-
<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>
21+
<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>
2222

2323
### React.js Conf 2017 {#reactjs-conf-2017}
2424

content/docs/optimizing-performance.md

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -156,32 +156,6 @@ You can learn more about this in [webpack documentation](https://webpack.js.org/
156156

157157
Remember that you only need to do this for production builds. You shouldn't apply `TerserPlugin` in development because it will hide useful React warnings, and make the builds much slower.
158158

159-
## Profiling Components with the Chrome Performance Tab {#profiling-components-with-the-chrome-performance-tab}
160-
161-
In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:
162-
163-
<center><img src="../images/blog/react-perf-chrome-timeline.png" style="max-width:100%" alt="React components in Chrome timeline" /></center>
164-
165-
To do this in Chrome:
166-
167-
1. Temporarily **disable all Chrome extensions, especially React DevTools**. They can significantly skew the results!
168-
169-
2. Make sure you're running the application in the development mode.
170-
171-
3. Open the Chrome DevTools **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**.
172-
173-
4. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang.
174-
175-
5. Stop recording.
176-
177-
6. React events will be grouped under the **User Timing** label.
178-
179-
For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/react-performance-profiling-optimization).
180-
181-
Note that **the numbers are relative so components will render faster in production**. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.
182-
183-
Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it.
184-
185159
## Profiling Components with the DevTools Profiler {#profiling-components-with-the-devtools-profiler}
186160

187161
`react-dom` 16.5+ and `react-native` 0.57+ provide enhanced profiling capabilities in DEV mode with the React DevTools Profiler.
@@ -199,6 +173,11 @@ If you haven't yet installed the React DevTools, you can find them here:
199173
> A production profiling bundle of `react-dom` is also available as `react-dom/profiling`.
200174
> Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling)
201175
176+
> Note
177+
>
178+
> Before React 17, we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) to profile components with the chrome performance tab.
179+
> For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/react-performance-profiling-optimization).
180+
202181
## Virtualize Long Lists {#virtualize-long-lists}
203182

204183
If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.

content/docs/strict-mode.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ Since object refs were largely added as a replacement for string refs, strict mo
5555

5656
React used to support `findDOMNode` to search the tree for a DOM node given a class instance. Normally you don't need this because you can [attach a ref directly to a DOM node](/docs/refs-and-the-dom.html#creating-refs).
5757

58-
`findDOMNode` can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children was rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode` only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode` is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode` only worked if components always return a single DOM node that never changes.
58+
`findDOMNode` can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children were rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode` only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode` is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode` only worked if components always return a single DOM node that never changes.
5959

6060
You can instead make this explicit by passing a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
6161

content/tutorial/tutorial.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -524,7 +524,11 @@ Vedd észre, hogy a `handleClick` metódusban meghívjuk a `.slice()` metódust
524524

525525
### Megváltoztathatatlanság fontossága {#why-immutability-is-important}
526526

527+
<<<<<<< HEAD
527528
Az előző kódpéldában azt tanácsoltuk, hogy a `.slice()` metódussal készítsünk egy `squares` tömb másolatot, hogy ne az eredeti tömböt módosítsuk. Most megvitatjuk a megváltoztathatatlanságot, és hogy miért fontos ennek megtanulása.
529+
=======
530+
In the previous code example, we suggested that you use the `.slice()` method to create a copy of the `squares` array to copy instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
531+
>>>>>>> 446345cfba91b62546f46f88fad893937a826cdc
528532
529533
Adatváltoztatásra két általános megközelítés létezik. Az első megközelítés az, hogy *közvetlenül megváltoztatjuk* az adat értékét. A második megközelítés lecserélni az adatot egy másolattal, ami tartalmazza a kívánt változtatásokat.
530534

examples/context/reference-caveats-solution.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ class App extends React.Component {
1010
render() {
1111
// highlight-range{2}
1212
return (
13-
<Provider value={this.state.value}>
13+
<MyContext.Provider value={this.state.value}>
1414
<Toolbar />
15-
</Provider>
15+
</MyContext.Provider>
1616
);
1717
}
1818
}

0 commit comments

Comments
 (0)