From 91e7f697d8087d6d1d0e086785406ab8a8238bdb Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Mon, 25 Sep 2023 18:08:59 +0300 Subject: [PATCH 01/10] Update tutorial error message to use ConsoleBlock --- src/content/learn/tutorial-tic-tac-toe.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 7c5adb11..eca388a8 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -2073,7 +2073,13 @@ export default function Game() { } ``` -You can see what your code should look like below. Note that you should see an error in the developer tools console that says: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` You'll fix this error in the next section. +You can see what your code should look like below. Note that you should see an error in the developer tools console that says: + + +Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`. + + +You'll fix this error in the next section. From 4df3e7cf189d7fe649d1994e3c05f7f3b3c7df15 Mon Sep 17 00:00:00 2001 From: Luna Date: Mon, 25 Sep 2023 19:53:26 -0700 Subject: [PATCH 02/10] Remove pitfall and update Next link (#6318) * Remove pitfall and update Next link * Fix other beta link --------- Co-authored-by: Luna Wei --- src/content/learn/start-a-new-react-project.md | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 280a1378..d0933bcc 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -89,14 +89,9 @@ These features are getting closer to being production-ready every day, and we've ### Next.js (App Router) {/*nextjs-app-router*/} -**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. +**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://beta.nextjs.org/docs/configuring/static-export) which doesn't require a server. - - -Next.js's App Router is **currently in beta and is not yet recommended for production** (as of Mar 2023). To experiment with it in an existing Next.js project, [follow this incremental migration guide](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). - - +Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server. From 62b9b4519bcf24e5c2c87cf51b1ce8f8105bdcc5 Mon Sep 17 00:00:00 2001 From: JustLolo <103621114+JustLolo@users.noreply.github.com> Date: Mon, 25 Sep 2023 22:34:02 -0500 Subject: [PATCH 03/10] Main (#5963) From 2dbd19531f5031e81a67eba532203c9abedc054a Mon Sep 17 00:00:00 2001 From: jajima <119467077+jajimajp@users.noreply.github.com> Date: Tue, 26 Sep 2023 12:56:16 +0900 Subject: [PATCH 04/10] Fix an incorrect person's name (#6066) --- src/content/learn/rendering-lists.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 45b60240..13ac932f 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -1086,7 +1086,7 @@ Here, `` is a syntax shortcut saying "pass #### List with a separator {/*list-with-a-separator*/} -This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `

` tag. Your job is to insert an `

` separator between each paragraph. Your resulting structure should look like this: +This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `

` tag. Your job is to insert an `

` separator between each paragraph. Your resulting structure should look like this: ```js
From 01c31630f9522c0d023e897168a48c5b0a394931 Mon Sep 17 00:00:00 2001 From: Matan Borenkraout Date: Tue, 26 Sep 2023 07:10:41 +0300 Subject: [PATCH 05/10] fix: wrong parameter name defined in explanation (#6158) --- src/content/reference/react/Profiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 8e149634..502ab0d4 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -58,7 +58,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime * `actualDuration`: The number of milliseconds spent rendering the `` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change. * `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working. * `startTime`: A numeric timestamp for when React began rendering the current update. -* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable. +* `commitTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable. --- From 8afb1ef5fcfaa1017542fb2b223de3edfdb82462 Mon Sep 17 00:00:00 2001 From: Krzysztof Piaskowy Date: Tue, 26 Sep 2023 20:00:24 +0200 Subject: [PATCH 06/10] Add info about App.js 2024 conference (#6192) Co-authored-by: Luna --- src/content/community/conferences.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 6e1780a7..1c164a09 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -55,7 +55,6 @@ October 27th 2023. In-person in Verona, Italy and online (hybrid event) [Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) - ### React Summit US 2023 {/*react-summit-us-2023*/} November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event) @@ -66,6 +65,11 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023) +### App.js Conf 2024 {/*appjs-conf-2024*/} +May 22 - 24, 2024. In-person in Kraków, Poland + remote + +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) + ### Render(ATL) 2024 🍑 {/*renderatl-2024-*/} June 12 - June 14, 2024. Atlanta, GA, USA From 850327d056ee2ea84d48262f103de6293d7d4809 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Wed, 27 Sep 2023 21:55:16 -0500 Subject: [PATCH 07/10] Update "Start a new React project" for stable Next.js App Router (#6020) --- src/content/learn/start-a-new-react-project.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index d0933bcc..9c395d3f 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -21,12 +21,12 @@ If you want to build a new app or a new website fully with React, we recommend p **[Next.js](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal: -npx create-next-app +npx create-next-app@latest If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs) -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. [Fully static Next.js apps](https://nextjs.org/docs/advanced-features/static-html-export) can be deployed to any static hosting. +Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server. ### Remix {/*remix*/} @@ -91,7 +91,7 @@ These features are getting closer to being production-ready every day, and we've **[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server. +Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server. From d4c214ad105548168b175a4e448e7411562d2f34 Mon Sep 17 00:00:00 2001 From: Sourabh singh <96938361+SouSingh@users.noreply.github.com> Date: Thu, 28 Sep 2023 17:23:39 +0530 Subject: [PATCH 08/10] Update Page not found to React18 URL (#6320) * Update react-labs-what-we-have-been-working-on-june-2022.md * Update react-labs-what-we-have-been-working-on-june-2022.md --- .../06/15/react-labs-what-we-have-been-working-on-june-2022.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 0d9e8e26..938b75c4 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -8,7 +8,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http -[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring. +[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring. From 1dfc88fe46b2ca169083377f0f716d8e7951af81 Mon Sep 17 00:00:00 2001 From: Alain Kaiser Date: Sun, 1 Oct 2023 11:25:16 +0200 Subject: [PATCH 09/10] fix: typo in useMemo example (#6330) --- src/content/reference/react/useMemo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 543c1112..c96c1a94 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -647,7 +647,7 @@ In this example, the `List` component is **artificially slowed down** so that yo Switching the tabs feels slow because it forces the slowed down `List` to re-render. That's expected because the `tab` has changed, and so you need to reflect the user's new choice on the screen. -Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleItems` array has not changed since the last render. The `visibleItems` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render. +Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render. From 68f417a600c7d7b8c4131e39f8a843a856ae3909 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 1 Oct 2023 12:16:27 +0200 Subject: [PATCH 10/10] Explain how `null` ends up in `ref.current` for React-managed refs (#5836) * Update referencing-values-with-refs.md * Update src/content/learn/referencing-values-with-refs.md --- src/content/learn/referencing-values-with-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index da5d864a..4faf1878 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -284,7 +284,7 @@ You also don't need to worry about [avoiding mutation](/learn/updating-objects-i ## Refs and the DOM {/*refs-and-the-dom*/} -You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) +You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)