Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
694aeac
Add React Paris 2025 conference talks + Add React Paris 2026 (#7935)
AymenBenAmor Aug 26, 2025
90686d8
Add CityJS New Delhi 2026 conference details (#7949)
arismarko Aug 26, 2025
9a370f2
[compiler] Tweak intro section on manual memo guidance (#7953)
poteto Aug 28, 2025
94a1164
[compiler][ez] Reference rc tag for install instructions (#7955)
poteto Aug 28, 2025
19c8201
[compiler] Update docs on eslint-plugin-react-hooks installation (#7956)
poteto Aug 28, 2025
2774ddf
Add reload button, rename reset to clear (#7954)
rickhanlonii Aug 29, 2025
ddfcf6e
fix: typo in component style documentation (#7925)
sky21kr Sep 1, 2025
bb998fd
fix broken link server-functions (#7923)
PouriaDamavandi Sep 1, 2025
4db5ecd
docs: Add Rendercon 2025 Conference (#7962)
orama254 Sep 2, 2025
9ced885
feat(i18n): make DocsPageFooter navigation labels translatable (#7943)
mrbadri Sep 2, 2025
04feec4
fix(rtl): resolve RTL issues in Challenges component (#7942)
mrbadri Sep 2, 2025
4d53629
Introduce Liverpool and Edinburgh meetup groups. (#7950)
asimno Sep 2, 2025
73a5fdd
docs: fix typo in update useTransition.md (#7936)
brookslybrand Sep 2, 2025
fc27b0a
docs: fix ordered list numbering in TypeScript with React Components …
mrbadri Sep 2, 2025
03a5465
Docs: update ref callback behaviour (#7927)
ninamma Sep 2, 2025
a4a37d8
Add setup to home sidebar (#7963)
rickhanlonii Sep 2, 2025
ca3e271
fix: definition typo on view transitions blog post (#7918)
vitormrmonteiro Sep 2, 2025
67584b3
Fix: grammar and add comma (#7917)
deepu7d Sep 2, 2025
0cc37ee
fix: typo (#7914)
Raghuboi Sep 2, 2025
afd84d1
Recommend installing `@types/*` as dev dependencies
Dejumo Sep 2, 2025
337d5ea
docs: minor grammar correction (#7906)
ergusto Sep 2, 2025
e9efd19
fix : typo in form component documentation (#7894)
developerjhp Sep 2, 2025
2217f45
Update "Deep Dive" in reusing-logic-with-custom-hooks.md with link an…
aurorascharff Sep 2, 2025
ff11cd2
Add note that form actions are actions (#7964)
rickhanlonii Sep 2, 2025
85ee6b2
Remove deprecated loremflickr placeholder images (#7968)
poteto Sep 3, 2025
b8e9faf
Fix handleClick compiler intro example (#7967)
rickhanlonii Sep 3, 2025
d34c6a2
Fix/tictactoe docs invalid file names (#7969)
mtayyabrawan Sep 4, 2025
4d3d495
Add React Conf 2024 to /videos (#7977)
rickhanlonii Sep 9, 2025
0bfd418
docs: add flushSync Troubleshooting section (#7978)
Akshay090 Sep 11, 2025
a5181c2
Bump Activity docs to canary (#7974)
rickhanlonii Sep 12, 2025
4705ee9
merging all conflicts
react-translations-bot Sep 15, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified public/images/tutorial/react-starter-code-codesandbox.png
100644 → 100755
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/components/DocsFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,11 @@ function FooterLink({
/>
<div className="flex flex-col overflow-hidden">
<span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
<<<<<<< HEAD
{type === 'Previous' ? 'Попередня' : 'Наступна'}
=======
{type === 'Previous' ? 'Previous' : 'Next'}
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
</span>
<span className="text-lg break-words group-hover:underline">
{title}
Expand Down
1 change: 1 addition & 0 deletions src/components/Icon/IconArrowSmall.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const IconArrowSmall = memo<
const classes = cn(className, {
'rotate-180': displayDirection === 'left',
'rotate-180 rtl:rotate-0': displayDirection === 'start',
'rtl:rotate-180': displayDirection === 'end',
'rotate-90': displayDirection === 'down',
});
return (
Expand Down
2 changes: 1 addition & 1 deletion src/components/Icon/IconExperimental.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {memo} from 'react';

export const IconExperimental = memo<
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
>(function IconCanary(
>(function IconExperimental(
{className, title, size} = {
className: undefined,
title: undefined,
Expand Down
4 changes: 2 additions & 2 deletions src/components/MDX/Challenges/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function Navigation({
onClick={handleScrollLeft}
aria-label="Прогорнути вліво"
className={cn(
'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180',
'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l rtl:rounded-r rtl:rounded-l-none border-gray-20 border-r rtl:border-l rtl:border-r-0',
{
'text-primary dark:text-primary-dark': canScrollLeft,
'text-gray-30': !canScrollLeft,
Expand All @@ -120,7 +120,7 @@ export function Navigation({
onClick={handleScrollRight}
aria-label="Прогорнути вправо"
className={cn(
'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180',
'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e',
{
'text-primary dark:text-primary-dark': canScrollRight,
'text-gray-30': !canScrollRight,
Expand Down
3 changes: 2 additions & 1 deletion src/components/MDX/MDXComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {finishedTranslations} from 'utils/finishedTranslations';

import ErrorDecoder from './ErrorDecoder';
import {IconCanary} from '../Icon/IconCanary';
import {IconExperimental} from 'components/Icon/IconExperimental';

function CodeStep({children, step}: {children: any; step: number}) {
return (
Expand Down Expand Up @@ -130,7 +131,7 @@ const ExperimentalBadge = ({title}: {title: string}) => (
className={
'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
}>
<IconCanary
<IconExperimental
size="s"
className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
/>
Expand Down
22 changes: 22 additions & 0 deletions src/components/MDX/Sandpack/ClearButton.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<button
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
onClick={onClear}
title="Clear all edits and reload sandbox"
type="button">
<IconClose className="inline mx-1 relative" />
<span className="hidden md:block">Clear</span>
</button>
);
}
16 changes: 9 additions & 7 deletions src/components/MDX/Sandpack/NavigationBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -95,21 +96,21 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
// 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
* when the iframe loads.
*
* 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();
};

Expand Down Expand Up @@ -188,7 +189,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
className="px-3 flex items-center justify-end text-start"
translate="yes">
<DownloadButton providedFiles={providedFiles} />
<ResetButton onReset={handleReset} />
<ReloadButton onReload={handleReload} />
<ClearButton onClear={handleClear} />
<OpenInCodeSandboxButton />
{activeFile.endsWith('.tsx') && (
<OpenInTypeScriptPlaygroundButton
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,26 @@

import * as React from 'react';
import {IconRestart} from '../../Icon/IconRestart';
export interface ResetButtonProps {
onReset: () => void;
export interface ReloadButtonProps {
onReload: () => void;
}

export function ResetButton({onReset}: ResetButtonProps) {
export function ReloadButton({onReload}: ReloadButtonProps) {
return (
<button
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
<<<<<<< HEAD:src/components/MDX/Sandpack/ResetButton.tsx
onClick={onReset}
title="Почати пісочницю наново"
type="button">
<IconRestart className="inline mx-1 relative" /> Скинути
=======
onClick={onReload}
title="Keep your edits and reload sandbox"
type="button">
<IconRestart className="inline mx-1 relative" />
<span className="hidden md:block">Reload</span>
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee:src/components/MDX/Sandpack/ReloadButton.tsx
</button>
);
}
8 changes: 4 additions & 4 deletions src/content/blog/2025/04/21/react-compiler-rc.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<TerminalBlock>
{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
{`npm install --save-dev eslint-plugin-react-hooks@rc`}
</TerminalBlock>

pnpm
<TerminalBlock>
{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
</TerminalBlock>

yarn
<TerminalBlock>
{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`}
{`yarn add --dev eslint-plugin-react-hooks@rc`}
</TerminalBlock>

```js
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2521,7 +2521,7 @@ export default function App() {
const { url } = useRouter();

// Define a default animation of .slow-fade.
// See animations.css for the animation definiton.
// See animations.css for the animation definition.
return (
<ViewTransition default="slow-fade">
{url === '/' ? <Home /> : <Details />}
Expand Down Expand Up @@ -11465,6 +11465,14 @@ _For more background on how we built View Transitions, see: [#31975](https://git

## Activity {/*activity*/}

<Note>

**`<Activity />` is now available in React’s Canary channel.**

[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)

</Note>

In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS.

We're now ready to share the API and how it works, so you can start testing it in experimental React versions.
Expand Down
79 changes: 48 additions & 31 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -50,6 +20,11 @@ October 2-4, 2025. Alicante, Spain.

[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)

### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/}
October 04, 2025. Nairobi, Kenya

[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)

### React Conf 2025 {/*react-conf-2025*/}
October 7-8, 2025. Henderson, Nevada, USA and free livestream

Expand All @@ -60,6 +35,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)

Expand All @@ -70,13 +51,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.
Expand Down
4 changes: 4 additions & 0 deletions src/content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
* [React Advanced London](https://guild.host/react-advanced-london)
* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/)
* [React Native London](https://guild.host/RNLDN)

## Finland {/*finland*/}
Expand Down Expand Up @@ -137,6 +138,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Portugal {/*portugal*/}
* [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)

## Scotland (UK) {/*scotland-uk*/}
* [Edinburgh](https://www.meetup.com/react-edinburgh/)

## Spain {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)

Expand Down
Loading
Loading