From 16f55e9d22931eb19f91023fec8bb0ee25b2d1cf Mon Sep 17 00:00:00 2001 From: Pubudu Fernando Date: Fri, 3 Sep 2021 02:41:31 +0530 Subject: [PATCH 01/22] Rephrase the reason for duplicating the array for clarity (#3889) --- content/tutorial/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 8fc74d6d5..5e0817431 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -524,7 +524,7 @@ Note how in `handleClick`, we call `.slice()` to create a copy of the `squares` ### Why Immutability Is Important {#why-immutability-is-important} -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. +In the previous code example, we suggested that you create a copy of the `squares` array using the `slice()` method instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn. There are generally two approaches to changing data. The first approach is to *mutate* the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes. From 7faa7f57a6b88eb492b0b07ac2151c5e333e2c1e Mon Sep 17 00:00:00 2001 From: Hugo Kim Date: Mon, 6 Sep 2021 19:32:35 +0900 Subject: [PATCH 02/22] Update broken relay documentation link (#3895) --- content/docs/concurrent-mode-suspense.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-suspense.md b/content/docs/concurrent-mode-suspense.md index 4e1e8c538..2a3890503 100644 --- a/content/docs/concurrent-mode-suspense.md +++ b/content/docs/concurrent-mode-suspense.md @@ -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} From 0e2dd2b32dd98ba58aa7cfa5164e260d09af96a5 Mon Sep 17 00:00:00 2001 From: nic Date: Mon, 6 Sep 2021 12:16:49 -0300 Subject: [PATCH 03/22] Add React Conf Brasil 2021 (#3842) --- content/community/conferences.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index 52f890cda..fa90a3962 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -28,6 +28,12 @@ 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) From fac2ea1ac5c813a00691b437a78d2eb1a080ef63 Mon Sep 17 00:00:00 2001 From: Ashlee Boyer <43934258+ashleemboyer@users.noreply.github.com> Date: Mon, 6 Sep 2021 11:17:09 -0400 Subject: [PATCH 04/22] Add React Indy (#3893) --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index 8403d6d8a..dd5e68e11 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -181,6 +181,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/) From 2647519ad9de9fde302e75f6ec8f9a6ad186940b Mon Sep 17 00:00:00 2001 From: questerprod <68193838+questerprod@users.noreply.github.com> Date: Mon, 6 Sep 2021 18:33:40 +0300 Subject: [PATCH 05/22] Add React Global (#3885) --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index fa90a3962..67263df70 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -39,6 +39,11 @@ 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 India 2021 {#react-india-2021} November 12-14, 2021 - remote event From ce7c19f551c00d6dbfe9d48c63c5b7d9179c9faa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juho=20Veps=C3=A4l=C3=A4inen?= Date: Mon, 6 Sep 2021 18:33:59 +0300 Subject: [PATCH 06/22] Add React Finland 2021 (#3880) * chore: Add React Finland 2021 * Update content/community/conferences.md * Update conferences.md Co-authored-by: Alexey Pyltsyn --- content/community/conferences.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index 67263df70..b3edeb6e7 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -22,7 +22,6 @@ 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 @@ -51,6 +50,11 @@ November 12-14, 2021 - remote event ## Past Conferences {#past-conferences} +### 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 From 5085286041503c2ab9f4e3fc2419c6bbaabfb032 Mon Sep 17 00:00:00 2001 From: Gabriel Graves <64073162+NebraskaCoder@users.noreply.github.com> Date: Mon, 6 Sep 2021 10:34:57 -0500 Subject: [PATCH 07/22] Add Omaha, NE Meetup (#3862) Add Omaha React/Node/NextJs Meetup Group link. --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index dd5e68e11..771b77b80 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -194,6 +194,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/) From d0ea6b067b3da52574c8bac2c1e5e7aee2c0d65d Mon Sep 17 00:00:00 2001 From: James McLeod Date: Mon, 6 Sep 2021 16:36:03 +0100 Subject: [PATCH 08/22] Add React London: Bring Your Own Project (#3855) --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index 771b77b80..b5fdfe55f 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -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/) From 3cca1e60c1d8cc6781565086038c95ae683747fc Mon Sep 17 00:00:00 2001 From: franzmilec Date: Mon, 6 Sep 2021 17:37:38 +0200 Subject: [PATCH 09/22] Add React Advanced conference 2021 (#3653) --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index b3edeb6e7..cacbda353 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -43,6 +43,11 @@ 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 From bad6eaaaa9802e5ee068406c05f55f0db77d1960 Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Mon, 6 Sep 2021 17:39:49 +0200 Subject: [PATCH 10/22] Fix broken link to React Conference Live (#3821) --- content/community/conferences.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index cacbda353..4481f512e 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -20,7 +20,7 @@ September 13-15, 2021. Atlanta, GA, USA ### 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/) +[Website](https://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 From 48560155327249cf203e39ffbea7186635746c7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Harri=20K=C3=A4hk=C3=B6nen?= Date: Mon, 6 Sep 2021 18:41:59 +0300 Subject: [PATCH 11/22] Add free React course by the University of Helsinki (#3789) Full Stack Open course is part of the computer science studies in the University of Helsinki, and also offered as a free massive open online course (MOOC). The main focus is on building single page applications with React that use REST APIs built with Node.js. It is available in English, Spanish, Chinese and Finnish. --- content/community/courses.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/community/courses.md b/content/community/courses.md index 1a9e66e5a..9884bfe78 100644 --- a/content/community/courses.md +++ b/content/community/courses.md @@ -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. From 5c2fa044c36104857b1ae50598c5936ced9d8745 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= Date: Mon, 6 Sep 2021 17:43:35 +0200 Subject: [PATCH 12/22] Add React Native EU to past conferences (#3867) * Update conferences.md * Update conferences.md Co-authored-by: Alexey Pyltsyn --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index 4481f512e..f2e31cda1 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -55,6 +55,11 @@ November 12-14, 2021 - remote event ## 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 From 6bde1313e3355c0f66a37f255c991aafe92fd957 Mon Sep 17 00:00:00 2001 From: tusba <11007086+tusba@users.noreply.github.com> Date: Mon, 6 Sep 2021 21:50:32 +0600 Subject: [PATCH 13/22] Fix URL's anchor to "Callback Refs" page (#3810) * Fix URL's anchor to "Callback Refs" page Replace "#the-ref-callback-attribute" with "#callback-refs" * Update content/docs/reference-react-dom.md Co-authored-by: Sebastian Silbermann Co-authored-by: Alexey Pyltsyn Co-authored-by: Sebastian Silbermann --- content/docs/reference-react-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md index f440ef7ed..c5ab1d7ff 100644 --- a/content/docs/reference-react-dom.md +++ b/content/docs/reference-react-dom.md @@ -50,7 +50,7 @@ If the optional callback is provided, it will be executed after the component is > > `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy > and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a -> [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) to the root element. +> [callback ref](/docs/refs-and-the-dom.html#callback-refs) to the root element. > > Using `ReactDOM.render()` to hydrate a server-rendered container is deprecated and will be removed in React 17. Use [`hydrate()`](#hydrate) instead. From 8020605812dc70eee9a45978373a3afda5ba7f03 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Wed, 8 Sep 2021 10:14:59 +0200 Subject: [PATCH 14/22] chore: update link to Jest's docs (#3897) --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index ea92f3eb9..08f9a5f09 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -143,7 +143,7 @@ Pass a mocked component module to this method to augment it with useful methods > Note: > -> `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. +> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://jestjs.io/docs/tutorial-react-native#mock-native-modules-using-jestmock) instead. * * * From dab7441b1eb0098823de7b075473dbd15c437723 Mon Sep 17 00:00:00 2001 From: daadaadaah <60481383+daadaadaah@users.noreply.github.com> Date: Thu, 9 Sep 2021 03:19:46 +0900 Subject: [PATCH 15/22] Update to the new version url of the Relay(v11.0.0) (#3836) Co-authored-by: Alexey Pyltsyn --- content/docs/concurrent-mode-suspense.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/concurrent-mode-suspense.md b/content/docs/concurrent-mode-suspense.md index 2a3890503..dc231d19f 100644 --- a/content/docs/concurrent-mode-suspense.md +++ b/content/docs/concurrent-mode-suspense.md @@ -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. @@ -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. @@ -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. @@ -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/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. +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} From babaa7ff9293ce54a60fd2e5e6ac4e2c9cd23952 Mon Sep 17 00:00:00 2001 From: Jens Reiner Date: Thu, 9 Sep 2021 17:46:45 +0200 Subject: [PATCH 16/22] Update node version of create-react-app (#3900) --- content/docs/create-a-new-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index 12afba206..8756a2c42 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -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 From 344f08e4ff6a6419b29718de042fa6e34d3ab208 Mon Sep 17 00:00:00 2001 From: Yiming Li Date: Fri, 10 Sep 2021 01:35:50 +0800 Subject: [PATCH 17/22] fix website to translations.reactjs.org (#3901) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 33778c2e5..ce68bb7a7 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ The documentation is divided into several sections with a different tone and pur ## Translation -If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/). +If you are interested in translating `reactjs.org`, please see the current translation efforts at [translations.reactjs.org](https://translations.reactjs.org/). If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg). From d5abd1b9549177048bd22277230c9a1625de9e54 Mon Sep 17 00:00:00 2001 From: Mikhail Efanov Date: Tue, 14 Sep 2021 00:43:26 +0400 Subject: [PATCH 18/22] Update outdated link (#3902) I have found outdated link. I think we should update this link to direct link without additional redirect. --- content/docs/codebase-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 291826aab..5203c47e7 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -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` From a88b1e1331126287ccf03f2f4ec25ec38513b911 Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Tue, 14 Sep 2021 17:09:24 +0200 Subject: [PATCH 19/22] docs: remove cancelled conference (#3907) https://reactlive.nl/ has been cancelled completely so removing from the conference page. --- content/community/conferences.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index f2e31cda1..5f2bebd74 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -17,11 +17,6 @@ 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://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 From dcb2466260029349c7a94f883aeb83787578537e Mon Sep 17 00:00:00 2001 From: Siarhei Bobryk Date: Sun, 19 Sep 2021 12:36:57 +0300 Subject: [PATCH 20/22] [Docs] Add the anchor for the first entry about "HOC" (#3914) --- content/docs/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index 19878166a..44603a257 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -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. From f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce Mon Sep 17 00:00:00 2001 From: Siarhei Bobryk Date: Sun, 19 Sep 2021 13:14:11 +0300 Subject: [PATCH 21/22] [Docs] Apply the code Markdown syntax for the value prop (#3912) --- content/docs/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forms.md b/content/docs/forms.md index 19ff42fe6..c43a72a3b 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -270,7 +270,7 @@ Also, since `setState()` automatically [merges a partial state into the current ## Controlled Input Null Value {#controlled-input-null-value} -Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`. +Specifying the `value` prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`. The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.) From 088974416a7df200c658d1b803e7a43f4f549e10 Mon Sep 17 00:00:00 2001 From: sJJdGG Date: Mon, 20 Sep 2021 11:08:36 +0430 Subject: [PATCH 22/22] Fix Merge Conflicts --- README.md | 73 ----------------------------- content/docs/addons-test-utils.md | 6 +-- content/docs/forms.md | 6 +-- content/docs/reference-react-dom.md | 8 +--- content/tutorial/tutorial.md | 4 -- 5 files changed, 3 insertions(+), 94 deletions(-) diff --git a/README.md b/README.md index 77c15d508..9cdfdf5da 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ -<<<<<<< HEAD

نسخه فارسی reactjs.org

@@ -141,75 +140,3 @@ yarn dev

محتوایی که در reactjs.org قرار می‌گیرد، تخت مجوز CC-BY-4.0 منتشر می‌شود که جزئیات آن در LICENSE-DOCS.md آمده‌است.

-======= -# reactjs.org - -This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/). - -## Getting started - -### Prerequisites - -1. Git -1. Node: any 12.x version starting with v12.0.0 or greater -1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) -1. A fork of the repo (for any contributions) -1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine - -### Installation - -1. `cd reactjs.org` to go into the project root -1. `yarn` to install the website's npm dependencies - -### Running locally - -1. `yarn dev` to start the hot-reloading development server (powered by [Gatsby](https://www.gatsbyjs.org)) -1. `open http://localhost:8000` to open the site in your favorite browser - -## Contributing - -### Guidelines - -The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. - -### Create a branch - -1. `git checkout main` from any folder in your local `reactjs.org` repository -1. `git pull origin main` to ensure you have the latest main code -1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch - -### Make the change - -1. Follow the ["Running locally"](#running-locally) instructions -1. Save the files and check in the browser - 1. Changes to React components in `src` will hot-reload - 1. Changes to markdown files in `content` will hot-reload - 1. If working with plugins, you may need to remove the `.cache` directory and restart the server - -### Test the change - -1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. -1. Run `yarn check-all` from the project root. (This will run Prettier, ESLint, and Flow.) - -### Push it - -1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes -1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches. -1. Follow GitHub's instructions. -1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change. - -## Translation - -If you are interested in translating `reactjs.org`, please see the current translation efforts at [translations.reactjs.org](https://translations.reactjs.org/). - - -If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg). - -## Troubleshooting - -- `yarn reset` to clear the local cache - -## License -Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file. ->>>>>>> f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 9636990a9..250a628df 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -143,11 +143,7 @@ mockComponent( > نکته: > -<<<<<<< HEAD -> `mockComponent()` یک API قدیمی است. ما استفاده از [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) را به عنوان جایگزین پیشنهاد می‌کنیم. -======= -> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://jestjs.io/docs/tutorial-react-native#mock-native-modules-using-jestmock) instead. ->>>>>>> f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce +> `mockComponent()` یک API قدیمی است. ما استفاده از [`jest.mock()`](https://jestjs.io/docs/tutorial-react-native#mock-native-modules-using-jestmock) به عنوان جایگزین توصیه می‌کنیم. * * * diff --git a/content/docs/forms.md b/content/docs/forms.md index 774a87449..19532cb82 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -270,11 +270,7 @@ this.setState(partialState); ## مقدار Null ورودی کنترل‌شده {#controlled-input-null-value} -<<<<<<< HEAD -قراردادن prop value روی یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) از تغییر ورودی توسط کاربر جلوگیری می‌کند، مگر اینکه شما بخواهید. اگر یک `value` روی ورودی قرار داده‌اید، اما هنوز قابل‌ ویرایش است، ممکن است `value` را تصادفا با `undefined` و یا `null` مقدار‌دهی کرده باشید. -======= -Specifying the `value` prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`. ->>>>>>> f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce +قراردادن prop به نام value روی یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) از تغییر ورودی توسط کاربر جلوگیری می‌کند، مگر اینکه شما بخواهید. اگر یک `value` روی ورودی قرار داده‌اید، اما هنوز قابل‌ ویرایش است، ممکن است `value` را تصادفا با `undefined` و یا `null` مقدار‌دهی کرده باشید. نمونه کد زیر این [رفتار] را نشان ‌می‌دهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابل‌تغییر ‌می‌شود.) diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md index 07284d9a7..a40020b23 100644 --- a/content/docs/reference-react-dom.md +++ b/content/docs/reference-react-dom.md @@ -49,13 +49,7 @@ ReactDOM.render(element, container[, callback]) > > `ReactDOM.render()` نود اصلی را تغییر نمیدهد (فقط فرزنده‌های container را تغییر می‌دهد). شاید ممکن باشد که کامپوننتی را درون نودی که قبلا وجود داشته وارد کرد بدون اینکه نیاز به بازنویسی نودهای زیر شاخه(children) باشد. > -<<<<<<< HEAD -> `ReactDOM.render()` در حال حاضر یک reference از ریشه instance `ReactComponent` برمی‌گرداند. با این حال استفاده از این مقدار برگشتی سنتی است و باید از آن پرهیز شود زیرا در ورژن‌های آینده ری‌اکت شاید برخی کامپوننت‌ها در گاهی اوقات ناهمگام رندر شوند.اگر شما به مرجع instance ریشه `ReactComponent` نیاز داشتید، بهترین راه حل آن است که یک [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) به ریشه المنت وصل کنید. -======= -> `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy -> and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a -> [callback ref](/docs/refs-and-the-dom.html#callback-refs) to the root element. ->>>>>>> f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce +> `ReactDOM.render()` در حال حاضر یک reference از ریشه instance `ReactComponent` برمی‌گرداند. با این حال استفاده از این مقدار برگشتی سنتی است و باید از آن پرهیز شود زیرا در ورژن‌های آینده ری‌اکت شاید برخی کامپوننت‌ها در گاهی اوقات ناهمگام رندر شوند.اگر شما به مرجع instance ریشه `ReactComponent` نیاز داشتید، بهترین راه حل آن است که یک [callback ref](/docs/refs-and-the-dom.html#callback-refs) به ریشه المنت وصل کنید. > > استفاده از `ReactDOM.render()` برای hydrate کردن یک container که سمت سرور رندر شده‌است، منسوخ شده است و در ورژن ۱۷ ری‌اکت پاک خواهد شد. به جای آن از [`()hydrate`](#hydrate) استفاده کنید. * * * diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index ac7f57ff7..c79a8d395 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -524,11 +524,7 @@ class Board extends React.Component { ### چرا تغییرناپذیری (Immutability) مهم است؟ {#why-immutability-is-important} -<<<<<<< HEAD در مثال قبلی دیدید که به جای تغییر دادن مستقیم آرایه‌ی `squares` پیشنهاد دادیم با استفاده از متد `.slice()` یک کپی از آن تهیه کرده و بعد از انجام تغییرات آن را با متغیر اصلی تعویض کنید. در این بخش به تغییرناپذیری (Immutability) و ضرورت و برتری انجام این کار می‌پردازیم. -======= -In the previous code example, we suggested that you create a copy of the `squares` array using the `slice()` method instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn. ->>>>>>> f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce به طور کلی دو روش برای تغییر مقدار یک داده وجود دارد. روش اول این است که مقادیر داده را به صورت مسقیم دگرگون کنیم تا داده *تغییر (mutate)* کند. روش دوم این است که داده را با یک کپی جدید که دارای تغییرات دلخواه است تعویض ‌کنیم.