From 91cfb4e72c583f0d2a4905ca0bc3adee636c23e4 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 25 May 2021 14:56:48 +0100 Subject: [PATCH 01/12] Change example to use a
(#3697) --- content/docs/handling-events.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index bef0178b9..f0b4e6015 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -29,27 +29,27 @@ is slightly different in React: ``` -Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write: +Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default form behavior of submitting, you can write: ```html - - Click me - + + +
``` In React, this could instead be: -```js{2-5,8} -function ActionLink() { - function handleClick(e) { +```js{3} +function Form() { + function handleSubmit(e) { e.preventDefault(); - console.log('The link was clicked.'); + console.log('You clicked submit.'); } return ( - - Click me - +
+ +
); } ``` From f6c2e0690e654c8d9ef8e98efb9ec5923cfa8cbe Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 26 May 2021 20:56:56 +0000 Subject: [PATCH 02/12] Bump browserslist from 4.14.3 to 4.16.6 (#3699) --- yarn.lock | 55 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7a646028e..47b33bb97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3417,14 +3417,15 @@ browserify-zlib@^0.2.0: pako "~1.0.5" browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.12.2, browserslist@^4.8.5: - version "4.14.3" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.3.tgz#381f9e7f13794b2eb17e1761b4f118e8ae665a53" - integrity sha512-GcZPC5+YqyPO4SFnz48/B0YaCwS47Q9iPChRGi6t7HhflKBcINzFrJvRfC+jp30sRMKxF+d4EHGs27Z0XP1NaQ== + version "4.16.6" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2" + integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ== dependencies: - caniuse-lite "^1.0.30001131" - electron-to-chromium "^1.3.570" - escalade "^3.1.0" - node-releases "^1.1.61" + caniuse-lite "^1.0.30001219" + colorette "^1.2.2" + electron-to-chromium "^1.3.723" + escalade "^3.1.1" + node-releases "^1.1.71" buble-jsx-only@^0.19.8: version "0.19.8" @@ -3726,10 +3727,10 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001131: - version "1.0.30001135" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001135.tgz#995b1eb94404a3c9a0d7600c113c9bb27f2cd8aa" - integrity sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ== +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219: + version "1.0.30001230" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz#8135c57459854b2240b57a4a6786044bdc5a9f71" + integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ== case@^1.6.2: version "1.6.3" @@ -4085,10 +4086,10 @@ color@^3.0.0, color@^3.1.2: color-convert "^1.9.1" color-string "^1.5.2" -colorette@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" - integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== +colorette@^1.2.1, colorette@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94" + integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w== colors@^1.1.2: version "1.4.0" @@ -5335,10 +5336,10 @@ ee-first@1.1.1: resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= -electron-to-chromium@^1.3.570: - version "1.3.570" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz#3f5141cc39b4e3892a276b4889980dabf1d29c7f" - integrity sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg== +electron-to-chromium@^1.3.723: + version "1.3.739" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.739.tgz#f07756aa92cabd5a6eec6f491525a64fe62f98b9" + integrity sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A== elliptic@^6.5.3: version "6.5.3" @@ -5548,10 +5549,10 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" -escalade@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e" - integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig== +escalade@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" + integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== escape-goat@^2.0.0: version "2.1.1" @@ -10636,10 +10637,10 @@ node-object-hash@^2.0.0: resolved "https://registry.yarnpkg.com/node-object-hash/-/node-object-hash-2.0.0.tgz#9971fcdb7d254f05016bd9ccf508352bee11116b" integrity sha512-VZR0zroAusy1ETZMZiGeLkdu50LGjG5U1KHZqTruqtTyQ2wfWhHG2Ow4nsUbfTFGlaREgNHcCWoM/OzEm6p+NQ== -node-releases@^1.1.61: - version "1.1.61" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e" - integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g== +node-releases@^1.1.71: + version "1.1.72" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe" + integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw== noms@0.0.0: version "0.0.0" From ec2d0adcb44d6394f4e6282d8bf52f0e25dbfec3 Mon Sep 17 00:00:00 2001 From: CodeChari Date: Fri, 28 May 2021 11:51:10 +0530 Subject: [PATCH 03/12] Updating name of variable to which returned value of setState is assigned (#3701) in CodePen it is 'prevState' and in the tutorial, it is 'state', which creates confusion. --- content/docs/handling-events.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index f0b4e6015..5a746ee61 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -71,8 +71,8 @@ class Toggle extends React.Component { } handleClick() { - this.setState(state => ({ - isToggleOn: !state.isToggleOn + this.setState(prevState => ({ + isToggleOn: !prevState.isToggleOn })); } From 6618bcc7348c3e4a16ede1a53049ac4c3afdd216 Mon Sep 17 00:00:00 2001 From: Andrea Tupini Date: Mon, 31 May 2021 17:53:56 +0200 Subject: [PATCH 04/12] Fix broken link to devtools (#3715) --- content/docs/higher-order-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 07dc90c38..08d4b76cc 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -297,7 +297,7 @@ The `compose` utility function is provided by many third-party libraries includi ## Convention: Wrap the Display Name for Easy Debugging {#convention-wrap-the-display-name-for-easy-debugging} -The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of a HOC. +The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react/tree/master/packages/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of a HOC. The most common technique is to wrap the display name of the wrapped component. So if your higher-order component is named `withSubscription`, and the wrapped component's display name is `CommentList`, use the display name `WithSubscription(CommentList)`: From ff68780a27f96b0e488437832aa56f88e8349667 Mon Sep 17 00:00:00 2001 From: tfrank11 <77943795+tfrank11@users.noreply.github.com> Date: Mon, 31 May 2021 14:26:53 -0400 Subject: [PATCH 05/12] Fixed typo inside concurrent-mode-reference.md (#3716) --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index e36bb0532..a40ad1b44 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -59,7 +59,7 @@ For more information on Concurrent Mode, check out the [Concurrent Mode document `Suspense` lets your components "wait" for something before they can render, showing a fallback while waiting. -In this example, `ProfileDetails` is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails` and `ProfilePhoto`, we will show the `Loading...` fallback instead. It is important to note that until all children inside `` has loaded, we will continue to show the fallback. +In this example, `ProfileDetails` is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails` and `ProfilePhoto`, we will show the `Loading...` fallback instead. It is important to note that until all children inside `` have loaded, we will continue to show the fallback. `Suspense` takes two props: * **fallback** takes a loading indicator. The fallback is shown until all of the children of the `Suspense` component have finished rendering. From 68e4efcf93b6e589355f6aa3cbc3f3c811c0ad37 Mon Sep 17 00:00:00 2001 From: Luke Ingalls <45518011+lukeingalls@users.noreply.github.com> Date: Mon, 7 Jun 2021 04:18:45 -0600 Subject: [PATCH 06/12] Added missing comma and removed a few redundant words (#3725) --- content/docs/forms.md | 2 +- content/docs/hello-world.md | 2 +- content/docs/lists-and-keys.md | 2 +- content/docs/thinking-in-react.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/forms.md b/content/docs/forms.md index 82a0ab99b..19ff42fe6 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -9,7 +9,7 @@ redirect_from: - "docs/forms-zh-CN.html" --- -HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name: +HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name: ```html
diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 2fff80254..d72454f0b 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -40,7 +40,7 @@ React is a JavaScript library, and so we'll assume you have a basic understandin >Note > ->This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way. +>This guide occasionally uses some newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way. ## Let's Get Started! {#lets-get-started} diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md index 65f52af19..5bba3dcc8 100644 --- a/content/docs/lists-and-keys.md +++ b/content/docs/lists-and-keys.md @@ -207,7 +207,7 @@ A good rule of thumb is that elements inside the `map()` call need keys. ### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings} -Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays: +Keys used within arrays should be unique among their siblings. However, they don't need to be globally unique. We can use the same keys when we produce two different arrays: ```js{2,5,11,12,19,21} function Blog(props) { diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 6e5e7ed94..886187c3d 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -84,7 +84,7 @@ To make your UI interactive, you need to be able to trigger changes to your unde To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is [DRY: *Don't Repeat Yourself*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand. For example, if you're building a TODO list, keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count, take the length of the TODO items array. -Think of all of the pieces of data in our example application. We have: +Think of all the pieces of data in our example application. We have: * The original list of products * The search text the user has entered From 830ea059d2b1a497ddf4604e73698c2f16b58233 Mon Sep 17 00:00:00 2001 From: Ryan Le Date: Sat, 11 Sep 2021 21:40:36 +0700 Subject: [PATCH 07/12] Update forms.md --- content/docs/forms.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/content/docs/forms.md b/content/docs/forms.md index 880b7b308..99f1529c6 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -9,12 +9,7 @@ redirect_from: - "docs/forms-zh-CN.html" --- -<<<<<<< HEAD Trong React, HTML form element sẽ hoạt động hơi khác một chút so với các DOM element còn lại, form element sẽ giữ và tự xử lí một số state nội bộ (internal state) của riêng nó. Ví dụ như form dưới đây trong HTML sẽ nhận vào giá trị của input name. -======= -HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name: ->>>>>>> 68e4efcf93b6e589355f6aa3cbc3f3c811c0ad37 - ```html