From 694aeac10e5e44a5ee34cdbe035857fa4cf6b2fc Mon Sep 17 00:00:00 2001 From: Ben Amor Aymen Date: Tue, 26 Aug 2025 15:57:39 +0200 Subject: [PATCH 01/21] Add React Paris 2025 conference talks + Add React Paris 2026 (#7935) Co-authored-by: Aimen Ben Amor --- src/content/community/conferences.md | 68 +++++++++++++++------------- 1 file changed, 37 insertions(+), 31 deletions(-) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index a97f3d5b4..b811b983c 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,36 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### CityJS London 2025 {/*cityjs-london*/} -April 23 - 25, 2025. In-person in London, UK - -[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) - -### App.js Conf 2025 {/*appjs-conf-2025*/} -May 28 - 30, 2025. In-person in Kraków, Poland + remote - -[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) - -### CityJS Athens 2025 {/*cityjs-athens*/} -May 27 - 31, 2025. In-person in Athens, Greece - -[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) - -### React Norway 2025 {/*react-norway-2025*/} -June 13, 2025. In-person in Oslo, Norway + remote (virtual event) - -[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway) - -### React Summit 2025 {/*react-summit-2025*/} -June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) - -[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) - -### React Nexus 2025 {/*react-nexus-2025*/} -July 03 - 05, 2025. In-person in Bangalore, India - -[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in) - ### React Universe Conf 2025 {/*react-universe-conf-2025*/} September 2-4, 2025. Wrocław, Poland. @@ -70,13 +40,49 @@ November 28 & December 1, 2025. In-person in London, UK + online (hybrid event) [Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) +### React Paris 2026 {/*react-paris-2026*/} +March 26 - 27, 2026. In-person in Paris, France (hybrid event) + +[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) + ## Past Conferences {/*past-conferences*/} + +### React Nexus 2025 {/*react-nexus-2025*/} +July 03 - 05, 2025. In-person in Bangalore, India + +[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in) + +### React Summit 2025 {/*react-summit-2025*/} +June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) + +[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) + +### React Norway 2025 {/*react-norway-2025*/} +June 13, 2025. In-person in Oslo, Norway + remote (virtual event) + +[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway) + +### CityJS Athens 2025 {/*cityjs-athens*/} +May 27 - 31, 2025. In-person in Athens, Greece + +[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) + +### App.js Conf 2025 {/*appjs-conf-2025*/} +May 28 - 30, 2025. In-person in Kraków, Poland + remote + +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) + +### CityJS London 2025 {/*cityjs-london*/} +April 23 - 25, 2025. In-person in London, UK + +[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) + ### React Paris 2025 {/*react-paris-2025*/} March 20 - 21, 2025. In-person in Paris, France (hybrid event) -[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) +[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj) ### React Native Connection 2025 {/*react-native-connection-2025*/} April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France. From 90686d80ab815a4d9c6b54794e41b2b4355402d0 Mon Sep 17 00:00:00 2001 From: Aris Markogiannakis Date: Tue, 26 Aug 2025 15:15:07 +0100 Subject: [PATCH 02/21] Add CityJS New Delhi 2026 conference details (#7949) * Add CityJS New Delhi 2026 conference details * Update CityJS New Delhi date to 2025 --- src/content/community/conferences.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index b811b983c..581046a8c 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -30,6 +30,12 @@ October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 [Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) + +### CityJS New Delhi 2025 {/*cityjs-newdelhi*/} +November 6-7, 2025. In-person in New Delhi, India + +[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) + ### React Summit US 2025 {/*react-summit-us-2025*/} November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event) From 9a370f2cf4598d51511db2942fcf8d6e7f1d3007 Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 28 Aug 2025 16:08:37 -0400 Subject: [PATCH 03/21] [compiler] Tweak intro section on manual memo guidance (#7953) The previous sentence "If you are using React Compiler, useMemo, useCallback, and React.memo can be removed." was coming off a bit too strong and makes it incorrectly seem like the manual memos and compiler memos are 1:1. Removing the sentence doesn't take anything away from this paragraph, so let's remove it to reduce confusion. --- src/content/learn/react-compiler/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 440c66ab6..96fdf70db 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -154,7 +154,7 @@ Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https ## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} -If you are using React Compiler, [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo) can be removed. React Compiler adds automatic memoization more precisely and granularly than is possible with these hooks. If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component. +React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component. This is done out of caution as a common anti-pattern with manual memoization is using it for correctness. This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect` call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected. From 94a116476c58897cd0d4745ef8bab6b2621ca38d Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 28 Aug 2025 18:06:22 -0400 Subject: [PATCH 04/21] [compiler][ez] Reference rc tag for install instructions (#7955) Updates our previous RC blogpost to point people to the `rc` tag, not the specific rc version --- src/content/blog/2025/04/21/react-compiler-rc.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md index ecbbb8747..2ebbf3bae 100644 --- a/src/content/blog/2025/04/21/react-compiler-rc.md +++ b/src/content/blog/2025/04/21/react-compiler-rc.md @@ -57,23 +57,23 @@ During the RC period, we encourage all React users to try the compiler and provi As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). ## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} -If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! +If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! To install: npm -{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`npm install --save-dev eslint-plugin-react-hooks@rc`} pnpm -{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`pnpm add --save-dev eslint-plugin-react-hooks@rc`} yarn -{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`yarn add --dev eslint-plugin-react-hooks@rc`} ```js From 19c8201d0a1dc45bae45df7e0b5c9a38dda2df12 Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 28 Aug 2025 18:14:32 -0400 Subject: [PATCH 05/21] [compiler] Update docs on eslint-plugin-react-hooks installation (#7956) The compiler rule is now enabled by default in 6.0.0-rc.2, so there is no longer a need to manually enable the compiler rule in user's eslint configs. --- src/content/learn/react-compiler/installation.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 3606c9c6d..a40b1f5af 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -176,16 +176,7 @@ Install the ESLint plugin: npm install -D eslint-plugin-react-hooks@rc -Then enable the compiler rule in your ESLint configuration: - -```js {3} -// .eslintrc.js -module.exports = { - rules: { - 'react-hooks/react-compiler': 'error', - }, -}; -``` +If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed. The ESLint rule will: - Identify violations of the [Rules of React](/reference/rules) From 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf Mon Sep 17 00:00:00 2001 From: Ricky Date: Fri, 29 Aug 2025 11:00:24 -0400 Subject: [PATCH 06/21] Add reload button, rename reset to clear (#7954) --- next-env.d.ts | 3 ++- src/components/MDX/Sandpack/ClearButton.tsx | 22 +++++++++++++++++++ src/components/MDX/Sandpack/NavigationBar.tsx | 16 ++++++++------ .../{ResetButton.tsx => ReloadButton.tsx} | 13 ++++++----- 4 files changed, 40 insertions(+), 14 deletions(-) create mode 100644 src/components/MDX/Sandpack/ClearButton.tsx rename src/components/MDX/Sandpack/{ResetButton.tsx => ReloadButton.tsx} (53%) diff --git a/next-env.d.ts b/next-env.d.ts index 52e831b43..3cd7048ed 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,5 +1,6 @@ /// /// +/// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/components/MDX/Sandpack/ClearButton.tsx b/src/components/MDX/Sandpack/ClearButton.tsx new file mode 100644 index 000000000..868f9fb66 --- /dev/null +++ b/src/components/MDX/Sandpack/ClearButton.tsx @@ -0,0 +1,22 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; +import {IconClose} from '../../Icon/IconClose'; +export interface ClearButtonProps { + onClear: () => void; +} + +export function ClearButton({onClear}: ClearButtonProps) { + return ( + + ); +} diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index bf2c3186c..d115868dd 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -17,7 +17,8 @@ import { useSandpackNavigation, } from '@codesandbox/sandpack-react/unstyled'; import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; -import {ResetButton} from './ResetButton'; +import {ReloadButton} from './ReloadButton'; +import {ClearButton} from './ClearButton'; import {DownloadButton} from './DownloadButton'; import {IconChevron} from '../../Icon/IconChevron'; import {Listbox} from '@headlessui/react'; @@ -95,7 +96,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // Note: in a real useEvent, onContainerResize would be omitted. }, [isMultiFile, onContainerResize]); - const handleReset = () => { + const handleClear = () => { /** * resetAllFiles must come first, otherwise * the previous content will appear for a second @@ -103,13 +104,13 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { * * Plus, it should only prompt if there's any file changes */ - if ( - sandpack.editorState === 'dirty' && - confirm('Reset all your edits too?') - ) { + if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) { sandpack.resetAllFiles(); } + refresh(); + }; + const handleReload = () => { refresh(); }; @@ -188,7 +189,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { className="px-3 flex items-center justify-end text-start" translate="yes"> - + + {activeFile.endsWith('.tsx') && ( void; +export interface ReloadButtonProps { + onReload: () => void; } -export function ResetButton({onReset}: ResetButtonProps) { +export function ReloadButton({onReload}: ReloadButtonProps) { return ( ); } From dad357153ce514d647896b25d7dbfe267f57f4fe Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:02:59 +0600 Subject: [PATCH 07/21] FIx dead link in renderToPipeableStream --- .../reference/react-dom/server/renderToPipeableStream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 7d0d1ab3d..f705893c2 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -431,7 +431,7 @@ function ProfilePage() { } ``` -If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) +If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) 1. It will emit the loading fallback for the closest `` boundary (`PostsGlimmer`) into the HTML. 2. It will "give up" on trying to render the `Posts` content on the server anymore. From d37ee4a2dcf623fa9d723458eda7f957410c47f0 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:03:16 +0600 Subject: [PATCH 08/21] Fix dead link in renderToReadableStream --- .../reference/react-dom/server/renderToReadableStream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index f407f2245..f4ed54ce2 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -435,7 +435,7 @@ function ProfilePage() { } ``` -If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) +If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) 1. It will emit the loading fallback for the closest `` boundary (`PostsGlimmer`) into the HTML. 2. It will "give up" on trying to render the `Posts` content on the server anymore. From 6b45c3281ed6a0a0f28c40fabc13e81dc00dbcbd Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:03:33 +0600 Subject: [PATCH 09/21] Fix dead link in useLayoutEffect --- src/content/reference/react/useLayoutEffect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index d38458f14..ab4b1e476 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -734,7 +734,7 @@ However, if you're running into this problem, you have a few different options: - Replace `useLayoutEffect` with [`useEffect`.](/reference/react/useEffect) This tells React that it's okay to display the initial render result without blocking the paint (because the original HTML will become visible before your Effect runs). -- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) This tells React to replace its content up to the closest [``](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering. +- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) This tells React to replace its content up to the closest [``](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering. - Alternatively, you can render a component with `useLayoutEffect` only after hydration. Keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? : `. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls. From 595f7294512240b4cc2f49977f083afe40d7850f Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:03:53 +0600 Subject: [PATCH 10/21] Fix dead link in useSyncExternalStore --- src/content/reference/react/useSyncExternalStore.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index ce989a2a4..b15bf1a12 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -361,7 +361,7 @@ The `getServerSnapshot` function is similar to `getSnapshot`, but it runs only i - It runs on the server when generating the HTML. - It runs on the client during [hydration](/reference/react-dom/client/hydrateRoot), i.e. when React takes the server HTML and makes it interactive. -This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) +This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) From 9894a5ee80ab20a16650db3bfc99ad513e760524 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:15:34 +0600 Subject: [PATCH 11/21] Accept updating changes in ReloadButton --- src/components/MDX/Sandpack/ReloadButton.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/MDX/Sandpack/ReloadButton.tsx b/src/components/MDX/Sandpack/ReloadButton.tsx index 5e94e223c..f828a6c2d 100644 --- a/src/components/MDX/Sandpack/ReloadButton.tsx +++ b/src/components/MDX/Sandpack/ReloadButton.tsx @@ -15,12 +15,8 @@ export function ReloadButton({onReload}: ReloadButtonProps) { onClick={onReload} title="Keep your edits and reload sandbox" type="button"> -<<<<<<< HEAD:src/components/MDX/Sandpack/ResetButton.tsx - রিসেট -======= Reload ->>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf:src/components/MDX/Sandpack/ReloadButton.tsx ); } From a41ebfff17fc3fbc5b1310b622cb6d5cee77c3cb Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:16:03 +0600 Subject: [PATCH 12/21] Fix dead link in add-react-to-an-existing-project --- src/content/learn/add-react-to-an-existing-project.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index caa2a189e..3ba5a68aa 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -24,11 +24,7 @@ title: ইতোমধ্যে বানানো প্রজেক্টে R ২. **ফ্রেমওয়ার্কের কনফিগারেশন অংশে `/some-app` _base path_ হিসেবে সেট করুন** (এখানে কিভাবে করবেন তা দেখুনঃ [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/))। ৩. **আপনার সার্ভার বা প্রক্সি কনফিগার করুন** যাতে `/some-app/` এর সমস্ত request আপনার React অ্যাপ দ্বারা হ্যান্ডেল করা হয়। -<<<<<<< HEAD -এটি নিশ্চিত করে যে আপনার অ্যাপের React অংশ [এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) -======= -This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks. ->>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf +এটি নিশ্চিত করে যে আপনার অ্যাপের React অংশ [এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে](/learn/build-a-react-app-from-scratch#consider-using-a-framework) অনেক React ভিত্তিক ফ্রেমওয়ার্ক full-stack এবং আপনার React অ্যাপটিকে সার্ভারের সুবিধা নিতে দেয়। তবে আপনি যদি সার্ভারে জাভাস্ক্রিপ্ট রান করার সুযোগ না পান অথবা না চান, সে ক্ষেত্রেও একই পদক্ষেপটি নিতে পারেন। সে ক্ষেত্রে, `/some-app/` এর পরিবর্তে HTML/CSS/JS এক্সপোর্ট করুন (Next.js এর জন্য [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby এর জন্য ডিফল্ট )। From b98f7520a639e2e655838b8ce6c5fe0906dd9ebe Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:16:26 +0600 Subject: [PATCH 13/21] Fix dead link in synchronizing-with-effects --- src/content/learn/synchronizing-with-effects.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 70dc9ef54..d49befada 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -730,14 +730,9 @@ Effect এ `fetch` কল লেখা [ডেটা ফেচিংয়ের - **মূলত Effect এ সরাসরি ডেটা ফেচ করার মানে এই যে, আপনি ডেটা প্রিলোড বা ক্যাশ করতে পারবেন না।** উদাহরণস্বরূপ, যদি কম্পোনেন্টটি আনমাউন্ট হয় এবং পুনরায় মাউন্ট হয়, এটিকে পুনরায় ডাটা ফেচ করতে হবে। - **এটা খুব একটা ergonomic নয়।** ফেচ কল লেখার সময়, যাতে [রেস কন্ডিশন](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect) এর মতো বাগে suffer করতে না হয়, তার জন্য বেশ ভালো পরিমাণের বয়লারপ্লেট কোড লেখা লাগে। -<<<<<<< HEAD ডাউনসাইডের এই তালিকাটি React জন্য নির্দিষ্ট নয়। এটি যে কোনো লাইব্রেরির মাধ্যমে মাউন্টের সময় ডেটা ফেচের ক্ষেত্রে প্রযোজ্য। রাউটিংয়ের মতো, ডেটা ফেচিং ভালোভাবে করা সহজ নয়, তাই আমরা নিম্নলিখিত পদ্ধতির পরামর্শ দিই: -======= -- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. -- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). ->>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf -- **আপনি যদি একটি [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) ব্যবহার করেন, তার built-in ডেটা ফেচিং প্রক্রিয়া ব্যবহার করুন।** আধুনিক রিয়্যাক্ট ফ্রেমওয়ার্কগুলির মধ্যে integrated ডেটা ফেচিং প্রক্রিয়া রয়েছে যা কার্যকর এবং উপরের সমস্যা গুলো মুক্ত। +- **আপনি যদি একটি [framework](/learn/start-a-new-react-project#full-stack-frameworks) ব্যবহার করেন, তার built-in ডেটা ফেচিং প্রক্রিয়া ব্যবহার করুন।** আধুনিক রিয়্যাক্ট ফ্রেমওয়ার্কগুলির মধ্যে integrated ডেটা ফেচিং প্রক্রিয়া রয়েছে যা কার্যকর এবং উপরের সমস্যা গুলো মুক্ত। - **অন্যথায়, একটি ক্লায়েন্ট-সাইড ক্যাশ ইউজ করুন বা বিল্ড করুন।** জনপ্রিয় ওপেন সোর্স সমাধানের মধ্যে [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), এবং [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) রয়েছে। আপনি একটি নিজস্ব সমাধানো তৈরি করতে পারেন এই ক্ষেত্রে আপনি Effect গুলো আন্ডার দ্যা হুডে ব্যবহার করতে পারেন, তবে request ডিডুপ্লিকেট করাতে, response ক্যাশ করতে, এবং নেটওয়ার্ক ওয়াটারফল এড়াতে লজিক add করুন। (ডাটা প্রিলোডিং করে বা ডাটা requirement গুলো রাউটে hoisting করে)। যদি এই পদক্ষেপগুলোর মধ্যে কোনটিই আপনার জন্য প্রযোজ্য না হয়, তবে সরাসরি Effect-এ ডেটা ফেচিং চালিয়ে যেতে পারেন।" From 7b5edd394a006e45e1bb0677aecebce5172b9cc2 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:16:36 +0600 Subject: [PATCH 14/21] Fix dead link in createRoot --- src/content/reference/react-dom/client/createRoot.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 79a4299b1..74dfaacf0 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -209,11 +209,7 @@ function Counter() {
``` -<<<<<<< HEAD -বিষয়টা খুব ধীর রকম অনুভূত হতে পারে! এটা সমাধানের জন্য, আপনি [বিল্ডের সময় বা সার্ভারে](/reference/react-dom/server) আপনার কম্পোনেন্ট গুলো থেকে প্রাথমিক HTML তৈরি করে ফেলতে পারেন। এর পরে আপনার ভিজিটররা জাভাস্ক্রিপ্ট লোড হবার আগেই টেক্সট পড়তে, ছবি দেখতে এবং লিঙ্ক ক্লিক করতে পারবে। আমাদের উপদেশ থাকবে যে আপনি এর জন্য একটা [ফ্রেমওয়ার্ক ব্যবহার করুন](/learn/start-a-new-react-project#production-grade-react-frameworks) যা নিজেই এই অপটিমাইজেশনটুকু করে দেবে। কখন এটা রান করছে তার উপর নির্ভর করে একে বলা হয়, *server-side rendering (SSR)* অথবা *static site generation (SSG)।* -======= -This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* ->>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf +বিষয়টা খুব ধীর রকম অনুভূত হতে পারে! এটা সমাধানের জন্য, আপনি [বিল্ডের সময় বা সার্ভারে](/reference/react-dom/server) আপনার কম্পোনেন্ট গুলো থেকে প্রাথমিক HTML তৈরি করে ফেলতে পারেন। এর পরে আপনার ভিজিটররা জাভাস্ক্রিপ্ট লোড হবার আগেই টেক্সট পড়তে, ছবি দেখতে এবং লিঙ্ক ক্লিক করতে পারবে। আমাদের উপদেশ থাকবে যে আপনি এর জন্য একটা [ফ্রেমওয়ার্ক ব্যবহার করুন](/learn/start-a-new-react-project#full-stack-frameworks) যা নিজেই এই অপটিমাইজেশনটুকু করে দেবে। কখন এটা রান করছে তার উপর নির্ভর করে একে বলা হয়, *server-side rendering (SSR)* অথবা *static site generation (SSG)।* From 6ddc59f9a21d7c7b7d6d144ab790bc2221caf6e8 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:16:54 +0600 Subject: [PATCH 15/21] Fix dead link in react-dom/client/index --- src/content/reference/react-dom/client/index.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md index c79e2aad0..78871c526 100644 --- a/src/content/reference/react-dom/client/index.md +++ b/src/content/reference/react-dom/client/index.md @@ -4,11 +4,7 @@ title: ক্লায়েন্ট React DOM API -<<<<<<< HEAD -`react-dom/client` API গুলো ক্লায়েন্টে (ব্রাউজারের মধ্যে) React কম্পোনেন্ট রেন্ডার করতে দেয়। এই API গুলো সাধারণত আপনার অ্যাপের একদম উপরের স্তরে React ট্রি ইনিশিয়ালাইজ করার কাজে ব্যবহৃত হয়। আপনার জন্য কল দিয়ে দিতে পারে একটি [framework](/learn/start-a-new-react-project#production-grade-react-frameworks)। আপনার বেশিরভাগ কম্পোনেন্টের সেগুলো ইমপোর্ট বা ব্যবহারের প্রয়োজন পড়বে না। -======= -The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. ->>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf +`react-dom/client` API গুলো ক্লায়েন্টে (ব্রাউজারের মধ্যে) React কম্পোনেন্ট রেন্ডার করতে দেয়। এই API গুলো সাধারণত আপনার অ্যাপের একদম উপরের স্তরে React ট্রি ইনিশিয়ালাইজ করার কাজে ব্যবহৃত হয়। আপনার জন্য কল দিয়ে দিতে পারে একটি [framework](/learn/start-a-new-react-project#full-stack-frameworks)। আপনার বেশিরভাগ কম্পোনেন্টের সেগুলো ইমপোর্ট বা ব্যবহারের প্রয়োজন পড়বে না। From 04340800bb3e34217a3bd1321e43b35afd44bf15 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Fri, 5 Sep 2025 13:17:15 +0600 Subject: [PATCH 16/21] Fix dead link in react-dom/components/option --- src/content/reference/react-dom/components/option.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md index 557375ae1..8733e036f 100644 --- a/src/content/reference/react-dom/components/option.md +++ b/src/content/reference/react-dom/components/option.md @@ -36,11 +36,7 @@ title: "