Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
16f55e9
Rephrase the reason for duplicating the array for clarity (#3889)
pubudu91 Sep 2, 2021
7faa7f5
Update broken relay documentation link (#3895)
khg0712 Sep 6, 2021
0e2dd2b
Add React Conf Brasil 2021 (#3842)
nic Sep 6, 2021
fac2ea1
Add React Indy (#3893)
ashleemboyer Sep 6, 2021
2647519
Add React Global (#3885)
Sep 6, 2021
ce7c19f
Add React Finland 2021 (#3880)
bebraw Sep 6, 2021
5085286
Add Omaha, NE Meetup (#3862)
NebraskaCoder Sep 6, 2021
d0ea6b0
Add React London: Bring Your Own Project (#3855)
Sep 6, 2021
3cca1e6
Add React Advanced conference 2021 (#3653)
franzmilec Sep 6, 2021
bad6eaa
Fix broken link to React Conference Live (#3821)
debs-obrien Sep 6, 2021
4856015
Add free React course by the University of Helsinki (#3789)
epicharri Sep 6, 2021
5c2fa04
Add React Native EU to past conferences (#3867)
thymikee Sep 6, 2021
6bde131
Fix URL's anchor to "Callback Refs" page (#3810)
tusba Sep 6, 2021
8020605
chore: update link to Jest's docs (#3897)
SimenB Sep 8, 2021
dab7441
Update to the new version url of the Relay(v11.0.0) (#3836)
daadaadaah Sep 8, 2021
babaa7f
Update node version of create-react-app (#3900)
wasdJens Sep 9, 2021
344f08e
fix website to translations.reactjs.org (#3901)
upupming Sep 9, 2021
d5abd1b
Update outdated link (#3902)
misha98857 Sep 13, 2021
a88b1e1
docs: remove cancelled conference (#3907)
debs-obrien Sep 14, 2021
dcb2466
[Docs] Add the anchor for the first entry about "HOC" (#3914)
SiarheiBobryk Sep 19, 2021
f0a9793
[Docs] Apply the code Markdown syntax for the value prop (#3912)
SiarheiBobryk Sep 19, 2021
9054e34
merging all conflicts
react-translations-bot Sep 20, 2021
0889744
Fix Merge Conflicts
sJJdGG Sep 20, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,49 @@ September 13-15, 2021. Atlanta, GA, USA

[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl)

### React Conference Live 2021 {#react-conference-live-2021}
October 7-8, 2021. In-person in Amsterdam, Netherlands + remote (hybrid event)

[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl) - [LinkedIn](https://www.linkedin.com/company/frontendlove/)


### React Brussels 2021 {#react-brussels-2021}
October 15, 2021 - remote event

[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [LinkedIn](https://www.linkedin.com/events/6805708233819336704/)


### React Conf Brasil 2021 {#react-conf-brasil-2021}
October 16, 2021 - remote event

[Website](http://reactconf.com.br) - [Twitter](https://twitter.com/reactconfbr) - [Slack](https://react.now.sh) - [Facebook](https://facebook.com/reactconf) - [Instagram](https://instagram.com/reactconfbr) - [YouTube](https://www.youtube.com/channel/UCJL5eorStQfC0x1iiWhvqPA/videos)

### React Advanced 2021 {#react-advanced-2021}
October 22-23, 2021. In-person in London, UK + remote (hybrid event)

[Website](https://reactadvanced.com) - [Twitter](https://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences)

### < React Global > by Geekle {#react-global-2021}
November 3-4, 2021 - remote event

[Website](https://geekle.us/react) - [LinkedIn](https://www.linkedin.com/events/javascriptglobalsummit6721691514176720896/)

## React Advanced London 2021 {#react-advanced-2021}
October 20-22, 2021. London, UK & remote

[Website](https://reactadvanced.com) - [Twitter](https://twitter.com/reactadvanced)

### React India 2021 {#react-india-2021}
November 12-14, 2021 - remote event

[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia/) - [LinkedIn](https://www.linkedin.com/showcase/14545585) - [YouTube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w/videos)

## Past Conferences {#past-conferences}

### React Native EU 2021 {#react-native-eu-2021}
September 1-2, 2021 - remote event

[Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [Instagram](https://www.instagram.com/reactnative_eu/)

### React Finland 2021 {#react-finland-2021}
August 30 - September 3, 2021 - remote event

[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) - [LinkedIn](https://www.linkedin.com/company/react-finland/)

### React Case Study Festival 2021 {#react-case-study-festival-2021}
April 27-28, 2021 - remote event

Expand Down
3 changes: 3 additions & 0 deletions content/community/courses.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ permalink: community/courses.html

- [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps.

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


## Paid Courses {#paid-courses}

- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
Expand Down
3 changes: 3 additions & 0 deletions content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## England (UK) {#england-uk}
* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
* [React London : Bring Your Own Project](https://www.meetup.com/React-London-Bring-Your-Own-Project/)

## France {#france}
* [Nantes](https://www.meetup.com/React-Nantes/)
Expand Down Expand Up @@ -181,6 +182,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
* [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/)
* [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
* [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
* [Kansas City, MO - ReactJS](https://www.meetup.com/Kansas-City-React-Meetup/)
* [Las Vegas, NV - ReactJS](https://www.meetup.com/ReactVegas/)
Expand All @@ -193,6 +195,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)
* [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/)
* [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/)
* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/)
* [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/)
* [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/)
* [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/)
Expand Down
2 changes: 1 addition & 1 deletion content/docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ class Parent extends React.Component {
this.inputElement.current.focus();
```

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

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
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.
Expand Down
2 changes: 1 addition & 1 deletion content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ mockComponent(

> نکته:
>
> `mockComponent()` یک API قدیمی است. ما استفاده از [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) را به عنوان جایگزین پیشنهاد می‌کنیم.
> `mockComponent()` یک API قدیمی است. ما استفاده از [`jest.mock()`](https://jestjs.io/docs/tutorial-react-native#mock-native-modules-using-jestmock) به عنوان جایگزین توصیه می‌کنیم.

* * *

Expand Down
2 changes: 1 addition & 1 deletion content/docs/codebase-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ React is a [monorepo](https://danluu.com/monorepo/). Its repository contains mul

### React Core {#react-core}

The "core" of React includes all the [top-level `React` APIs](/docs/top-level-api.html#react), for example:
The "core" of React includes all the [top-level `React` APIs](/docs/react-api.html#react), for example:

* `React.createElement()`
* `React.Component`
Expand Down
8 changes: 4 additions & 4 deletions content/docs/concurrent-mode-suspense.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ function ProfileTimeline() {

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

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

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.

Expand All @@ -110,7 +110,7 @@ Suspense is significantly different from existing approaches to these problems,

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

* **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)).
* **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/)).

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

Expand All @@ -126,7 +126,7 @@ So what's the point of Suspense? There are a few ways we can answer this:

## Using Suspense in Practice {#using-suspense-in-practice}

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

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

Expand All @@ -144,7 +144,7 @@ We expect to see a lot of experimentation in the community with other libraries.

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

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

## Traditional Approaches vs Suspense {#traditional-approaches-vs-suspense}

Expand Down
2 changes: 1 addition & 1 deletion content/docs/create-a-new-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ The React team primarily recommends these solutions:

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

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:
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:

```bash
npx create-react-app my-app
Expand Down
2 changes: 1 addition & 1 deletion content/docs/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ this.setState(partialState);

## مقدار Null ورودی کنترل‌شده {#controlled-input-null-value}

قراردادن prop value روی یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) از تغییر ورودی توسط کاربر جلوگیری می‌کند، مگر اینکه شما بخواهید. اگر یک `value` روی ورودی قرار داده‌اید، اما هنوز قابل‌ ویرایش است، ممکن است `value` را تصادفا با `undefined` و یا `null` مقدار‌دهی کرده باشید.
قراردادن prop به نام value روی یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) از تغییر ورودی توسط کاربر جلوگیری می‌کند، مگر اینکه شما بخواهید. اگر یک `value` روی ورودی قرار داده‌اید، اما هنوز قابل‌ ویرایش است، ممکن است `value` را تصادفا با `undefined` و یا `null` مقدار‌دهی کرده باشید.

نمونه کد زیر این [رفتار] را نشان ‌می‌دهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابل‌تغییر ‌می‌شود.)

Expand Down
2 changes: 1 addition & 1 deletion content/docs/reference-react-dom.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ ReactDOM.render(element, container[, callback])
>
> `ReactDOM.render()` نود اصلی را تغییر نمیدهد (فقط فرزنده‌های container را تغییر می‌دهد). شاید ممکن باشد که کامپوننتی را درون نودی که قبلا وجود داشته وارد کرد بدون اینکه نیاز به بازنویسی نودهای زیر شاخه(children) باشد.
>
> `ReactDOM.render()` در حال حاضر یک reference از ریشه instance `ReactComponent` برمی‌گرداند. با این حال استفاده از این مقدار برگشتی سنتی است و باید از آن پرهیز شود زیرا در ورژن‌های آینده ری‌اکت شاید برخی کامپوننت‌ها در گاهی اوقات ناهمگام رندر شوند.اگر شما به مرجع instance ریشه `ReactComponent` نیاز داشتید، بهترین راه حل آن است که یک [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) به ریشه المنت وصل کنید.
> `ReactDOM.render()` در حال حاضر یک reference از ریشه instance `ReactComponent` برمی‌گرداند. با این حال استفاده از این مقدار برگشتی سنتی است و باید از آن پرهیز شود زیرا در ورژن‌های آینده ری‌اکت شاید برخی کامپوننت‌ها در گاهی اوقات ناهمگام رندر شوند.اگر شما به مرجع instance ریشه `ReactComponent` نیاز داشتید، بهترین راه حل آن است که یک [callback ref](/docs/refs-and-the-dom.html#callback-refs) به ریشه المنت وصل کنید.
>
> استفاده از `ReactDOM.render()` برای hydrate کردن یک container که سمت سرور رندر شده‌است، منسوخ شده است و در ورژن ۱۷ ری‌اکت پاک خواهد شد. به جای آن از [`()hydrate`](#hydrate) استفاده کنید.
* * *
Expand Down