Skip to content

Commit 980e538

Browse files
nafistihamnafistiham
authored
Merge pull request #201 from reactjs/sync-2774ddfa
Sync with react.dev @ 2774ddf
2 parents 79b259a + fce4fe3 commit 980e538

File tree

9 files changed

+100
-71
lines changed

9 files changed

+100
-71
lines changed

‎next-env.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3+
/// <reference types="next/navigation-types/compat/navigation" />
34

45
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
6+
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

‎src/components/MDX/Sandpack/ClearButton.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*/
4+
5+
import * as React from 'react';
6+
import {IconClose} from '../../Icon/IconClose';
7+
export interface ClearButtonProps {
8+
onClear: () => void;
9+
}
10+
11+
export function ClearButton({onClear}: ClearButtonProps) {
12+
return (
13+
<button
14+
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
15+
onClick={onClear}
16+
title="Clear all edits and reload sandbox"
17+
type="button">
18+
<IconClose className="inline mx-1 relative" />
19+
<span className="hidden md:block">Clear</span>
20+
</button>
21+
);
22+
}

‎src/components/MDX/Sandpack/NavigationBar.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import {
1717
useSandpackNavigation,
1818
} from '@codesandbox/sandpack-react/unstyled';
1919
import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
20-
import {ResetButton} from './ResetButton';
20+
import {ReloadButton} from './ReloadButton';
21+
import {ClearButton} from './ClearButton';
2122
import {DownloadButton} from './DownloadButton';
2223
import {IconChevron} from '../../Icon/IconChevron';
2324
import {Listbox} from '@headlessui/react';
@@ -95,21 +96,21 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
9596
// Note: in a real useEvent, onContainerResize would be omitted.
9697
}, [isMultiFile, onContainerResize]);
9798

