From 5201abf69c5786062b8718502b7aa014646f5a7b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 12 May 2021 08:00:14 +0000 Subject: [PATCH 01/38] Bump lodash from 4.17.20 to 4.17.21 (#3680) --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index be08f8d6c..7a646028e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9780,9 +9780,9 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0: integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= lodash@^4.11.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0: - version "4.17.20" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" - integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== log-update@^3.0.0: version "3.4.0" From 3020472ce7e2958bf91613cb7721da0ac3e3183e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 13 May 2021 22:55:32 +0900 Subject: [PATCH 02/38] Bump lodash from 4.17.20 to 4.17.21 (#312) Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.20...4.17.21) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index d6e4ca6af..7cd820d33 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10308,9 +10308,9 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0: integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= lodash@^4.0.0, lodash@^4.11.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0: - version "4.17.20" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" - integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== log-symbols@2.2.0, log-symbols@^2.2.0: version "2.2.0" From 12b08e47bf3e6c9204cb35b9b670fd60439b70d0 Mon Sep 17 00:00:00 2001 From: Marisha Parker Date: Fri, 14 May 2021 06:48:48 -0600 Subject: [PATCH 03/38] Update addons-test-utils.md (#3660) Co-authored-by: Sebastian Silbermann --- content/docs/addons-test-utils.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index d269eaa73..ea92f3eb9 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -20,8 +20,10 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm > Note: > > We recommend using [React Testing Library](https://testing-library.com/react) which is designed to enable and encourage writing tests that use your components as the end users do. -> -> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output. +> +> For React versions <= 16, the [Enzyme](https://airbnb.io/enzyme/) library makes it easy to assert, manipulate, and traverse your React Components' output. + + - [`act()`](#act) - [`mockComponent()`](#mockcomponent) From abcf0358d43caa0772e599949458df9e6578489a Mon Sep 17 00:00:00 2001 From: Robert Haritonov <1260461+operatino@users.noreply.github.com> Date: Fri, 14 May 2021 22:47:15 +0100 Subject: [PATCH 04/38] Add React Advanced London 2021 - in-person + remote (#3686) --- content/community/conferences.md | 33 ++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index a5889d900..27fc9c0b6 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -12,32 +12,37 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {#upcoming-conferences} -### React fwdays’21 {#react-fwdays-2021} -March 27, 2021 - remote event +### render(ATL) 2021 {#render-atlanta-2021} +September 13-15, 2021. Atlanta, GA, USA -[Website](https://fwdays.com/en/event/react-fwdays-2021) - [Twitter](https://twitter.com/fwdays) - [Facebook](https://www.facebook.com/events/1133828147054286) - [LinkedIn](https://www.linkedin.com/events/reactfwdays-21onlineconference6758046347334582273) - [Meetup](https://www.meetup.com/ru-RU/Fwdays/events/275764431/) +[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 Summit - Remote Edition 2021 {#react-summit-remote-2021} -April 14-16, 2021, 7am PST / 10am EST / 4pm CEST - remote event +### React Advanced 2021 {#react-advanced-2021} +October 22-23, 2021. In-person in London, UK + remote (hybrid event) -[Website](https://remote.reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) +[Website](https://reactadvanced.com) - [Twitter](http://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences) + +### React India 2021 {#react-india-2021} +November 12-13, 2021 in Mumbai, India + +[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 Case Study Festival 2021 {#react-case-study-festival-2021} April 27-28, 2021 - remote event [Website](https://link.geekle.us/react/offsite) - [LinkedIn](https://www.linkedin.com/events/reactcasestudyfestival6721300943411015680/) - [Facebook](https://www.facebook.com/events/255715435820203) -### render(ATL) 2021 {#render-atlanta-2021} -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 Summit - Remote Edition 2021 {#react-summit-remote-2021} +April 14-16, 2021, 7am PST / 10am EST / 4pm CEST - remote event -### React India 2021 {#react-india-2021} -November 12-13, 2021 in Mumbai, India +[Website](https://remote.reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) -[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) +### React fwdays’21 {#react-fwdays-2021} +March 27, 2021 - remote event -## Past Conferences {#past-conferences} +[Website](https://fwdays.com/en/event/react-fwdays-2021) - [Twitter](https://twitter.com/fwdays) - [Facebook](https://www.facebook.com/events/1133828147054286) - [LinkedIn](https://www.linkedin.com/events/reactfwdays-21onlineconference6758046347334582273) - [Meetup](https://www.meetup.com/ru-RU/Fwdays/events/275764431/) ### React Next 2020 {#react-next-2020} December 1-2, 2020 - remote event From 5e3caf30094f66cad2d92c781072663d01fd8c81 Mon Sep 17 00:00:00 2001 From: WooJunKang <44981120+WooJunKang@users.noreply.github.com> Date: Mon, 17 May 2021 00:26:22 +0900 Subject: [PATCH 05/38] fix typo in docs (#313) Co-authored-by: wj-kang --- content/docs/forwarding-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3aa281473..a511bd82f 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -13,7 +13,7 @@ ref 전달은 컴포넌트를 통해 자식 중 하나에 [ref](/docs/refs-and-t `FancyButton`를 사용하는 다른 컴포넌트들은 **일반적으로** 내부 `button` DOM 요소에 대한 [ref를 얻을](/docs/refs-and-the-dom.html) 필요가 없습니다. 이는 컴포넌트들이 서로의 DOM 구조에 지나치게 의존하지 않기 때문에 괜찮습니다. -이런 캡슐화는 `FeedStory`나 `Comment` 같은 애플리케이션 레벨의 컴포넌트에서는 바람직하지만, `FancyButton`이나 `MyTextInput`과 같은 재사용성이 높은 "말단" 요소에서는 불편할 수도 있습니다. 이런 컴포넌트들은 일반적인 DOM `button`, `input`과 유사한 방볍으로 애플리케이션 전체에 걸쳐 사용되는 경향이 있습니다. 그리고 포커스, 선택, 애니메이션을 관리하기 위해서는 이런 DOM 노드에 접근하는 것이 불가피할 수 있습니다. +이런 캡슐화는 `FeedStory`나 `Comment` 같은 애플리케이션 레벨의 컴포넌트에서는 바람직하지만, `FancyButton`이나 `MyTextInput`과 같은 재사용성이 높은 "말단" 요소에서는 불편할 수도 있습니다. 이런 컴포넌트들은 일반적인 DOM `button`, `input`과 유사한 방법으로 애플리케이션 전체에 걸쳐 사용되는 경향이 있습니다. 그리고 포커스, 선택, 애니메이션을 관리하기 위해서는 이런 DOM 노드에 접근하는 것이 불가피할 수 있습니다. **Ref 전달하기는 일부 컴포넌트가 수신한 `ref`를 받아 조금 더 아래로 전달(즉, "전송")할 수 있는 옵트인 기능입니다.** From a5e0bf4d8d2725cea3ceaf8e23e14bc7f80e204d Mon Sep 17 00:00:00 2001 From: "Jabir K.H" Date: Wed, 19 May 2021 14:25:15 +0530 Subject: [PATCH 06/38] grammatical typo fix on allowlist (#3689) --- content/blog/2017-09-08-dom-attributes-in-react-16.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 19483fa79..03172bc00 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -32,7 +32,7 @@ React has always provided a JavaScript-centric API to the DOM. Since React compo
``` -This has not changed. However, the way we enforced it in the past forced us to maintain a allowlist of all valid React DOM attributes in the bundle: +This has not changed. However, the way we enforced it in the past forced us to maintain an allowlist of all valid React DOM attributes in the bundle: ```js // ... From e60bca04f3da690256ce019bd8907c2b368589ee Mon Sep 17 00:00:00 2001 From: Asher Oloo <63627538+miosher@users.noreply.github.com> Date: Fri, 21 May 2021 09:55:32 +0300 Subject: [PATCH 07/38] Fixed a minor typo in a comment (#3685) --- content/docs/testing-recipes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md index 1fa4a6969..45669d127 100644 --- a/content/docs/testing-recipes.md +++ b/content/docs/testing-recipes.md @@ -393,7 +393,7 @@ it("changes value when clicked", () => { render(, container); }); - // get ahold of the button element, and trigger some clicks on it + // get a hold of the button element, and trigger some clicks on it const button = document.querySelector("[data-testid=toggle]"); expect(button.innerHTML).toBe("Turn on"); From 4cfeac6ba448073b24a52a926a12cb618ae09227 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 23 May 2021 21:35:25 +0900 Subject: [PATCH 08/38] fix typo in docs (#315) --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 9209afca3..fc2a306df 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -169,7 +169,7 @@ const MyComponent = () => ( ## Route-based code splitting {#route-based-code-splitting} -앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 헤치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. +앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭습니다. 여러분은 사용자의 경험을 해치지 않으면서 번들을 균등하게 분배할 곳을 찾고자 합니다. 이를 시작하기 좋은 장소는 라우트입니다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않습니다. From 87b7679aaec3bbf1808fdc03f7b2c4dc02eebd84 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 24 May 2021 16:13:31 +0900 Subject: [PATCH 09/38] fix typo in docs (#316) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 메소드 -> 메서드 --- content/docs/addons-shallow-renderer.md | 2 +- content/docs/faq-functions.md | 16 ++++++++-------- content/docs/higher-order-components.md | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md index c7be25aa4..99b531f79 100644 --- a/content/docs/addons-shallow-renderer.md +++ b/content/docs/addons-shallow-renderer.md @@ -15,7 +15,7 @@ var ShallowRenderer = require('react-test-renderer/shallow'); // npm에서 ES5 ## 개요 {#overview} -React를 위한 유닛 테스트를 작성할 때 얕은 렌더링이 유용할 수 있습니다. 얕은 렌더링은 컴포넌트를 "한 단계 깊이"로 렌더링할 수 있으며 인스턴스화 또는 렌더링 되지 않는 자식 컴포넌트의 동작에 대해 걱정 없이 렌더링 메소드가 무엇을 반환하는지에 대해 검증할 수 있습니다. 이 작업은 DOM이 필요하지 않습니다. +React를 위한 유닛 테스트를 작성할 때 얕은 렌더링이 유용할 수 있습니다. 얕은 렌더링은 컴포넌트를 "한 단계 깊이"로 렌더링할 수 있으며 인스턴스화 또는 렌더링 되지 않는 자식 컴포넌트의 동작에 대해 걱정 없이 렌더링 메서드가 무엇을 반환하는지에 대해 검증할 수 있습니다. 이 작업은 DOM이 필요하지 않습니다. 예를 들어 다음 컴포넌트가 있는 경우 diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index ce06f6210..324f65363 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -51,7 +51,7 @@ class Foo extends Component { } ``` -#### render 메소드 안에서 바인딩하기 {#bind-in-render} +#### render 메서드 안에서 바인딩하기 {#bind-in-render} ```jsx class Foo extends Component { @@ -66,9 +66,9 @@ class Foo extends Component { >**주의** > ->`Function.prototype.bind`를 render 메소드에서 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 생성하기 때문에 성능에 영향을 줄 수 있습니다. +>`Function.prototype.bind`를 render 메서드에서 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 생성하기 때문에 성능에 영향을 줄 수 있습니다. -#### render 메소드 안에서 화살표 함수 사용 {#arrow-function-in-render} +#### render 메서드 안에서 화살표 함수 사용 {#arrow-function-in-render} ```jsx class Foo extends Component { @@ -83,9 +83,9 @@ class Foo extends Component { >**주의** > -> render 메소드 안에서 화살표 함수를 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 만들기 때문에 엄격한 비교에 의해 최적화가 깨질 수 있습니다. +> render 메서드 안에서 화살표 함수를 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 만들기 때문에 엄격한 비교에 의해 최적화가 깨질 수 있습니다. -### render 메소드 안에서 화살표 함수를 사용해도 괜찮을까요? {#is-it-ok-to-use-arrow-functions-in-render-methods} +### render 메서드 안에서 화살표 함수를 사용해도 괜찮을까요? {#is-it-ok-to-use-arrow-functions-in-render-methods} 이 방법은 대체로 사용해도 괜찮고, 콜백 함수로 매개변수를 전달해 주는 가장 쉬운 방법입니다. @@ -104,9 +104,9 @@ var method = obj.method; method(); ``` -바인딩 메소드는 두 번째 코드 조각이 첫 번째 코드조각과 같은 방식으로 작동하도록 만들어 줍니다. +바인딩 메서드는 두 번째 코드 조각이 첫 번째 코드조각과 같은 방식으로 작동하도록 만들어 줍니다. -일반적으로 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 11/38] 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 dbf9bcad609e96de0f8039ec67be38c4df519082 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 27 May 2021 22:08:43 +0900 Subject: [PATCH 12/38] Bump browserslist from 4.14.3 to 4.16.6 (#318) Bumps [browserslist](https://github.com/browserslist/browserslist) from 4.14.3 to 4.16.6. - [Release notes](https://github.com/browserslist/browserslist/releases) - [Changelog](https://github.com/browserslist/browserslist/blob/main/CHANGELOG.md) - [Commits](https://github.com/browserslist/browserslist/compare/4.14.3...4.16.6) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 55 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7cd820d33..70d3e6958 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3627,14 +3627,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" @@ -3941,10 +3942,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" @@ -4313,10 +4314,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" @@ -5611,10 +5612,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== elegant-spinner@^1.0.1: version "1.0.1" @@ -5846,10 +5847,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" @@ -11252,10 +11253,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 13/38] 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 7c227c4fa5db2dfc90bdd39f358a4f97cb137320 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 28 May 2021 22:59:05 +0900 Subject: [PATCH 14/38] Bump dns-packet from 1.3.1 to 1.3.4 (#319) Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4. - [Release notes](https://github.com/mafintosh/dns-packet/releases) - [Changelog](https://github.com/mafintosh/dns-packet/blob/master/CHANGELOG.md) - [Commits](https://github.com/mafintosh/dns-packet/compare/v1.3.1...v1.3.4) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 70d3e6958..b5e7b53cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5397,9 +5397,9 @@ dns-equal@^1.0.0: integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0= dns-packet@^1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a" - integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg== + version "1.3.4" + resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f" + integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA== dependencies: ip "^1.1.0" safe-buffer "^5.0.1" From 6618bcc7348c3e4a16ede1a53049ac4c3afdd216 Mon Sep 17 00:00:00 2001 From: Andrea Tupini Date: Mon, 31 May 2021 17:53:56 +0200 Subject: [PATCH 15/38] 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 16/38] 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 17/38] 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 6e6500e7668255c34e44f27b6cb74f367dbf8074 Mon Sep 17 00:00:00 2001 From: Gift Egwuenu Date: Tue, 8 Jun 2021 11:04:17 +0200 Subject: [PATCH 18/38] Add React Conference Live 2021 (#3718) * Add React Conference Live 2021 * Update conferences.md Co-authored-by: Alexey Pyltsyn --- content/community/conferences.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index 27fc9c0b6..22beffe00 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -17,10 +17,15 @@ 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 Advanced 2021 {#react-advanced-2021} October 22-23, 2021. In-person in London, UK + remote (hybrid event) -[Website](https://reactadvanced.com) - [Twitter](http://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences) +[Website](https://reactadvanced.com) - [Twitter](https://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences) ### React India 2021 {#react-india-2021} November 12-13, 2021 in Mumbai, India From 7b0aecbe6d6537bfcc37d5ae6dc036a945f97728 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Tue, 8 Jun 2021 13:25:54 -0400 Subject: [PATCH 19/38] New post: The Plan for React 18 (#3729) * New post: The Plan for React 18 * Mark CM docs as stale * Update content/blog/2021-06-08-the-plan-for-react-18.md Co-authored-by: Ricky * Simplify Co-authored-by: Dan Abramov Co-authored-by: Dan Abramov Co-authored-by: Ricky --- content/authors.yml | 9 +++ .../blog/2021-06-08-the-plan-for-react-18.md | 59 +++++++++++++++++++ content/docs/concurrent-mode-adoption.md | 9 ++- content/docs/concurrent-mode-intro.md | 7 ++- content/docs/concurrent-mode-patterns.md | 7 ++- content/docs/concurrent-mode-reference.md | 7 ++- content/docs/concurrent-mode-suspense.md | 7 ++- content/docs/nav.yml | 13 ---- src/components/MarkdownPage/MarkdownPage.js | 2 +- 9 files changed, 93 insertions(+), 27 deletions(-) create mode 100644 content/blog/2021-06-08-the-plan-for-react-18.md diff --git a/content/authors.yml b/content/authors.yml index b5e14fb25..af35c620a 100644 --- a/content/authors.yml +++ b/content/authors.yml @@ -1,6 +1,9 @@ # Map of short name to more information. `name` will be used but if you don't # want to use your real name, just use whatever. If url is included, your name # will be a link to the provided url. +abernathyca: + name: Christine Abernathy + url: https://twitter.com/abernathyca acdlite: name: Andrew Clark url: https://twitter.com/acdlite @@ -70,12 +73,18 @@ petehunt: rachelnabors: name: Rachel Nabors url: https://twitter.com/rachelnabors +rickhanlonii: + name: Rick Hanlon + url: https://twitter.com/rickhanlonii schrockn: name: Nick Schrock url: https://twitter.com/schrockn sebmarkbage: name: Sebastian Markbåge url: https://twitter.com/sebmarkbage +sethwebster: + name: Seth Webster + url: https://twitter.com/sethwebster sophiebits: name: Sophie Alpert url: https://sophiebits.com/ diff --git a/content/blog/2021-06-08-the-plan-for-react-18.md b/content/blog/2021-06-08-the-plan-for-react-18.md new file mode 100644 index 000000000..c4ae6a76e --- /dev/null +++ b/content/blog/2021-06-08-the-plan-for-react-18.md @@ -0,0 +1,59 @@ +--- +title: "The Plan for React 18" +author: [acdlite, bvaughn, abernathyca, gaearon, rachelnabors, rickhanlonii, sebmarkbage, sethwebster] +--- + +The React team is excited to share a few updates: + +1. We’ve started work on the React 18 release, which will be our next major version. +2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. +3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback. + +These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious! + +## What’s coming in React 18 + +When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`. + +These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app. + +If you've been following our research into the future of React (we don't expect you to!), you might have previously heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means that **you will be able to adopt React 18 without rewrites and try the new features at your own pace.** + +## A gradual adoption strategy + +Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon. + +We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group. + +## Working with the community + +We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future! + +**The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog. + +For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4). + +## Accessing the React 18 Working Group + +Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18). + +Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community. + +As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues). + +## How to try React 18 Alpha today + +New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday. + +There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**. + +## Projected React 18 release timeline + +We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications. + +* Library Alpha: Available today +* Public Beta: At least several months +* Release Candidate (RC): At least several weeks after Beta +* General Availability: At least several weeks after RC + +More details about our projected release timeline are [available in the Working Group](https://github.com/reactwg/react-18/discussions/9). We'll post updates on this blog when we're closer to a public release. diff --git a/content/docs/concurrent-mode-adoption.md b/content/docs/concurrent-mode-adoption.md index f5b8d9db1..54806d60b 100644 --- a/content/docs/concurrent-mode-adoption.md +++ b/content/docs/concurrent-mode-adoption.md @@ -17,13 +17,12 @@ next: concurrent-mode-reference.html >Caution: > ->This page describes **experimental features that are not yet available in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. - ->Caution: +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** > ->All references below to "blocking mode" and `createBlockingRoot` are outdated and should be ignored. +>Before React 18 is released, we will replace this page with stable documentation.
diff --git a/content/docs/concurrent-mode-intro.md b/content/docs/concurrent-mode-intro.md index b2980ce3d..90b050c5c 100644 --- a/content/docs/concurrent-mode-intro.md +++ b/content/docs/concurrent-mode-intro.md @@ -16,9 +16,12 @@ next: concurrent-mode-suspense.html >Caution: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** +> +>Before React 18 is released, we will replace this page with stable documentation. diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index f38fe595f..ac5e29173 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -17,9 +17,12 @@ next: concurrent-mode-adoption.html >Caution: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead. +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** +> +>Before React 18 is released, we will replace this page with stable documentation. diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index a40ad1b44..09fb109f7 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -16,9 +16,12 @@ prev: concurrent-mode-adoption.html >Caution: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** +> +>Before React 18 is released, we will replace this page with stable documentation. diff --git a/content/docs/concurrent-mode-suspense.md b/content/docs/concurrent-mode-suspense.md index 12ad112b2..4e1e8c538 100644 --- a/content/docs/concurrent-mode-suspense.md +++ b/content/docs/concurrent-mode-suspense.md @@ -17,9 +17,12 @@ next: concurrent-mode-patterns.html >Caution: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead. +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** +> +>Before React 18 is released, we will replace this page with stable documentation. diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 09f73ca6a..dbedc5f5f 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -133,19 +133,6 @@ title: Testing Recipes - id: testing-environments title: Testing Environments -- title: Concurrent Mode (Experimental) - isOrdered: true - items: - - id: concurrent-mode-intro - title: Introducing Concurrent Mode - - id: concurrent-mode-suspense - title: Suspense for Data Fetching - - id: concurrent-mode-patterns - title: Concurrent UI Patterns - - id: concurrent-mode-adoption - title: Adopting Concurrent Mode - - id: concurrent-mode-reference - title: Concurrent Mode API Reference - title: Contributing items: - id: how-to-contribute diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index ab1f3af3a..0965f360e 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -97,7 +97,7 @@ const MarkdownPage = ({
{date}{' '} {hasAuthors && ( - + by{' '} {toCommaSeparatedList(authors, author => ( Date: Tue, 8 Jun 2021 18:53:54 +0100 Subject: [PATCH 20/38] Fix hanging word --- content/blog/2021-06-08-the-plan-for-react-18.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2021-06-08-the-plan-for-react-18.md b/content/blog/2021-06-08-the-plan-for-react-18.md index c4ae6a76e..00eff4743 100644 --- a/content/blog/2021-06-08-the-plan-for-react-18.md +++ b/content/blog/2021-06-08-the-plan-for-react-18.md @@ -17,7 +17,7 @@ When it’s released, React 18 will include out-of-the-box improvements (like [a These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app. -If you've been following our research into the future of React (we don't expect you to!), you might have previously heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means that **you will be able to adopt React 18 without rewrites and try the new features at your own pace.** +If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.** ## A gradual adoption strategy From 589c0338c59bf08bceb26bd00d28ec7225d1215f Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Wed, 9 Jun 2021 16:16:53 -0400 Subject: [PATCH 21/38] Add /link/switch-to-createroot (#3730) Redirects to the working group document that explains how to upgrade from ReactDOM.render to ReactDOM.createRoot. https://github.com/reactwg/react-18/discussions/5 --- static/_redirects | 1 + 1 file changed, 1 insertion(+) diff --git a/static/_redirects b/static/_redirects index 992353033..f3f7146bd 100644 --- a/static/_redirects +++ b/static/_redirects @@ -41,3 +41,4 @@ https://en.reactjs.org/* https://reactjs.org/:splat 301! /link/uselayouteffect-ssr https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 301 /link/react-devtools-faq https://github.com/facebook/react/tree/master/packages/react-devtools#faq 301 /link/setstate-in-render https://github.com/facebook/react/issues/18178#issuecomment-595846312 301 +/link/switch-to-createroot https://github.com/reactwg/react-18/discussions/5 From bb3702da72cb2f2732143a04ab490ea26600c9d3 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 13 Jun 2021 19:48:40 +0000 Subject: [PATCH 22/38] Bump dns-packet from 1.3.1 to 1.3.4 (#3700) --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 47b33bb97..a70e45f50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5121,9 +5121,9 @@ dns-equal@^1.0.0: integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0= dns-packet@^1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a" - integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg== + version "1.3.4" + resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f" + integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA== dependencies: ip "^1.1.0" safe-buffer "^5.0.1" From f3baa6d075c8de475b688abf035d7054bc8a9606 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 13 Jun 2021 20:02:22 +0000 Subject: [PATCH 23/38] Bump ws from 5.2.2 to 5.2.3 (#3735) --- yarn.lock | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/yarn.lock b/yarn.lock index a70e45f50..11e1b5087 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15921,9 +15921,9 @@ write@^0.2.1: mkdirp "^0.5.1" ws@^5.2.0: - version "5.2.2" - resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f" - integrity sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA== + version "5.2.3" + resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.3.tgz#05541053414921bc29c63bee14b8b0dd50b07b3d" + integrity sha512-jZArVERrMsKUatIdnLzqvcfydI85dvd/Fp1u/VOpfdDWQ4c9qWXe+VIeAbQ5FrDwciAkr+lzofXLz3Kuf26AOA== dependencies: async-limiter "~1.0.0" @@ -15934,10 +15934,10 @@ ws@^6.2.1: dependencies: async-limiter "~1.0.0" -ws@^7.3.0: - version "7.3.1" - resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8" - integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA== +ws@^7.3.0, ws@~7.4.2: + version "7.4.2" + resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.2.tgz#782100048e54eb36fe9843363ab1c68672b261dd" + integrity sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA== ws@~6.1.0: version "6.1.4" @@ -15946,11 +15946,6 @@ ws@~6.1.0: dependencies: async-limiter "~1.0.0" -ws@~7.4.2: - version "7.4.2" - resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.2.tgz#782100048e54eb36fe9843363ab1c68672b261dd" - integrity sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA== - x-is-string@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82" From 17aaf24428343cd47be666d88fbfc0e72f8a2201 Mon Sep 17 00:00:00 2001 From: Tommy Kang <48821257+ainochi-kor@users.noreply.github.com> Date: Fri, 25 Jun 2021 21:42:54 +0900 Subject: [PATCH 24/38] Update web-components.md (#324) --- content/docs/web-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 771857046..e952d9058 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -8,7 +8,7 @@ redirect_from: React와 [웹 컴포넌트](https://developer.mozilla.org/ko/docs/Web/Web_Components)는 서로 다른 문제를 해결하기 위해 만들어졌습니다. 웹 컴포넌트는 재사용할 수 있는 컴포넌트에 강한 캡슐화를 제공하는 반면, React는 데이터와 DOM을 동기화하는 선언적 라이브러리를 제공합니다. -두 목표는 상호보완적입니다. React에서 웹 컴포넌트를 사용할지, 웹 컴포넌트를 React에서 사용할지, 둘 다 사용할지는 자유롭게 정하실 수 있습니다. +두 목표는 상호보완적입니다. React에서 웹 컴포넌트를 사용할지, 웹 컴포넌트에서 React를 사용할지, 둘 다 사용할지는 자유롭게 정하실 수 있습니다. ## React에서 웹 컴포넌트 사용하기 {#using-web-components-in-react} From 65d092232cffc11ab073f6f4050ad7edd345bdd0 Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:11:47 +0900 Subject: [PATCH 25/38] resolve merge conflict Related to f3baa6d075c8de475b688abf035d7054bc8a9606 Related to bb3702da72cb2f2732143a04ab490ea26600c9d3 --- yarn.lock | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/yarn.lock b/yarn.lock index 05a8101ce..225503126 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5616,14 +5616,11 @@ 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== -<<<<<<< HEAD elegant-spinner@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e" integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4= -======= ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 elliptic@^6.5.3: version "6.5.4" @@ -10311,7 +10308,6 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -<<<<<<< HEAD lodash@^4.0.0, lodash@^4.11.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" @@ -10339,12 +10335,6 @@ log-update@^2.3.0: ansi-escapes "^3.0.0" cli-cursor "^2.0.0" wrap-ansi "^3.0.1" -======= -lodash@^4.11.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0: - version "4.17.21" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" - integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 log-update@^3.0.0: version "3.4.0" From f7eba622805eaaabcfb871a221b3b123dda9257c Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:12:57 +0900 Subject: [PATCH 26/38] Resolve merge conflict Related to 68e4efcf93b6e589355f6aa3cbc3f3c811c0ad37 --- content/docs/thinking-in-react.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 79352f6b5..762fd59a3 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -84,11 +84,7 @@ UI를 상호작용하게 만들려면 기반 데이터 모델을 변경할 수 애플리케이션을 올바르게 만들기 위해서는 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야 합니다. 여기서 핵심은 [중복배제](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)원칙입니다. 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때그때 계산되도록 만드세요. 예를 들어 TODO 리스트를 만든다고 하면, TODO 아이템을 저장하는 배열만 유지하고 TODO 아이템의 개수를 표현하는 state를 별도로 만들지 마세요. TODO 갯수를 렌더링해야한다면 TODO 아이템 배열의 길이를 가져오면 됩니다. -<<<<<<< HEAD 예시 애플리케이션 내 데이터들을 생각해봅시다. 애플리케이션은 다음과 같은 데이터를 가지고 있습니다. -======= -Think of all the pieces of data in our example application. We have: ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 * 제품의 원본 목록 * 유저가 입력한 검색어 From fb32a137eae1917bbb92387a5048b758281c3747 Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:14:17 +0900 Subject: [PATCH 27/38] Resolve merge conflict Related to 7b0aecbe6d6537bfcc37d5ae6dc036a945f97728 --- content/docs/nav.yml | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index a97cffd82..0ce136777 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -132,26 +132,8 @@ - id: testing-recipes title: 테스팅 방안 - id: testing-environments -<<<<<<< HEAD title: 테스팅 환경 -- title: Concurrent 모드 (실험 단계) - isOrdered: true - items: - - id: concurrent-mode-intro - title: Concurrent 모드 소개 - - id: concurrent-mode-suspense - title: 데이터를 가져오기 위한 Suspense - - id: concurrent-mode-patterns - title: Concurrent UI 패턴 - - id: concurrent-mode-adoption - title: Concurrent 모드 도입하기 - - id: concurrent-mode-reference - title: Concurrent 모드 API 참고서 - title: 기여 -======= - title: Testing Environments -- title: Contributing ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 items: - id: how-to-contribute title: 기여하는 방법 From c847bc920270a87b2046031dd07d0948372cad3c Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:15:31 +0900 Subject: [PATCH 28/38] Resolve merge conflict Related to 68e4efcf93b6e589355f6aa3cbc3f3c811c0ad37 --- content/docs/lists-and-keys.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md index fb6e60e28..5cd3b9038 100644 --- a/content/docs/lists-and-keys.md +++ b/content/docs/lists-and-keys.md @@ -206,11 +206,7 @@ ReactDOM.render( ### Key는 형제 사이에서만 고유한 값이어야 한다. {#keys-must-only-be-unique-among-siblings} -<<<<<<< HEAD Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다. -======= -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: ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 ```js{2,5,11,12,19,21} function Blog(props) { From d76b377fb5c158b0199a4c969d1bb499ca73542a Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:16:29 +0900 Subject: [PATCH 29/38] Resolve merge conflict Related to 6618bcc7348c3e4a16ede1a53049ac4c3afdd216 --- content/docs/higher-order-components.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 74252a5f0..c8ab19a9c 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -295,11 +295,7 @@ const EnhancedComponent = enhance(WrappedComponent) ## 컨벤션: 간단한 디버깅을 위한 디스플레이 네임 작성 방법 {#convention-wrap-the-display-name-for-easy-debugging} -<<<<<<< HEAD -다른 구성 요소와 마찬가지로 HOC로 만든 컨테이너 구성 요소도 [React Developer Tools](https://github.com/facebook/react-devtools)에 표시됩니다. 디버깅을 쉽게 하려면 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. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 +다른 구성 요소와 마찬가지로 HOC로 만든 컨테이너 구성 요소도 [React Developer Tools](https://github.com/facebook/react/tree/master/packages/react-devtools)에 표시됩니다. 디버깅을 쉽게 하려면 HOC의 결과임을 알리는 디스플레이 네임을 작성합니다. 가장 일반적인 방법은 HOC의 이름으로 내부 컴포넌트명을 감싸는 것입니다. 따라서 HOC의 이름이 `withSubscription`이고, HOC 내부의 컴포넌트의 이름이 `CommentList` 인 경우, 디스플레이 네임은 `WithSubscription(CommentList)`을 사용합니다. From 7dfbc3212bd91917035a5b25e98cb63e69a1eb7b Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:16:54 +0900 Subject: [PATCH 30/38] Resolve merge conflict Related to 68e4efcf93b6e589355f6aa3cbc3f3c811c0ad37 --- content/docs/hello-world.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 657384dc7..ab20df797 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -40,15 +40,9 @@ React는 JavaScript 라이브러리이며, 따라서 JavaScript 언어에 대한 >주의 > -<<<<<<< HEAD >이 가이드에서는 가끔 최신 JavaScript 문법을 예시에 사용합니다. 지난 몇 년간 JavaScript로 작업하지 않았다면, [이 3가지 사항](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c)을 통해 대부분의 것을 얻을 수 있습니다. -======= ->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. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 ## 시작해봅시다! {#lets-get-started} 아래로 계속 스크롤하면, 푸터 바로 앞에서 [다음 장](/docs/introducing-jsx.html)으로 연결된 링크를 찾을 수 있습니다. - - From efc040e8a710357c4c64a42f154962817a7a832f Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:22:30 +0900 Subject: [PATCH 31/38] Resolve merge conflict Related to 91cfb4e72c583f0d2a4905ca0bc3adee636c23e4 --- content/docs/handling-events.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index fd27cc34a..02d20228b 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -10,7 +10,7 @@ redirect_from: React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법 차이는 다음과 같습니다. -* React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. +* React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. * JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어, HTML은 다음과 같습니다. @@ -29,11 +29,7 @@ React에서는 약간 다릅니다. ``` -<<<<<<< HEAD -또 다른 차이점으로, React에서는 `false`를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 `preventDefault`를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 다음과 같은 코드를 작성합니다. -======= -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: ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 +또 다른 차이점으로, React에서는 `false`를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 `preventDefault`를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다. ```html From 8f95322f52040e0f14bbf1f30b3d6b78a441800c Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:23:10 +0900 Subject: [PATCH 32/38] Resolve merge conflict Related to 68e4efcf93b6e589355f6aa3cbc3f3c811c0ad37 --- content/docs/forms.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/content/docs/forms.md b/content/docs/forms.md index 883c2c94c..8965e8fda 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -9,11 +9,7 @@ redirect_from: - "docs/forms-zh-CN.html" --- -<<<<<<< HEAD -HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 조금 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 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: ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 +HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받습니다. ```html @@ -289,7 +285,7 @@ setTimeout(function() { ## 제어 컴포넌트의 대안 {#alternatives-to-controlled-components} -데이터를 변경할 수 있는 모든 방법에 대해 이벤트 핸들러를 작성하고 React 컴포넌트를 통해 모든 입력 상태를 연결해야 하기 때문에 때로는 제어 컴포넌트를 사용하는 게 지루할 수 있습니다. 특히 기존의 코드베이스를 React로 변경하고자 할 때나 React가 아닌 라이브러리와 React 애플리케이션을 통합하고자 할 때 짜증날 수 있습니다. 이러한 경우에 입력 폼을 구현하기 위한 대체 기술인 [비제어 컴포넌트](/docs/uncontrolled-components.html)를 확인할 수 있습니다. +데이터를 변경할 수 있는 모든 방법에 대해 이벤트 핸들러를 작성하고 React 컴포넌트를 통해 모든 입력 상태를 연결해야 하기 때문에 때로는 제어 컴포넌트를 사용하는 게 지루할 수 있습니다. 특히 기존의 코드베이스를 React로 변경하고자 할 때나 React가 아닌 라이브러리와 React 애플리케이션을 통합하고자 할 때 짜증날 수 있습니다. 이러한 경우에 입력 폼을 구현하기 위한 대체 기술인 [비제어 컴포넌트](/docs/uncontrolled-components.html)를 확인할 수 있습니다. ## 완전한 해결책 {#fully-fledged-solutions} From f4c6cc9fcf523d14769f2348b5fe115c53d244c8 Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:37:29 +0900 Subject: [PATCH 33/38] Resolve merge conflict Related to 7b0aecbe6d6537bfcc37d5ae6dc036a945f97728 --- content/docs/concurrent-mode-adoption.md | 17 +++-------------- content/docs/concurrent-mode-intro.md | 17 +++++------------ content/docs/concurrent-mode-patterns.md | 13 +++---------- content/docs/concurrent-mode-reference.md | 13 +++---------- content/docs/concurrent-mode-suspense.md | 13 +++---------- 5 files changed, 17 insertions(+), 56 deletions(-) diff --git a/content/docs/concurrent-mode-adoption.md b/content/docs/concurrent-mode-adoption.md index db97cf5bc..bbeeffbcf 100644 --- a/content/docs/concurrent-mode-adoption.md +++ b/content/docs/concurrent-mode-adoption.md @@ -17,22 +17,11 @@ next: concurrent-mode-reference.html >주의 > -<<<<<<< HEAD ->이 페이지는 **안정된 배포판에서 아직 제공되지 않는 실험적인 기능들**에 대해 설명합니다. 프로덕션용 앱에선 React 실험 배포판을 사용하지 마세요. 이러한 기능들은 React의 일부가 되기 전에 아무 예고 없이 상당히 변경될 수 있습니다. +>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. > ->이 문서는 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. **React를 처음 쓰신다면 이 기능들에 대해 신경 쓰지 마세요.** 당장 익힐 필요는 없습니다. - ->주의 -> ->아래에 있는 "blocking 모드"와 `createBlockingRoot`에 대한 모든 참조는 유효하지 않으며 무시돼야 합니다. -======= ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. -> ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** +>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요. > ->Before React 18 is released, we will replace this page with stable documentation. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 +>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다.
diff --git a/content/docs/concurrent-mode-intro.md b/content/docs/concurrent-mode-intro.md index 4e0bd1dd3..40dfd99fc 100644 --- a/content/docs/concurrent-mode-intro.md +++ b/content/docs/concurrent-mode-intro.md @@ -16,18 +16,11 @@ next: concurrent-mode-suspense.html >주의사항 > -<<<<<<< HEAD ->이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들**에 관해 설명합니다. 프로덕션용 앱에선 리액트의 실험 배포판을 사용하지 마세요. 이 기능들은 React에 포함되기 전에 경고 없이 크게 변경될 수 있습니다. +>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. > ->이 문서는 얼리어답터들과 새로운 기능을 궁금해하시는 분들을 위해 작성된 문서입니다. **React에 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다**. 그 기능들을 바로 배울 필요는 없습니다. -======= ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. +>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요. > ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** -> ->Before React 18 is released, we will replace this page with stable documentation. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 +>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다. @@ -74,11 +67,11 @@ Concurrent 모드는 "브랜치에서" 하는 React 작업과 같다고 전에 한번 앱에서 두 화면 사이를 탐색한다고 가정해보겠습니다. 경우에 따라서, 새 화면에서 사용자에게 "충분히 좋은" 로딩 state를 보여주기 위해 필요한 코드와 데이터를 불러오지 못 할 수 있습니다. 빈 화면이나 큰 스피너로 전환하는 것은 어려운 일이 될 수 있지만 일반적으로 필요한 코드와 데이터를 가져오는 데에 그렇게 많은 시간이 소요되지않습니다. **React가 기존 화면에서 조금 더 오래 유지할 수 있고 새 화면을 보여주기 전에 "안 좋은" 로딩 state를 "건너뛸 수" 있다면 더 좋지 않을까요?** -오늘날 이것이 가능하긴 하지만 조정하기는 어려울 수 있습니다. Concurrent 모드에서는 이 기능이 내장되어 있습니다. React는 먼저 메모리, 비유하자면 "다른 브랜치", 에서 새로운 화면을 준비하기 시작합니다. 그래서 React는 더 많은 콘텐츠를 불러올 수 있도록 DOM을 업데이트하기 전에 기다릴 수 있습니다. Concurrent 모드에서는 React가 인라인 표시기로 완벽하게 상호작용하는 이전 화면을 계속 표시하도록 지시할 수 있습니다. +오늘날 이것이 가능하긴 하지만 조정하기는 어려울 수 있습니다. Concurrent 모드에서는 이 기능이 내장되어 있습니다. React는 먼저 메모리, 비유하자면 "다른 브랜치", 에서 새로운 화면을 준비하기 시작합니다. 그래서 React는 더 많은 콘텐츠를 불러올 수 있도록 DOM을 업데이트하기 전에 기다릴 수 있습니다. Concurrent 모드에서는 React가 인라인 표시기로 완벽하게 상호작용하는 이전 화면을 계속 표시하도록 지시할 수 있습니다. ### 동시성 {#concurrency} -위의 두 가지 예시를 살펴보고 Concurrent 모드가 어떻게 통합되는지 살펴보겠습니다. **Concurrent 모드에서 React는 여러 작업을 *동시에*, 다른 팀원들이 각자 작업을 할 수 있는 브랜치처럼, 진행할 수 있습니다** +위의 두 가지 예시를 살펴보고 Concurrent 모드가 어떻게 통합되는지 살펴보겠습니다. **Concurrent 모드에서 React는 여러 작업을 *동시에*, 다른 팀원들이 각자 작업을 할 수 있는 브랜치처럼, 진행할 수 있습니다** * CPU 바운드 업데이트(예를 들어 DOM 노드 만들기 및 컴포넌트 코드 실행)의 경우 Concurrency는 더욱 긴급한 업데이트가 이미 시작한 렌더링을 "중단" 할 수 있음을 의미합니다. * IO 바운드 업데이트(예를 들어 네트워크에서 코드나 데이터를 가져오는 것)의 경우 Concurrency는 모든 데이터가 도달하기 전에 React가 메모리에서 렌더링을 시작할 수 있으며 빈 로딩 state표시를 무시할 수 있음을 의미합니다. diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index 2ced59058..18784cc2b 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -17,18 +17,11 @@ next: concurrent-mode-adoption.html >경고 > -<<<<<<< HEAD -> 이 페이지의 내용은 **안정된 배포판에서 [사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능**입니다. 프로덕션 애플리케이션에 실험적인 React 빌드를 의존하지 마십시오. 이 기능은 React에 편입되기 전에 경고 없이 크게 변경될 수 있습니다. +>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. > -> 이 문서는 얼리어답터와 호기심 넘치는 사람들을 위해 작성되었습니다. **React 초기 입문자라면 이 기능에 신경 쓰지 않아도 괜찮습니다.** -- 이 내용을 지금 당장 배울 필요는 없습니다. 데이터 패칭을 위한 튜토리얼을 찾는다면 [이 문서](https://www.robinwieruch.de/react-hooks-fetch-data/)를 보세요. -======= ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. +>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요. > ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** -> ->Before React 18 is released, we will replace this page with stable documentation. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 +>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다. diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 1ad69ab84..5e5b1fa6c 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -16,18 +16,11 @@ prev: concurrent-mode-adoption.html >주의 > -<<<<<<< HEAD ->이 페이지는 **안정된 배포판에서는 [아직 사용할 수 없는](/docs/concurrent-mode-adoption.html) 실험적인 기능들에 관해 설명합니다.** 프로덕션용 앱에선 React의 실험 배포판을 사용하지 마세요. 이 기능들은 React의 일부가 되기 전에 경고 없이 크게 변경될 수 있습니다. -> ->이 문서는 얼리어답터들과 궁금해하시는 분들을 위해 제작된 문서입니다. **React를 처음 접해본다면 이러한 기능들을 걱정하지 않아도 됩니다.** 그 기능들을 바로 배울 필요는 없습니다. -======= ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. +>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. > ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** +>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요. > ->Before React 18 is released, we will replace this page with stable documentation. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 +>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다. diff --git a/content/docs/concurrent-mode-suspense.md b/content/docs/concurrent-mode-suspense.md index 30d16e805..13c2396a0 100644 --- a/content/docs/concurrent-mode-suspense.md +++ b/content/docs/concurrent-mode-suspense.md @@ -17,18 +17,11 @@ next: concurrent-mode-patterns.html >주의: > -<<<<<<< HEAD ->이 페이지는 **안정된 배포판에서 [아직 제공되지 않는](/docs/concurrent-mode-adoption.html) 실험적인 기능들**에 대해 설명합니다. 프로덕션용 앱에선 React 실험 배포판을 사용하지 마세요. 이러한 기능들은 React의 일부가 되기 전에 아무 예고 없이 상당히 변경될 수 있습니다. +>이 페이지는 안정된 배포판에서 아직 제공되지 않는 실험적인 기능에 대해 설명합니다. 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. > ->이 문서는 얼리 어답터와 궁금해하시는 분을 대상으로 합니다. **React를 처음 쓰신다면 이 기능들에 대해 신경 쓰지 마세요.** 당장 익힐 필요는 없습니다. 예를 들어, 바로 작동하는 데이터 불러오기 튜토리얼을 찾고 있다면, [이 문서](https://www.robinwieruch.de/react-hooks-fetch-data/)를 대신 읽으시기 바랍니다. -======= ->This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. +>많은 정보는 구식이며 보관을 목적으로만 유지되고 있습니다. 최신화된 정보는 [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html)를 참조해주세요. > ->Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html -) for the up-to-date information.** -> ->Before React 18 is released, we will replace this page with stable documentation. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 +>React 18이 배포되기 전에 해당 페이지를 안정된 문서로 대체할 예정입니다. From 6488b07d69ccc382306abb8385bffd681cd3e886 Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:41:35 +0900 Subject: [PATCH 34/38] Resolve merge conflict Related to 12b08e47bf3e6c9204cb35b9b670fd60439b70d0 --- content/docs/addons-test-utils.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 605cbd67b..9f77edf6c 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -19,17 +19,11 @@ var ReactTestUtils = require('react-dom/test-utils'); // npm과 ES5 > 주의 > -<<<<<<< HEAD > Facebook에서는 [React Testing Library](https://testing-library.com/react) 사용을 권장합니다. 이 라이브러리는 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성할 수 있도록 설계되었습니다. > -> 대안으로는 Airbnb에서 출시한 테스팅 도구인 [Enzyme](https://airbnb.io/enzyme/)이 있습니다. Enzyme은 React 컴포넌트의 출력을 쉽게 검증하고 조작하고 탐색할 수 있게 해줍니다. -======= -> We recommend using [React Testing Library](https://testing-library.com/react) which is designed to enable and encourage writing tests that use your components as the end users do. -> -> For React versions <= 16, the [Enzyme](https://airbnb.io/enzyme/) library makes it easy to assert, manipulate, and traverse your React Components' output. +> React v16 이하에서는 [Enzyme](https://airbnb.io/enzyme/)을 통해 React 컴포넌트의 출력을 쉽게 검증하고 조작하고 탐색할 수 있습니다. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 - [`act()`](#act) - [`mockComponent()`](#mockcomponent) From b27d42944866fc9974eb01162c14608b81437d32 Mon Sep 17 00:00:00 2001 From: Taehwan Noh Date: Sat, 26 Jun 2021 22:42:40 +0900 Subject: [PATCH 35/38] Resolve merge confilct Related to ff68780a27f96b0e488437832aa56f88e8349667 --- content/docs/concurrent-mode-reference.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 5e5b1fa6c..fcf27536f 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -61,11 +61,7 @@ Concurrent 모드에 대한 더 자세한 설명이 필요하다면, [Concurrent `Suspense`는 컴포넌트가 렌더링되기 전에 무언가를 "기다릴 수 있도록 하며", 기다리는 동안에 폴백을 보여줍니다. -<<<<<<< HEAD 위 예시에서 `ProfileDetails`는 일부 데이터를 가져 오기 위해 비동기 API 호출을 기다리고 있습니다. `ProfileDetails`와 `ProfilePhoto`를 기다리는 동안에 `Loading...` 폴백을 대신 보여줍니다. ``의 모든 자식이 로드될 때까지 폴백을 계속 표시한다는 점에 주의해주세요. -======= -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. ->>>>>>> f3baa6d075c8de475b688abf035d7054bc8a9606 `Suspense`는 두 개의 props를 사용합니다. * **fallback**은 로딩 표시기를 받아들입니다. 폴백은 `Suspense` 컴포넌트의 모든 자식이 렌더링을 마치기 전까지 표시됩니다. From 591842638d3077f2ec6447bc31ab1f8eefa762ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=84=EC=9A=B0?= <49791336+Choi-Jinwoo@users.noreply.github.com> Date: Sat, 26 Jun 2021 22:50:25 +0900 Subject: [PATCH 36/38] Rewrite: more easy to read and understand (#323) * Rewrite: more easy to read and understand * Fix: ko-jsx description Co-authored-by: Haegul Pyun --- content/docs/introducing-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 630ecd3aa..97374858f 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -20,7 +20,7 @@ JSX는 React "엘리먼트(element)" 를 생성합니다. [다음 섹션](/docs/ ### JSX란? {#why-jsx} -React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다. +React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 *기술*을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 [*관심사*를 분리](https://en.wikipedia.org/wiki/Separation_of_concerns)합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 [이 이야기](https://www.youtube.com/watch?v=x7cQ3mrcKaY)가 확신을 줄 것입니다. From 455f7dd25007947ae2aea9656f475b5224da9a4a Mon Sep 17 00:00:00 2001 From: ABlued <53801395+ABlued@users.noreply.github.com> Date: Sat, 26 Jun 2021 22:56:42 +0900 Subject: [PATCH 37/38] Update typechecking-with-proptypes.md (#325) Co-authored-by: Haegul Pyun --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 358343e0b..97bcfb410 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -88,7 +88,7 @@ MyComponent.propTypes = { fontSize: PropTypes.number }), - // An object with warnings on extra properties + // 추가 프로퍼티에 대한 경고가 있는 객체 optionalObjectWithStrictShape: PropTypes.exact({ name: PropTypes.string, quantity: PropTypes.number From 86dee34668ab9ab1e93380cffa45c872a8646c6d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 26 Jun 2021 22:57:18 +0900 Subject: [PATCH 38/38] Bump color-string from 1.5.3 to 1.5.5 (#326) Bumps [color-string](https://github.com/Qix-/color-string) from 1.5.3 to 1.5.5. - [Release notes](https://github.com/Qix-/color-string/releases) - [Changelog](https://github.com/Qix-/color-string/blob/master/CHANGELOG.md) - [Commits](https://github.com/Qix-/color-string/commits/1.5.5) --- updated-dependencies: - dependency-name: color-string dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 225503126..c50002aae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4299,9 +4299,9 @@ color-name@^1.0.0, color-name@~1.1.4: integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== color-string@^1.5.2: - version "1.5.3" - resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc" - integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw== + version "1.5.5" + resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014" + integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg== dependencies: color-name "^1.0.0" simple-swizzle "^0.2.2"