From 91e7f697d8087d6d1d0e086785406ab8a8238bdb Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Mon, 25 Sep 2023 18:08:59 +0300 Subject: [PATCH 01/18] 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 7c5adb118..eca388a88 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/18] 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 280a1378e..d0933bccf 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/18] 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/18] 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 45b60240b..13ac932fb 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/18] 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 8e149634a..502ab0d48 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/18] 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 6e1780a7d..1c164a098 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/18] 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 d0933bccf..9c395d3f0 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/18] 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 0d9e8e260..938b75c4b 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/18] 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 543c11125..c96c1a942 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/18] 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 da5d864ab..4faf18786 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) From d7a26fb3a4d59c0811071485c327921e9d3ae0e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Tue, 3 Oct 2023 12:28:06 -0300 Subject: [PATCH 11/18] Update react-labs-what-we-have-been-working-on-june-2022.md --- .../15/react-labs-what-we-have-been-working-on-june-2022.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) 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 03c8eef34..cb18a189f 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,11 +8,7 @@ title: "React Labs: En qué hemos estado trabajando – junio 2022" -<<<<<<< HEAD -[React 18](https://reactjs.org/blog/2022/03/29/react-v18) estuvo por años en desarrollo y con él llegaron lecciones valiosas para el equipo de React. Su lanzamiento fue el resultado de muchos años de investigación y exploración de diversos caminos. Algunos de esos caminos fueron exitosos; muchos otros fueron callejones sin salida que nos llevaron a nuevas ideas. Una lección que hemos aprendido es que resulta frustrante para la comunidad esperar nuevas funcionalidades sin tener información sobre las rutas que estamos explorando. -======= -[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. ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +[React 18](https://es.react.dev/blog/2022/03/29/react-v18) estuvo por años en desarrollo, y con él llegaron lecciones valiosas para el equipo de React. Su lanzamiento fue el resultado de muchos años de investigación y exploración de diversos caminos. Algunos de esos caminos fueron exitosos; muchos otros fueron callejones sin salida que nos llevaron a nuevas ideas. Una lección que hemos aprendido es que resulta frustrante para la comunidad esperar nuevas funcionalidades sin tener información sobre las rutas que estamos explorando. From 3b654dcd4f67c4b79fca35392e068f34a816b2ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Tue, 3 Oct 2023 12:41:04 -0300 Subject: [PATCH 12/18] Update referencing-values-with-refs.md --- src/content/learn/referencing-values-with-refs.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 895b6c824..1c693b394 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -284,11 +284,7 @@ Tampoco tienes que preocuparte por [evitar la mutación](/learn/updating-objects ## Las refs y el DOM {/*refs-and-the-dom*/} -<<<<<<< HEAD -Puedes apuntar una ref hacia cualquier valor. Sin embargo, el caso de uso más común para una ref es acceder a un elemento del DOM. Por ejemplo, esto es útil cuando quieres enfocar un input programáticamente. Cuando pasas una ref a un atributo `ref` en JSX, así `
`, React colocará el elemento del DOM correspondiente en `myRef.current`. Puedes leer más sobre esto en [Manipular el DOM con 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) ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +Puedes apuntar una ref a cualquier valor. Sin embargo, el uso más común para una ref es acceder a un elemento DOM. Por ejemplo, esto es útil si deseas enfocar un input programáticamente. Cuando pasas una ref a un atributo `ref` en JSX, como `
`, React pondrá el elemento DOM correspondiente en `myRef.current`. Una vez que el elemento es eliminado del DOM, React actualizará `myRef.current` a `null`. Puedes leer más sobre esto en [Manipular el DOM con Refs.](/learn/manipulating-the-dom-with-refs) From eeddd7239cc9cc2b28e66c485bf80e1877764b24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Tue, 3 Oct 2023 12:52:50 -0300 Subject: [PATCH 13/18] Update rendering-lists.md --- src/content/learn/rendering-lists.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index fa3765664..9aad548cb 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -1086,11 +1086,7 @@ Aquí, `` es un atajo de sintaxis diciendo #### Lista con un separador {/*list-with-a-separator*/} -<<<<<<< HEAD -Este ejemplo renderiza un haiku famoso escrito por Katsushika Hokusai, con cada línea envuelta en una etiqueta `

`. Tu trabajo es insertar un separador `

` entre cada párrafo. Tu estructura final debería verse algo como esto: -======= -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: ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +Este ejemplo renderiza un famoso haiku de Tachibana Hokushi, con cada línea envuelta en una etiqueta `

`. Tu trabajo consiste en insertar un separador `

` entre cada párrafo. La estructura resultante debería verse así: ```js
From a3f0f20ada07bf27e484e6dcc968d7bf202a747d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Tue, 3 Oct 2023 13:05:01 -0300 Subject: [PATCH 14/18] Update start-a-new-react-project.md --- src/content/learn/start-a-new-react-project.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index f83e7a730..8e1d65a7e 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -26,11 +26,7 @@ npx create-next-app@latest Si eres nuevo en Next.js, mira el [tutorial de Next.js.](https://nextjs.org/learn/foundations/about-nextjs) -<<<<<<< HEAD -Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/deployment) en cualquier alojamiento Node.js, sin servidor, o en tu propio servidor. [Las aplicaciones Next.js estáticas](https://nextjs.org/docs/advanced-features/static-html-export) se pueden implementar en cualquier alojamiento estático. -======= -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. ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/app/building-your-application/deploying) en cualquier alojamiento Node.js o sin servidor, o en tu propio servidor. Next.js también admite una [exportación estática](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) que no requiere un servidor. ### Remix {/*remix*/} From 5f929b2738e8bb85a38255a537938072fca8db72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Tue, 3 Oct 2023 14:01:18 -0300 Subject: [PATCH 15/18] Update start-a-new-react-project.md --- src/content/learn/start-a-new-react-project.md | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 8e1d65a7e..619c4aa1f 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -89,20 +89,9 @@ Estas funcionalidades están cada día más cerca de estar listas para producci ### Next.js (App Router) {/*nextjs-app-router*/} -<<<<<<< HEAD -**[El App Router de Next.js](https://beta.nextjs.org/docs/getting-started) es un rediseño de las API de Next.js con el objetivo de cumplir con la visión de arquitectura de pila completa (_full-stack_) del equipo de React.** Te permite obtener datos en componentes asíncronos que se ejecutan en el servidor o incluso durante la compilación. +**[El App Router de Next.js](https://nextjs.org/docs) es un rediseño de las API de Next.js con el objetivo de cumplir con la visión de arquitectura de pila completa (_full-stack_) del equipo de React.** Te permite obtener datos en componentes asíncronos que se ejecutan en el servidor o incluso durante la compilación. -Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/deployment) en cualquier alojamiento Node.js, sin servidor, o en tu propio servidor. Next.js también permite [exportar archivos estáticos](https://beta.nextjs.org/docs/configuring/static-export) que no requiere un servidor. - - -El App Router de Next.js está **actualmente en versión beta y aún no se recomienda para producción** (a partir de marzo de 2023). Para experimentar con él en un proyecto Next.js existente, [sigue esta guía de migración incremental](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). - - -======= -**[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/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. ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/app/building-your-application/deploying) en cualquier alojamiento Node.js o sin servidor, o en tu propio servidor. Next.js también admite una [exportación estática](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) que no requiere un servidor. From fca38af1782bb70b66154559f88a20e430740fda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Tue, 3 Oct 2023 14:14:16 -0300 Subject: [PATCH 16/18] Update tutorial-tic-tac-toe.md --- src/content/learn/tutorial-tic-tac-toe.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 2a9600535..66e5d0d99 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -2077,17 +2077,13 @@ export default function Game() { } ``` -<<<<<<< HEAD -Puedes ver cómo debería verse tu código a continuación. Ten en cuenta que deberías ver un error en la consola de herramientas para desarrolladores que dice: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` Resolverás este error en la siguiente sección. -======= -You can see what your code should look like below. Note that you should see an error in the developer tools console that says: +Puedes ver cómo debería verse tu código a continuación. Ten en cuenta que deberías ver un error en la consola de herramientas para desarrolladores que dice: 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. ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +Resolverás este error en la siguiente sección. From 3eb747f77608cfd0a635ec644dc2f97275ed7f65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Tue, 3 Oct 2023 14:27:21 -0300 Subject: [PATCH 17/18] Update Profiler.md --- src/content/reference/react/Profiler.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 8f91249b9..06ea3284b 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -53,21 +53,12 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Parámetros {/*onrender-parameters*/} -<<<<<<< HEAD * `id`: La prop `id` del árbol `` que acaba de ser entregado. Esto te permite identificar qué parte del árbol se entregó si estás usando varios perfiles. * `phase`: `"mount"`, `"update"` o `"nested-update"`. Esto te indica si el árbol acaba de ser montado por primera vez o se ha vuelto a renderizar debido a un cambio en las props, el estado o los hooks. * `actualDuration`: El número de milisegundos que se tardó en renderizar el árbol `` Esto indica qué tan bien el subárbol hace uso de la memoización (por ejemplo, [`memo`](/reference/react/memo) y [`useMemo`](/reference/react/useMemo)). Idealmente, este valor debería disminuir significativamente después del montaje inicial, ya que muchos de los descendientes solo necesitarán volver a renderizarse si cambian sus propiedades específicas. * `baseDuration`: El número de milisegundos que estima cuánto tiempo tardaría en volver a renderizar todo el subárbol `` sin ninguna optimización. Se calcula sumando las duraciones de renderizado más recientes de cada componente en el árbol. Este valor estima el costo del renderizado para el peor de caso (por ejemplo, el montaje inicial o un árbol sin memoización). Compara `actualDuration` con este valor para ver si la memorización está funcionando. * `startTime`: Una marca de tiempo numérica para cuando React comenzó a renderizar la actualización actual. -* `endTime`: Una marca de tiempo numérica para cuando React entregó la actualización actual. Este valor se comparte entre todos los perfiles en una entrega, lo que permite agruparlos si es deseable. -======= -* `id`: The string `id` prop of the `` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers. -* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks. -* `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. -* `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. ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +* `commitTime`: Una marca de tiempo numérica para cuando React entregó la actualización actual. Este valor se comparte entre todos los perfiles en una entrega, lo que permite agruparlos si es deseable. --- From 8a1ed01117cd94a848495cefea4124665f85791f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Tue, 3 Oct 2023 14:29:57 -0300 Subject: [PATCH 18/18] Update useMemo.md --- src/content/reference/react/useMemo.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 55f410f80..4c6b596d8 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -647,11 +647,7 @@ En este ejemplo, el componente `List` se **ralentiza artificialmente** para que Cambiar las pestañas se siente lento porque obliga a que `List` se rerenderice. Eso es de esperar porque `tab` ha cambiado, y necesitas reflejar la nueva elección del usuario en la pantalla. -<<<<<<< HEAD -A continuación, intenta alternar el tema. **¡Gracias a `useMemo` junto con [`memo`](/reference/react/memo), es rápido a pesar de la ralentización artificial!** El componente `List` omitió rerenderizar porque el *array* `visibleItems` no ha cambiado desde el último renderizado. El *array* `visibleItems` no ha cambiado porque tanto `todos` como `tab` (que pasas como dependencias a `useMemo`) no han cambiado desde el último renderizado. -======= -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. ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +A continuación, intenta alternar el tema. **¡Gracias a `useMemo` junto con [`memo`](/reference/react/memo), es rápido a pesar de la ralentización artificial!** El componente `List` omitió rerenderizar porque el *array* `visibleTodos` no ha cambiado desde el último renderizado. El *array* `visibleTodos` no ha cambiado porque tanto `todos` como `tab` (que pasas como dependencias a `useMemo`) no han cambiado desde el último renderizado.