Skip to content

Commit efcbedc

Browse files
Merge branch 'main' into sync-27d86ffe
2 parents 7e693c0 + af526d9 commit efcbedc

24 files changed

+38
-75
lines changed

src/content/blog/2023/03/16/introducing-react-dev.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ When we released React Hooks in 2018, the Hooks docs assumed the reader is famil
4242
**The new docs teach React with Hooks from the beginning.** The docs are divided in two main sections:
4343

4444
* **[Learn React](/learn)** is a self-paced course that teaches React from scratch.
45-
* **[API Reference](/reference)** provides the details and usage examples for every React API.
45+
* **[API Reference](/reference/react)** provides the details and usage examples for every React API.
4646

4747
Let's have a closer look at what you can find in each section.
4848

@@ -607,7 +607,7 @@ button { display: block; margin-top: 10px; }
607607

608608
</Recipes>
609609

610-
Some API pages also include [Troubleshooting](/reference/react/useEffect#troubleshooting) (for common problems) and [Alternatives](/reference/react-dom/findDOMNode#alternatives) (for deprecated APIs).
610+
Some API pages also include [Troubleshooting](/reference/react/useEffect#troubleshooting) (for common problems) and [Alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives) (for deprecated APIs).
611611

612612
We hope that this approach will make the API reference useful not only as a way to look up an argument, but as a way to see all the different things you can do with any given API—and how it connects to the other ones.
613613

src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ The biggest change is that we introduced [`async` / `await`](https://github.com/
3131

3232
Now that we have data fetching pretty well sorted, we're exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We're doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads.
3333

34-
React Server Components has shipped in [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks.
34+
React Server Components has shipped in [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks.
3535

3636
We generally recommend using an existing framework, but if you need to build your own custom framework, it is possible. Building your own RSC-compatible framework is not as easy as we'd like it to be, mainly due to the deep bundler integration needed. The current generation of bundlers are great for use on the client, but they weren't designed with first-class support for splitting a single module graph between the server and the client. This is why we're now partnering directly with bundler developers to get the primitives for RSC built-in.
3737

@@ -92,7 +92,7 @@ Since our last update, we've tested an experimental version of prerendering inte
9292

9393
## Transition Tracing {/*transition-tracing*/}
9494

95-
The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router).
95+
The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router).
9696

9797
* * *
9898
In addition to this update, our team has made recent guest appearances on community podcasts and livestreams to speak more on our work and answer questions.

src/content/blog/2024/04/25/react-19-upgrade-guide.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ For a list of all available codemods, see the [`react-codemod` repo](https://git
129129

130130
In previous versions of React, errors thrown during render were caught and rethrown. In DEV, we would also log to `console.error`, resulting in duplicate error logs.
131131

132-
In React 19, we've [improved how errors are handled](/blog/2024/04/25/react-19#error-handling) to reduce duplication by not re-throwing:
132+
In React 19, we've [improved how errors are handled](/blog/2024/12/05/react-19#error-handling) to reduce duplication by not re-throwing:
133133

134134
- **Uncaught Errors**: Errors that are not caught by an Error Boundary are reported to `window.reportError`.
135135
- **Caught Errors**: Errors that are caught by an Error Boundary are reported to `console.error`.
@@ -499,7 +499,7 @@ function AutoselectingInput() {
499499

500500
### Deprecated: `element.ref` {/*deprecated-element-ref*/}
501501

502-
React 19 supports [`ref` as a prop](/blog/2024/04/25/react-19#ref-as-a-prop), so we're deprecating the `element.ref` in place of `element.props.ref`.
502+
React 19 supports [`ref` as a prop](/blog/2024/12/05/react-19#ref-as-a-prop), so we're deprecating the `element.ref` in place of `element.props.ref`.
503503

504504
Accessing `element.ref` will warn:
505505

src/content/blog/2024/12/05/react-19.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ For more information, see [React DOM Static APIs](/reference/react-dom/static).
355355

356356
Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
357357

358-
React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
358+
React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
359359

360360

361361
<Note>
@@ -389,7 +389,7 @@ For more info, see the docs for [Directives](/reference/rsc/directives).
389389

390390
Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
391391

392-
For more, see the docs for [React Server Actions](/reference/rsc/server-actions).
392+
For more, see the docs for [React Server Actions](/reference/rsc/server-functions).
393393

394394
## Improvements in React 19 {/*improvements-in-react-19*/}
395395

src/content/learn/add-react-to-an-existing-project.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ title: किसी मौजूदा प्रोजेक्ट में Rea
2121
यहां बताया गया है कि हम इसे कैसे सेट करने की सलाह देते हैं:
2222

2323
1. **अपने ऐप के React भाग का निर्माण करें** इनमें से एक का उपयोग करके [React-based frameworks](/learn/start-a-new-react-project)
24-
2. **निर्दिष्ट करना `/some-app` अपने फ्रेमवर्क के कॉन्फ़िगरेशन में *बेस पथ*** के रूप में (यहां कैसे है: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/))।
24+
2. **निर्दिष्ट करना `/some-app` अपने फ्रेमवर्क के कॉन्फ़िगरेशन में *बेस पथ*** के रूप में (यहां कैसे है: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/))।
2525
3. **अपने सर्वर या एक प्रॉक्सी सर्वर को कॉन्फ़िगर करें**ताकि सभी अनुरोधों को `/some-app/` आपके React ऐप द्वारा नियंत्रित किया जाए।
2626

27-
यह सुनिश्चित करता है कि आपके ऐप का React हिस्सा हो सकता है[सर्वोत्तम प्रथाओं से लाभ](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) उन फ्रेमवर्क में पका हुआ।
27+
यह सुनिश्चित करता है कि आपके ऐप का React हिस्सा हो सकता है [सर्वोत्तम प्रथाओं से लाभ](/learn/creating-a-react-app#full-stack-frameworks) उन फ्रेमवर्क में पका हुआ।
2828

2929
<<<<<<< HEAD
3030
कई React-आधारित फ्रेमवर्क full-stack हैं और आपके React ऐप को सर्वर का लाभ उठाते हैं।हालाँकि, आप उसी दृष्टिकोण का उपयोग कर सकते हैं, भले ही आप सर्वर पर जावास्क्रिप्ट नहीं चलाना चाहते हैं या नहीं चाहते हैं।उस स्थिति में, HTML/CSS/JS निर्यात परोसें([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) Next.js के लिए, GATSBY के लिए डिफ़ॉल्ट) इसके `/some-app/` बजाय।
@@ -153,7 +153,7 @@ root.render(<NavigationBar />);
153153

154154
ध्यान दें कि `index.html` से मूल HTML सामग्री कैसे संरक्षित है, लेकिन आपका अपना` नेविगेशनबार` React घटक अब आपके HTML से `<nav id =" नेविगेशन ">` के अंदर दिखाई देता है।मौजूदा HTML पृष्ठ के अंदर React घटकों को प्रस्तुत करने के बारे में अधिक जानने के लिए [`createroot` उपयोग दस्तावेज़](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) पढ़ें।
155155

156-
जब आप किसी मौजूदा प्रोजेक्ट में React को अपनाते हैं, तो छोटे इंटरैक्टिव घटकों (जैसे बटन) के साथ शुरू करना आम है, और फिर धीरे -धीरे "ऊपर की ओर बढ़ते" रहें जब तक कि आपका पूरा पेज React के साथ नहीं बन जाता।यदि आप कभी भी उस बिंदु तक पहुँचते हैं, तो हम React से बाहर निकलने के बाद [एक रिएक्ट फ्रेमवर्क](/learn/start-a-new-react-project) पर माइग्रेट करने की सलाह देते हैं।
156+
जब आप किसी मौजूदा प्रोजेक्ट में React को अपनाते हैं, तो छोटे इंटरैक्टिव घटकों (जैसे बटन) के साथ शुरू करना आम है, और फिर धीरे -धीरे "ऊपर की ओर बढ़ते" रहें जब तक कि आपका पूरा पेज React के साथ नहीं बन जाता।यदि आप कभी भी उस बिंदु तक पहुँचते हैं, तो हम React से बाहर निकलने के बाद [एक रिएक्ट फ्रेमवर्क](/learn/creating-a-react-app) पर माइग्रेट करने की सलाह देते हैं।
157157

158158
## एक मौजूदा native मोबाइल ऐप में React native का उपयोग करना {/*using-react-native-in-an-existing-native-mobile-app*/}
159159

src/content/learn/choosing-the-state-structure.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -812,7 +812,7 @@ export const initialTravelPlan = {
812812
813813
</Sandpack>
814814
815-
अब मान लें कि आप किसी ऐसे स्थान को हटाने के लिए एक बटन ऐड करना चाहते हैं, जहां आप पहले जा चुके हैं। आप इसे कैसे करेंगे? [नेस्टेड state को अपडेट करने](/learn/updating-objects-and-arrays-in-state#updating-nested-objects-and-arrays) में बदले गए हिस्से से ऊपर तक ऑब्जेक्ट की कॉपी बनाना शामिल है। किसी गहरे नेस्टेड स्थान को हटाने से उसकी संपूर्ण पैरेंट प्लेस चैन की कॉपी बनाना शामिल होगा। ऐसा कोड बहुत वर्बोज़ हो सकता है।
815+
अब मान लें कि आप किसी ऐसे स्थान को हटाने के लिए एक बटन ऐड करना चाहते हैं, जहां आप पहले जा चुके हैं। आप इसे कैसे करेंगे? [नेस्टेड state को अपडेट करने](/learn/updating-objects-in-state#updating-a-nested-object) में बदले गए हिस्से से ऊपर तक ऑब्जेक्ट की कॉपी बनाना शामिल है। किसी गहरे नेस्टेड स्थान को हटाने से उसकी संपूर्ण पैरेंट प्लेस चैन की कॉपी बनाना शामिल होगा। ऐसा कोड बहुत वर्बोज़ हो सकता है।
816816
817817
**यदि state आसानी से अपडेट करने के लिए ज़्यादा नेस्टेड है, तो इसे "फ्लैट" बनाने पर विचार करें।** यहाँ एक तरीका है जिससे आप इस डेटा को रीस्ट्रक्चर कर सकते हैं। एक ट्री जैसे स्ट्रक्चर के बजाय जहां प्रत्येक `place` में *child places* की एक array होता है, आपके पास प्रत्येक स्थान में *child place IDs* की एक array को रख सकते हैं। फिर आप प्रत्येक place ID से संबंधित स्थान पर मैपिंग स्टोर कर सकते हैं।
818818

src/content/learn/extracting-state-logic-into-a-reducer.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -897,7 +897,7 @@ li {
897897

898898
## इमर के साथ संक्षिप्त रिड्यूसर लिखना {/*writing-concise-reducers-with-immer*/}
899899

900-
ठीक वैसे ही जैसे [ऑब्जेक्ट्स को अपडेट करना](/सीखना/अपडेट करना-ऑब्जेक्ट्स-इन-स्टेट#लिखना-संक्षिप्त-अपडेट-लॉजिक-विथ-इमर) और [array]( /सीखना/अपडेट करना-सरणी-इन-स्टेट#लिखना-संक्षिप्त) -update-logic-with-immer) नियमित स्थिति में, आप रिड्यूसर को अधिक संक्षिप्त बनाने के लिए Immer लाइब्रेरी का उपयोग कर सकते हैं। यहां, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer) आपको `push` या `arr[i] =` असाइनमेंट के साथ स्थिति को बदलने की सुविधा देता है:
900+
ठीक वैसे ही जैसे [ऑब्जेक्ट्स को अपडेट करना](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) और [arrays](/learn/updating-arrays-in-state#write-concise-update-logic-with-immer) नियमित स्थिति में, आप रिड्यूसर को अधिक संक्षिप्त बनाने के लिए Immer लाइब्रेरी का उपयोग कर सकते हैं। यहां, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer) आपको `push` या `arr[i] =` असाइनमेंट के साथ स्थिति को बदलने की सुविधा देता है:
901901

902902
<Sandpack>
903903

0 commit comments

Comments
 (0)