Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
0a74f01
Add more information about event and property binding on custom eleme…
crutchcorn Aug 22, 2025
27d86ff
Touch-ups to Activity (#7940)
samselikoff Aug 22, 2025
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)
deepu7ds 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
6c01213
merging all conflicts
react-translations-bot Sep 8, 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
3 changes: 2 additions & 1 deletion next-env.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />

// 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.
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.
2 changes: 1 addition & 1 deletion src/components/DocsFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ 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">
{type}
{type === 'Previous' ? 'Previous' : 'Next'}
</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
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="Scroll left"
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="Scroll right"
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
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,19 @@

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"
onClick={onReset}
title="Reset Sandbox"
onClick={onReload}
title="Keep your edits and reload sandbox"
type="button">
<IconRestart className="inline mx-1 relative" /> Reset
<IconRestart className="inline mx-1 relative" />
<span className="hidden md:block">Reload</span>
</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
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
4 changes: 4 additions & 0 deletions src/content/learn/build-a-react-app-from-scratch.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,11 @@ Para instruções de divisão de código, veja a documentação da sua ferrament

### Melhorando a Performance da Aplicação {/*improving-application-performance*/}

<<<<<<< HEAD
Como a ferramenta de build que você seleciona só suporta aplicações de página única (SPAs), você precisará implementar outros [padrões de renderização](https://www.patterns.dev/vanilla/rendering-patterns) como renderização do lado do servidor (SSR), geração de site estático (SSG), e/ou React Server Components (RSC). Mesmo se você não precisar dessas funcionalidades no início, no futuro pode haver algumas rotas que se beneficiariam de SSR, SSG ou RSC.
=======
Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC.
>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8

* **Aplicações de página única (SPA)** carregam uma única página HTML e atualizam dinamicamente a página conforme o usuário interage com a aplicação. SPAs são mais fáceis de começar, mas podem ter tempos de carregamento inicial mais lentos. SPAs são a arquitetura padrão para a maioria das ferramentas de build.

Expand Down
Loading
Loading