98-
const handleReset = () => {
99+
const handleClear = () => {
99100
/**
100101
* resetAllFiles must come first, otherwise
101102
* the previous content will appear for a second
102103
* when the iframe loads.
103104
*
104105
* Plus, it should only prompt if there's any file changes
105106
*/
106-
if (
107-
sandpack.editorState === 'dirty' &&
108-
confirm('Reset all your edits too?')
109-
) {
107+
if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) {
110108
sandpack.resetAllFiles();
111109
}
110+
refresh();
111+
};
112112

113+
const handleReload = () => {
113114
refresh();
114115
};
115116

@@ -188,7 +189,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
188189
className="px-3 flex items-center justify-end text-start"
189190
translate="yes">
190191
<DownloadButton providedFiles={providedFiles} />
191-
<ResetButton onReset={handleReset} />
192+
<ReloadButton onReload={handleReload} />
193+
<ClearButton onClear={handleClear} />
192194
<OpenInCodeSandboxButton />
193195
{activeFile.endsWith('.tsx') && (
194196
<OpenInTypeScriptPlaygroundButton

‎src/components/MDX/Sandpack/ResetButton.tsx renamed to ‎src/components/MDX/Sandpack/ReloadButton.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@
44

55
import * as React from 'react';
66
import {IconRestart} from '../../Icon/IconRestart';
7-
export interface ResetButtonProps {
8-
onReset: () => void;
7+
export interface ReloadButtonProps {
8+
onReload: () => void;
99
}
1010

11-
export function ResetButton({onReset}: ResetButtonProps) {
11+
export function ReloadButton({onReload}: ReloadButtonProps) {
1212
return (
1313
<button
1414
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
15-
onClick={onReset}
16-
title="Reset Sandbox"
15+
onClick={onReload}
16+
title="Keep your edits and reload sandbox"
1717
type="button">
18-
<IconRestart className="inline mx-1 relative" /> রিসেট
18+
<IconRestart className="inline mx-1 relative" />
19+
<span className="hidden md:block">Reload</span>
1920
</button>
2021
);
2122
}

‎src/content/blog/2025/04/21/react-compiler-rc.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,23 +57,23 @@ During the RC period, we encourage all React users to try the compiler and provi
5757
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).
5858

5959
## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
60-
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!
60+
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!
6161

6262
To install:
6363

6464
npm
6565
<TerminalBlock>
66-
{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
66+
{`npm install --save-dev eslint-plugin-react-hooks@rc`}
6767
</TerminalBlock>
6868

6969
pnpm
7070
<TerminalBlock>
71-
{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
71+
{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
7272
</TerminalBlock>
7373

7474
yarn
7575
<TerminalBlock>
76-
{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`}
76+
{`yarn add --dev eslint-plugin-react-hooks@rc`}
7777
</TerminalBlock>
7878

7979
```js

‎src/content/community/conferences.md

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,36 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
1010

1111
## Upcoming Conferences {/*upcoming-conferences*/}
1212

13-
### CityJS London 2025 {/*cityjs-london*/}
14-
April 23 - 25, 2025. In-person in London, UK
15-
16-
[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
17-
18-
### App.js Conf 2025 {/*appjs-conf-2025*/}
19-
May 28 - 30, 2025. In-person in Kraków, Poland + remote
20-
21-
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
22-
23-
### CityJS Athens 2025 {/*cityjs-athens*/}
24-
May 27 - 31, 2025. In-person in Athens, Greece
25-
26-
[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
27-
28-
### React Norway 2025 {/*react-norway-2025*/}
29-
June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
30-
31-
[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
32-
33-
### React Summit 2025 {/*react-summit-2025*/}
34-
June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
35-
36-
[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
37-
38-
### React Nexus 2025 {/*react-nexus-2025*/}
39-
July 03 - 05, 2025. In-person in Bangalore, India
40-
41-
[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)
42-
4313
### React Universe Conf 2025 {/*react-universe-conf-2025*/}
4414
September 2-4, 2025. Wrocław, Poland.
4515

@@ -60,6 +30,12 @@ October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15
6030

6131
[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)
6232

33+
34+
### CityJS New Delhi 2025 {/*cityjs-newdelhi*/}
35+
November 6-7, 2025. In-person in New Delhi, India
36+
37+
[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
38+
6339
### React Summit US 2025 {/*react-summit-us-2025*/}
6440
November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)
6541

@@ -70,13 +46,49 @@ November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
7046

7147
[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
7248

49+
### React Paris 2026 {/*react-paris-2026*/}
50+
March 26 - 27, 2026. In-person in Paris, France (hybrid event)
51+
52+
[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
53+
7354

7455
## Past Conferences {/*past-conferences*/}
7556

57+
58+
### React Nexus 2025 {/*react-nexus-2025*/}
59+
July 03 - 05, 2025. In-person in Bangalore, India
60+
61+
[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)
62+
63+
### React Summit 2025 {/*react-summit-2025*/}
64+
June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
65+
66+
[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
67+
68+
### React Norway 2025 {/*react-norway-2025*/}
69+
June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
70+
71+
[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
72+
73+
### CityJS Athens 2025 {/*cityjs-athens*/}
74+
May 27 - 31, 2025. In-person in Athens, Greece
75+
76+
[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
77+
78+
### App.js Conf 2025 {/*appjs-conf-2025*/}
79+
May 28 - 30, 2025. In-person in Kraków, Poland + remote
80+
81+
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
82+
83+
### CityJS London 2025 {/*cityjs-london*/}
84+
April 23 - 25, 2025. In-person in London, UK
85+
86+
[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
87+
7688
### React Paris 2025 {/*react-paris-2025*/}
7789
March 20 - 21, 2025. In-person in Paris, France (hybrid event)
7890

79-
[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
91+
[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj)
8092

8193
### React Native Connection 2025 {/*react-native-connection-2025*/}
8294
April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.

‎src/content/learn/react-compiler/installation.md

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -176,16 +176,7 @@ Install the ESLint plugin:
176176
npm install -D eslint-plugin-react-hooks@rc
177177
</TerminalBlock>
178178

179-
Then enable the compiler rule in your ESLint configuration:
180-
181-
```js {3}
182-
// .eslintrc.js
183-
module.exports = {
184-
rules: {
185-
'react-hooks/react-compiler': 'error',
186-
},
187-
};
188-
```
179+
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.
189180

190181
The ESLint rule will:
191182
- Identify violations of the [Rules of React](/reference/rules)

‎src/content/learn/react-compiler/introduction.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https
154154

155155
## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
156156

157-
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.
157+
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.
158158

159159
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.
160160

‎src/content/reference/react-dom/components/index.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -162,31 +162,31 @@ React সকল বিল্ট-ইন ব্রাউজার HTML কম্
162162

163163
### কাস্টম HTML এলিমেন্ট {/*custom-html-elements*/}
164164

165-
আপনি যদি dash আছে এমন একটি ট্যাগ রেন্ডার করেন, like `<my-element>`, React ধরে নেবে যে আপনি একটি [কাস্টম HTML এলিমেন্ট](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) রেন্ডার করতে চান। React এর ক্ষেত্রে, কাস্টম এলিমেন্ট রেন্ডার করা এবং বিল্ট-ইন ব্রাউজার ট্যাগ রেন্ডার করা ভিন্ন ভাবে কাজ করে।
165+
আপনি যদি dash সহ একটি ট্যাগ রেন্ডার করেন, যেমন `<my-element>`, React ধরবে আপনি একটি [custom HTML element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) রেন্ডার করতে চাইছেন।
166166

167167
আপনি যদি [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) এট্রিবিউট সহ একটি ব্রাউজার বিল্ট-ইন HTML এলিমেন্ট রেন্ডার করেন, তবে এটিকে একটি কাস্টম এলিমেন্ট হিসাবে গণ্য করা হবে।
168168

169-
#### Setting values on custom elements {/*attributes-vs-properties*/}
169+
#### কাস্টম এলিমেন্টে ভ্যালু সেট করা {/*attributes-vs-properties*/}
170170

171-
Custom elements have two methods of passing data into them:
171+
কাস্টম এলিমেন্টে ডেটা পাঠানোর দুটি উপায় আছে:
172172

173-
1) Attributes: Which are displayed in markup and can only be set to string values
174-
2) Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values
173+
1) Attributes: যেগুলো markup-এ দেখা যায় এবং কেবল string মানেই সেট করা যায়
174+
2) Properties: যেগুলো markup-এ দেখা যায় না এবং যেকোনো JavaScript মানে সেট করা যায়
175175

176-
By default, React will pass values bound in JSX as attributes:
176+
ডিফল্টভাবে, React JSX-এ bind করা মানগুলোকে attributes হিসেবে পাঠায়:
177177

178178
```jsx
179179
<my-element value="Hello, world!"></my-element>
180180
```
181181

182-
Non-string JavaScript values passed to custom elements will be serialized by default:
182+
স্ট্রিং নয় এমন জাভাস্ক্রিপ্ট ভ্যালু কাস্টম এলিমেন্টসে পাঠালে ডিফল্টভাবে সেগুলো সিরিয়ালাইজ করা হবে:
183183

184184
```jsx
185185
// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
186186
<my-element value={[1,2,3]}></my-element>
187187
```
188188

189-
React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction:
189+
তবে, কোনো কাস্টম এলিমেন্টের ক্লাস কন্সট্রাকশন চলাকালে যদি কোনো প্রপার্টির নাম দৃশ্যমান থাকে, React সেটিকে প্রপার্টি হিসেবে চিনে নিয়ে সেখানে arbitrary মান পাঠাতে পারে:
190190

191191
<Sandpack>
192192

@@ -224,9 +224,9 @@ export function App() {
224224

225225
</Sandpack>
226226

227-
#### Listening for events on custom elements {/*custom-element-events*/}
227+
#### কাস্টম এলিমেন্টসে ইভেন্ট লিসেনিং {/*custom-element-events*/}
228228

229-
A common pattern when using custom elements is that they may dispatch [`CustomEvent`s](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) rather than accept a function to call when an event occur. You can listen for these events using an `on` prefix when binding to the event via JSX.
229+
কাস্টম এলিমেন্ট ব্যবহার করার সময় একটি সাধারণ প্যাটার্ন হলো—এগুলো কোন ইভেন্ট হলে কল করার জন্য ফাংশন নেয়ার বদলে [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) dispatch করতে পারে। JSX-এর মাধ্যমে bind করার সময় ইভেন্ট নামের আগে `on` প্রিফিক্স দিয়ে এগুলোর ইভেন্ট শোনা যাবে।
230230

231231
<Sandpack>
232232

@@ -285,7 +285,7 @@ export function App() {
285285

286286
<Note>
287287

288-
Events are case-sensitive and support dashes (`-`). Preserve the casing of the event and include all dashes when listening for custom element's events:
288+
ইভেন্টগুলোর ক্ষেত্রে casing সংবেদনশীল এবং dashes (`-`) সাপোর্ট করে। custom element-এর ইভেন্ট শোনার সময় ইভেন্টের casing ঠিক রাখুন এবং সব dashes অন্তর্ভুক্ত করুন:
289289

290290
```jsx
291291
// Listens for `say-hi` events

0 commit comments

Comments
 (0)