You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps.
26
26
27
+
-[University of Helsinki: Full Stack Open MOOC](https://fullstackopen.com/en/) - Learn to build web applications with React. Available in English, Spanish, Chinese and Finnish.
28
+
29
+
27
30
## Paid Courses {#paid-courses}
28
31
29
32
-[Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
Copy file name to clipboardExpand all lines: content/docs/accessibility.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -226,7 +226,7 @@ class Parent extends React.Component {
226
226
this.inputElement.current.focus();
227
227
```
228
228
229
-
When using a HOC to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC does not implement ref forwarding, the above pattern can still be used as a fallback.
229
+
When using a [HOC](/docs/higher-order-components.html) to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC does not implement ref forwarding, the above pattern can still be used as a fallback.
230
230
231
231
A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
232
232
the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that initially triggered the modal.
Copy file name to clipboardExpand all lines: content/docs/addons-test-utils.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -143,7 +143,7 @@ mockComponent(
143
143
144
144
> نکته:
145
145
>
146
-
> `mockComponent()` یک API قدیمی است. ما استفاده از [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock)را به عنوان جایگزین پیشنهاد میکنیم.
146
+
> `mockComponent()` یک API قدیمی است. ما استفاده از [`jest.mock()`](https://jestjs.io/docs/tutorial-react-native#mock-native-modules-using-jestmock) به عنوان جایگزین توصیه میکنیم.
Copy file name to clipboardExpand all lines: content/docs/concurrent-mode-suspense.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -100,7 +100,7 @@ function ProfileTimeline() {
100
100
101
101
This demo is a teaser. Don't worry if it doesn't quite make sense yet. We'll talk more about how it works below. Keep in mind that Suspense is more of a *mechanism*, and particular APIs like `fetchProfileData()` or `resource.posts.read()` in the above example are not very important. If you're curious, you can find their definitions right in the [demo sandbox](https://codesandbox.io/s/frosty-hermann-bztrp).
102
102
103
-
Suspense is not a data fetching library. It's a **mechanism for data fetching libraries** to communicate to React that *the data a component is reading is not ready yet*. React can then wait for it to be ready and update the UI. At Facebook, we use Relay and its [new Suspense integration](https://relay.dev/docs/en/experimental/step-by-step). We expect that other libraries like Apollo can provide similar integrations.
103
+
Suspense is not a data fetching library. It's a **mechanism for data fetching libraries** to communicate to React that *the data a component is reading is not ready yet*. React can then wait for it to be ready and update the UI. At Facebook, we use Relay and its [new Suspense integration](docs/getting-started/step-by-step-guide/). We expect that other libraries like Apollo can provide similar integrations.
104
104
105
105
In the long term, we intend Suspense to become the primary way to read asynchronous data from components -- no matter where that data is coming from.
106
106
@@ -110,7 +110,7 @@ Suspense is significantly different from existing approaches to these problems,
110
110
111
111
***It is not a data fetching implementation.** It does not assume that you use GraphQL, REST, or any other particular data format, library, transport, or protocol.
112
112
113
-
***It is not a ready-to-use client.** You can't "replace" `fetch` or Relay with Suspense. But you can use a library that's integrated with Suspense (for example, [new Relay APIs](https://relay.dev/docs/en/experimental/api-reference)).
113
+
***It is not a ready-to-use client.** You can't "replace" `fetch` or Relay with Suspense. But you can use a library that's integrated with Suspense (for example, [new Relay APIs](https://relay.dev/docs/api-reference/relay-environment-provider/)).
114
114
115
115
***It does not couple data fetching to the view layer.** It helps orchestrate displaying the loading states in your UI, but it doesn't tie your network logic to React components.
116
116
@@ -126,7 +126,7 @@ So what's the point of Suspense? There are a few ways we can answer this:
126
126
127
127
## Using Suspense in Practice {#using-suspense-in-practice}
128
128
129
-
At Facebook, so far we have only used the Relay integration with Suspense in production. **If you're looking for a practical guide to get started today, [check out the Relay Guide](https://relay.dev/docs/en/experimental/step-by-step)!** It demonstrates patterns that have already worked well for us in production.
129
+
At Facebook, so far we have only used the Relay integration with Suspense in production. **If you're looking for a practical guide to get started today, [check out the Relay Guide](https://relay.dev/docs/getting-started/step-by-step-guide/)!** It demonstrates patterns that have already worked well for us in production.
130
130
131
131
**The code demos on this page use a "fake" API implementation rather than Relay.** This makes them easier to understand if you're not familiar with GraphQL, but they won't tell you the "right way" to build an app with Suspense. This page is more conceptual and is intended to help you see *why* Suspense works in a certain way, and which problems it solves.
132
132
@@ -144,7 +144,7 @@ We expect to see a lot of experimentation in the community with other libraries.
144
144
145
145
Although it's technically doable, Suspense is **not** currently intended as a way to start fetching data when a component renders. Rather, it lets components express that they're "waiting" for data that is *already being fetched*. **[Building Great User Experiences with Concurrent Mode and Suspense](/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html) describes why this matters and how to implement this pattern in practice.**
146
146
147
-
Unless you have a solution that helps prevent waterfalls, we suggest to prefer APIs that favor or enforce fetching before render. For a concrete example, you can look at how [Relay Suspense API](https://relay.dev/docs/en/experimental/api-reference#usepreloadedquery) enforces preloading. Our messaging about this hasn't been very consistent in the past. Suspense for Data Fetching is still experimental, so you can expect our recommendations to change over time as we learn more from production usage and understand the problem space better.
147
+
Unless you have a solution that helps prevent waterfalls, we suggest to prefer APIs that favor or enforce fetching before render. For a concrete example, you can look at how [Relay Suspense API](https://relay.dev/docs/api-reference/use-preloaded-query/) enforces preloading. Our messaging about this hasn't been very consistent in the past. Suspense for Data Fetching is still experimental, so you can expect our recommendations to change over time as we learn more from production usage and understand the problem space better.
148
148
149
149
## Traditional Approaches vs Suspense {#traditional-approaches-vs-suspense}
Copy file name to clipboardExpand all lines: content/docs/create-a-new-react-app.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,7 @@ The React team primarily recommends these solutions:
39
39
40
40
[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
41
41
42
-
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have [Node >= 10.16 and npm >= 5.6](https://nodejs.org/en/) on your machine. To create a project, run:
42
+
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have [Node >= 14.0.0 and npm >= 5.6](https://nodejs.org/en/) on your machine. To create a project, run:
قراردادن prop value روی یک [کامپوننت کنترلشده](/docs/forms.html#controlled-components) از تغییر ورودی توسط کاربر جلوگیری میکند، مگر اینکه شما بخواهید. اگر یک `value` روی ورودی قرار دادهاید، اما هنوز قابل ویرایش است، ممکن است `value` را تصادفا با `undefined` و یا `null` مقداردهی کرده باشید.
273
+
قراردادن prop به نام value روی یک [کامپوننت کنترلشده](/docs/forms.html#controlled-components) از تغییر ورودی توسط کاربر جلوگیری میکند، مگر اینکه شما بخواهید. اگر یک `value` روی ورودی قرار دادهاید، اما هنوز قابل ویرایش است، ممکن است `value` را تصادفا با `undefined` و یا `null` مقداردهی کرده باشید.
274
274
275
275
نمونه کد زیر این [رفتار] را نشان میدهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابلتغییر میشود.)
> `ReactDOM.render()` نود اصلی را تغییر نمیدهد (فقط فرزندههای container را تغییر میدهد). شاید ممکن باشد که کامپوننتی را درون نودی که قبلا وجود داشته وارد کرد بدون اینکه نیاز به بازنویسی نودهای زیر شاخه(children) باشد.
51
51
>
52
-
> `ReactDOM.render()` در حال حاضر یک reference از ریشه instance `ReactComponent` برمیگرداند. با این حال استفاده از این مقدار برگشتی سنتی است و باید از آن پرهیز شود زیرا در ورژنهای آینده ریاکت شاید برخی کامپوننتها در گاهی اوقات ناهمگام رندر شوند.اگر شما به مرجع instance ریشه `ReactComponent` نیاز داشتید، بهترین راه حل آن است که یک [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) به ریشه المنت وصل کنید.
52
+
> `ReactDOM.render()` در حال حاضر یک reference از ریشه instance `ReactComponent` برمیگرداند. با این حال استفاده از این مقدار برگشتی سنتی است و باید از آن پرهیز شود زیرا در ورژنهای آینده ریاکت شاید برخی کامپوننتها در گاهی اوقات ناهمگام رندر شوند.اگر شما به مرجع instance ریشه `ReactComponent` نیاز داشتید، بهترین راه حل آن است که یک [callback ref](/docs/refs-and-the-dom.html#callback-refs) به ریشه المنت وصل کنید.
53
53
>
54
54
> استفاده از `ReactDOM.render()` برای hydrate کردن یک container که سمت سرور رندر شدهاست، منسوخ شده است و در ورژن ۱۷ ریاکت پاک خواهد شد. به جای آن از [`()hydrate`](#hydrate) استفاده کنید.
0 commit comments