diff --git a/.eslintrc b/.eslintrc index f617dea26..f8b03f98a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,11 +2,13 @@ "root": true, "extends": "next/core-web-vitals", "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint"], + "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"], "rules": { "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }], - "react-hooks/exhaustive-deps": "error" + "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}], + "react-hooks/exhaustive-deps": "error", + "react/no-unknown-property": ["error", {"ignore": ["meta"]}], + "react-compiler/react-compiler": "error" }, "env": { "node": true, diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml new file mode 100644 index 000000000..ff2caa1bf --- /dev/null +++ b/.github/workflows/discord_notify.yml @@ -0,0 +1,21 @@ +name: Discord Notify + +on: + pull_request_target: + types: [ labeled ] + +jobs: + notify: + if: ${{ github.event.label.name == 'React Core Team' }} + runs-on: ubuntu-latest + steps: + - name: Discord Webhook Action + uses: tsickert/discord-webhook@v6.0.0 + with: + webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} + embed-author-name: ${{ github.event.pull_request.user.login }} + embed-author-url: ${{ github.event.pull_request.user.html_url }} + embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} + embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' + embed-description: ${{ github.event.pull_request.body }} + embed-url: ${{ github.event.pull_request.html_url }} \ No newline at end of file diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc..52e831b43 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/next.config.js b/next.config.js index 61ff1944a..861792c8e 100644 --- a/next.config.js +++ b/next.config.js @@ -9,10 +9,8 @@ const nextConfig = { pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], reactStrictMode: true, experimental: { - // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed - appDir: false, scrollRestoration: true, - legacyBrowsers: false, + reactCompiler: true, }, env: {}, webpack: (config, {dev, isServer, ...options}) => { diff --git a/package.json b/package.json index ad9b9baa4..07e6136e6 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss", "tsc": "tsc --noEmit", "start": "next start", - "postinstall": "patch-package && (is-ci || husky install .husky)", + "postinstall": "is-ci || husky install .husky", "check-all": "npm-run-all prettier lint:fix tsc rss", "rss": "node scripts/generateRss.js" }, @@ -33,12 +33,12 @@ "date-fns": "^2.16.1", "debounce": "^1.2.1", "github-slugger": "^1.3.0", - "next": "^13.4.1", + "next": "15.1.0", "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", - "react": "^0.0.0-experimental-16d053d59-20230506", + "react": "^19.0.0", "react-collapsed": "4.0.4", - "react-dom": "^0.0.0-experimental-16d053d59-20230506", + "react-dom": "^19.0.0", "remark-frontmatter": "^4.0.1", "remark-gfm": "^3.0.1" }, @@ -54,13 +54,14 @@ "@types/mdx-js__react": "^1.5.2", "@types/node": "^14.6.4", "@types/parse-numeric-range": "^0.0.1", - "@types/react": "^18.0.9", - "@types/react-dom": "^18.0.5", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", "@typescript-eslint/eslint-plugin": "^5.36.2", "@typescript-eslint/parser": "^5.36.2", "asyncro": "^3.0.0", "autoprefixer": "^10.4.2", "babel-eslint": "10.x", + "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112", "eslint": "7.x", "eslint-config-next": "12.0.3", "eslint-config-react-app": "^5.2.1", @@ -68,6 +69,7 @@ "eslint-plugin-import": "2.x", "eslint-plugin-jsx-a11y": "6.x", "eslint-plugin-react": "7.x", + "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112", "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215", "fs-extra": "^9.0.1", "globby": "^11.0.1", @@ -78,7 +80,6 @@ "mdast-util-to-string": "^1.1.0", "metro-cache": "0.72.2", "npm-run-all": "^4.1.5", - "patch-package": "^6.2.2", "postcss": "^8.4.5", "postcss-flexbugs-fixes": "4.2.1", "postcss-preset-env": "^6.7.0", @@ -94,7 +95,7 @@ "retext-smartypants": "^4.0.0", "rss": "^1.2.2", "tailwindcss": "^3.4.1", - "typescript": "^4.0.2", + "typescript": "^5.7.2", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" }, @@ -109,5 +110,6 @@ "lint-staged": { "*.{js,ts,jsx,tsx,css}": "yarn prettier", "src/**/*.md": "yarn fix-headings" - } + }, + "packageManager": "yarn@1.22.22" } diff --git a/patches/next+13.4.1.patch b/patches/next+13.4.1.patch deleted file mode 100644 index 6de490aa4..000000000 --- a/patches/next+13.4.1.patch +++ /dev/null @@ -1,22 +0,0 @@ -diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js -index a1f8648..1b3d608 100644 ---- a/node_modules/next/dist/server/render.js -+++ b/node_modules/next/dist/server/render.js -@@ -758,9 +758,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) { - // Always using react concurrent rendering mode with required react version 18.x - const renderShell = async (EnhancedApp, EnhancedComponent)=>{ - const content = renderContent(EnhancedApp, EnhancedComponent); -- return await (0, _nodewebstreamshelper.renderToInitialStream)({ -- ReactDOMServer: _serverbrowser.default, -- element: content -+ return new Promise((resolve, reject) => { -+ (0, _nodewebstreamshelper.renderToInitialStream)({ -+ ReactDOMServer: _serverbrowser.default, -+ element: content, -+ streamOptions: { -+ onError: reject -+ } -+ }).then(resolve, reject); - }); - }; - const createBodyResult = (0, _tracer.getTracer)().wrap(_constants2.RenderSpan.createBodyResult, (initialStream, suffix)=>{ diff --git a/patches/next-remote-watch+1.0.0.patch b/patches/next-remote-watch+1.0.0.patch deleted file mode 100644 index c9ecef84d..000000000 --- a/patches/next-remote-watch+1.0.0.patch +++ /dev/null @@ -1,16 +0,0 @@ -diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch -index c055b66..a2f749c 100755 ---- a/node_modules/next-remote-watch/bin/next-remote-watch -+++ b/node_modules/next-remote-watch/bin/next-remote-watch -@@ -66,7 +66,10 @@ app.prepare().then(() => { - } - } - -- app.server.hotReloader.send('reloadPage') -+ app.server.hotReloader.send({ -+ event: 'serverOnlyChanges', -+ pages: ['/[[...markdownPath]]'] -+ }); - } - ) - } diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx index 38b1f2c5f..13fe6d3a9 100644 --- a/src/components/ExternalLink.tsx +++ b/src/components/ExternalLink.tsx @@ -1,13 +1,17 @@ /* * Copyright (c) Facebook, Inc. and its affiliates. */ +import type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react'; export function ExternalLink({ href, target, children, ...props -}: JSX.IntrinsicElements['a']) { +}: DetailedHTMLProps< + AnchorHTMLAttributes, + HTMLAnchorElement +>) { return ( {children} diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx index 714cccd82..61e4e52cd 100644 --- a/src/components/Icon/IconArrow.tsx +++ b/src/components/Icon/IconArrow.tsx @@ -4,9 +4,10 @@ import {memo} from 'react'; import cn from 'classnames'; +import type {SVGProps} from 'react'; export const IconArrow = memo< - JSX.IntrinsicElements['svg'] & { + SVGProps & { /** * The direction the arrow should point. * `start` and `end` are relative to the current locale. diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index 6653dc387..4a3d3ad02 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.tsx @@ -4,9 +4,10 @@ import {memo} from 'react'; import cn from 'classnames'; +import type {SVGProps} from 'react'; export const IconArrowSmall = memo< - JSX.IntrinsicElements['svg'] & { + SVGProps & { /** * The direction the arrow should point. * `start` and `end` are relative to the current locale. diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx index 6645152dd..5d461556f 100644 --- a/src/components/Icon/IconBsky.tsx +++ b/src/components/Icon/IconBsky.tsx @@ -3,10 +3,9 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconBsky = memo(function IconBsky( - props -) { +export const IconBsky = memo>(function IconBsky(props) { return ( (function IconClose( +export const IconClose = memo>(function IconClose( props ) { return ( diff --git a/src/components/Icon/IconFacebookCircle.tsx b/src/components/Icon/IconFacebookCircle.tsx index 0900d6815..7f1080afa 100644 --- a/src/components/Icon/IconFacebookCircle.tsx +++ b/src/components/Icon/IconFacebookCircle.tsx @@ -3,8 +3,9 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconFacebookCircle = memo( +export const IconFacebookCircle = memo>( function IconFacebookCircle(props) { return ( ( - function IconGitHub(props) { - return ( - - - - ); - } -); +export const IconGitHub = memo>(function IconGitHub( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconHamburger.tsx b/src/components/Icon/IconHamburger.tsx index 5e6aa725a..8bc90ee0c 100644 --- a/src/components/Icon/IconHamburger.tsx +++ b/src/components/Icon/IconHamburger.tsx @@ -3,8 +3,9 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconHamburger = memo( +export const IconHamburger = memo>( function IconHamburger(props) { return ( ( +export const IconInstagram = memo>( function IconInstagram(props) { return ( (function IconLink( - props -) { +export const IconLink = memo>(function IconLink(props) { return ( ( - function IconNewPage(props) { - return ( - - - - - ); - } -); +export const IconNewPage = memo>(function IconNewPage( + props +) { + return ( + + + + + ); +}); diff --git a/src/components/Icon/IconRss.tsx b/src/components/Icon/IconRss.tsx index f2a52ee25..6208236f4 100644 --- a/src/components/Icon/IconRss.tsx +++ b/src/components/Icon/IconRss.tsx @@ -3,10 +3,9 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconRss = memo(function IconRss( - props -) { +export const IconRss = memo>(function IconRss(props) { return ( ( - function IconSearch(props) { - return ( - - - - ); - } -); +export const IconSearch = memo>(function IconSearch( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx index 5a007657f..9ea0bafdf 100644 --- a/src/components/Icon/IconThreads.tsx +++ b/src/components/Icon/IconThreads.tsx @@ -3,22 +3,23 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconThreads = memo( - function IconThreads(props) { - return ( - - - - ); - } -); +export const IconThreads = memo>(function IconThreads( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx index e7b0cf09e..e84971f4e 100644 --- a/src/components/Icon/IconTwitter.tsx +++ b/src/components/Icon/IconTwitter.tsx @@ -3,20 +3,21 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconTwitter = memo( - function IconTwitter(props) { - return ( - - - - - ); - } -); +export const IconTwitter = memo>(function IconTwitter( + props +) { + return ( + + + + + ); +}); diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 54f02b925..72003df74 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -38,6 +38,7 @@ function CollapseWrapper({ // Disable pointer events while animating. const isExpandedRef = useRef(isExpanded); if (typeof window !== 'undefined') { + // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/rules-of-hooks useLayoutEffect(() => { const wasExpanded = isExpandedRef.current; diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index 07e72c992..8c4f7da4f 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -1,8 +1,9 @@ /* * Copyright (c) Facebook, Inc. and its affiliates. */ +import type {SVGProps} from 'react'; -export function Logo(props: JSX.IntrinsicElements['svg']) { +export function Logo(props: SVGProps) { return ( = {}; let content: React.ReactElement[] = []; Children.forEach(children, (child) => { - const {props, type} = child; + const {props, type} = child as React.ReactElement<{ + children?: string; + id?: string; + }>; switch ((type as any).mdxName) { case 'Solution': { challenge.solution = child; diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx index 7eef0abe8..1fd9a8a90 100644 --- a/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -289,7 +289,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle { function getLineDecorators( code: string, - meta: string + meta?: string ): Array<{ line: number; className: string; @@ -309,7 +309,7 @@ function getLineDecorators( function getInlineDecorators( code: string, - meta: string + meta?: string ): Array<{ step: number; line: number; diff --git a/src/components/MDX/CodeDiagram.tsx b/src/components/MDX/CodeDiagram.tsx index 7a503f068..2a198fc56 100644 --- a/src/components/MDX/CodeDiagram.tsx +++ b/src/components/MDX/CodeDiagram.tsx @@ -17,7 +17,14 @@ export function CodeDiagram({children, flip = false}: CodeDiagramProps) { }); const content = Children.toArray(children).map((child: any) => { if (child.type?.mdxName === 'pre') { - return ; + return ( + + ); } else if (child.type === 'img') { return null; } else { diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx index 6e704b417..6044b1370 100644 --- a/src/components/MDX/ConsoleBlock.tsx +++ b/src/components/MDX/ConsoleBlock.tsx @@ -38,7 +38,8 @@ export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { if (typeof children === 'string') { message = children; } else if (isValidElement(children)) { - message = children.props.children; + message = (children as React.ReactElement<{children?: React.ReactNode}>) + .props.children; } return ( @@ -113,7 +114,8 @@ export function ConsoleLogLine({children, level}: ConsoleBlockProps) { if (typeof children === 'string') { message = children; } else if (isValidElement(children)) { - message = children.props.children; + message = (children as React.ReactElement<{children?: React.ReactNode}>) + .props.children; } else if (Array.isArray(children)) { message = children.reduce((result, child) => { if (typeof child === 'string') { diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx index 198aa939d..b04fa9f79 100644 --- a/src/components/MDX/ErrorDecoder.tsx +++ b/src/components/MDX/ErrorDecoder.tsx @@ -11,7 +11,7 @@ function replaceArgs( return msg.replace(/%s/g, function () { const arg = argList[argIdx++]; // arg can be an empty string: ?args[0]=&args[1]=count - return arg === undefined || arg === '' ? replacer : arg; + return arg === undefined ? replacer : arg; }); } diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx index 0e8db0165..5759a7c0a 100644 --- a/src/components/MDX/InlineCode.tsx +++ b/src/components/MDX/InlineCode.tsx @@ -3,6 +3,7 @@ */ import cn from 'classnames'; +import type {HTMLAttributes} from 'react'; interface InlineCodeProps { isLink?: boolean; @@ -11,7 +12,7 @@ interface InlineCodeProps { function InlineCode({ isLink, ...props -}: JSX.IntrinsicElements['code'] & InlineCodeProps) { +}: HTMLAttributes & InlineCodeProps) { return ( in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()` diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 6b44454d4..0a82ed895 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -5,6 +5,7 @@ import {Children, useContext, useMemo} from 'react'; import * as React from 'react'; import cn from 'classnames'; +import type {HTMLAttributes} from 'react'; import CodeBlock from './CodeBlock'; import {CodeDiagram} from './CodeDiagram'; @@ -59,21 +60,21 @@ function CodeStep({children, step}: {children: any; step: number}) { ); } -const P = (p: JSX.IntrinsicElements['p']) => ( +const P = (p: HTMLAttributes) => (

); -const Strong = (strong: JSX.IntrinsicElements['strong']) => ( +const Strong = (strong: HTMLAttributes) => ( ); -const OL = (p: JSX.IntrinsicElements['ol']) => ( +const OL = (p: HTMLAttributes) => (

    ); -const LI = (p: JSX.IntrinsicElements['li']) => ( +const LI = (p: HTMLAttributes) => (
  1. ); -const UL = (p: JSX.IntrinsicElements['ul']) => ( +const UL = (p: HTMLAttributes) => (
      ); @@ -139,10 +140,7 @@ const RSCBadge = ({title}: {title: string}) => ( ); -const Blockquote = ({ - children, - ...props -}: JSX.IntrinsicElements['blockquote']) => { +const Blockquote = ({children, ...props}: HTMLAttributes) => { return (
      ({}); if (!lineCountRef.current[activeFile]) { + // eslint-disable-next-line react-compiler/react-compiler lineCountRef.current[activeFile] = code.split('\n').length; } const lineCount = lineCountRef.current[activeFile]; diff --git a/src/components/MDX/Sandpack/LoadingOverlay.tsx b/src/components/MDX/Sandpack/LoadingOverlay.tsx index cd3f38fca..de883629c 100644 --- a/src/components/MDX/Sandpack/LoadingOverlay.tsx +++ b/src/components/MDX/Sandpack/LoadingOverlay.tsx @@ -17,7 +17,7 @@ export const LoadingOverlay = ({ clientId: string; dependenciesLoading: boolean; forceLoading: boolean; -} & React.HTMLAttributes): JSX.Element | null => { +} & React.HTMLAttributes): React.ReactNode | null => { const loadingOverlayState = useLoadingOverlayState( clientId, dependenciesLoading, @@ -64,6 +64,7 @@ export const LoadingOverlay = ({ transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`, }}>
      + {/* @ts-ignore: the OpenInCodeSandboxButton type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
      diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index 26ed5783d..bf2c3186c 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -115,7 +115,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { return (
      + {/* If Prettier reformats this block, the two @ts-ignore directives will no longer be adjacent to the problematic lines, causing TypeScript errors */} + {/* prettier-ignore */}
      + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
      @@ -129,8 +132,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { 'w-[fit-content]', showDropdown ? 'invisible' : '' )}> + {/* @ts-ignore: the FileTabs type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
      + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} {({open}) => ( // If tabs don't fit, display the dropdown instead. @@ -160,10 +165,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
      - {isMultiFile && showDropdown && ( - - {visibleFiles.map((filePath: string) => ( - + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} + {isMultiFile && showDropdown && ( + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} + {visibleFiles.map((filePath: string) => ( {({active}) => (
    • { ) { return result; } - const {props} = codeSnippet.props.children; + const {props} = ( + codeSnippet.props as PropsWithChildren<{ + children: ReactElement< + HTMLAttributes & {meta?: string} + >; + }> + ).children; let filePath; // path in the folder structure let fileHidden = false; // if the file is available as a tab let fileActive = false; // if the file tab is shown by default diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index e1b9198d8..a49aa728e 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -39,11 +39,9 @@ export function TeamMember({ personal, }: TeamMemberProps) { if (name == null || title == null || permalink == null || children == null) { + const identifier = name ?? title ?? permalink ?? 'unknown'; throw new Error( - 'Expected name, title, permalink, and children for ' + name ?? - title ?? - permalink ?? - 'unknown' + `Expected name, title, permalink, and children for ${identifier}` ); } return ( diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index fc13af338..475292716 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -31,9 +31,11 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { message = children; } else if ( isValidElement(children) && - typeof children.props.children === 'string' + typeof (children as React.ReactElement<{children: string}>).props + .children === 'string' ) { - message = children.props.children; + message = (children as React.ReactElement<{children: string}>).props + .children; } else { throw Error('Expected TerminalBlock children to be a plain string.'); } @@ -71,7 +73,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
      • diff --git a/src/components/Search.tsx b/src/components/Search.tsx index f5c963f67..c7401487b 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -9,6 +9,8 @@ import {lazy, useEffect} from 'react'; import * as React from 'react'; import {createPortal} from 'react-dom'; import {siteConfig} from 'siteConfig'; +import type {ComponentType, PropsWithChildren} from 'react'; +import type {DocSearchModalProps} from '@docsearch/react/modal'; export interface SearchProps { appId?: string; @@ -83,9 +85,10 @@ const options = { }; const DocSearchModal: any = lazy(() => - // @ts-ignore import('@docsearch/react/modal').then((mod) => ({ - default: mod.DocSearchModal, + default: mod.DocSearchModal as ComponentType< + PropsWithChildren + >, })) ); diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md index e25cdc002..d33d7942c 100644 --- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md +++ b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md @@ -5,7 +5,7 @@ date: 2020/12/21 description: 2020 ha sido un año largo. Antes de que termine queremos compartirte una actualización especial de fin de año sobre nuestra investigación acerca de los Componentes de React en el Servidor --- -21 de diciembre de 2020 por [Dan Abramov](https://twitter.com/dan_abramov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS) y [Sebastian Markbåge](https://twitter.com/sebmarkbage) +21 de diciembre de 2020 por [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS) y [Sebastian Markbåge](https://twitter.com/sebmarkbage) --- diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index 3328f4a42..85f8c130b 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -5,7 +5,7 @@ date: 2021/06/08 description: El equipo de React está emocionado por compartir algunas novedades. Empezamos a trabajar en el lanzamiento de React 18, nuestra próxima versión mayor. Creamos un grupo de trabajo para preparar a la comunidad ante una adopción gradual de las nuevas características en React 18. Publicamos React 18 Alpha para que los autores de bibliotecas puedan probarlo y darnos sus impresiones... --- -8 de junio de 2021 por [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://twitter.com/dan_abramov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) y [Seth Webster](https://twitter.com/sethwebster) +8 de junio de 2021 por [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) y [Seth Webster](https://twitter.com/sethwebster) --- diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md index 7bd07b4d5..45ca7390d 100644 --- a/src/content/blog/2021/12/17/react-conf-2021-recap.md +++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md @@ -131,7 +131,7 @@ Este fue nuestro primer año planeando una conferencia nosotros mismos, y tenemo Primero, gracias a todos nuestros oradores. [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0), y [Xuan Huang (黄玄)](https://twitter.com/Huxpro). -Gracias a todos los que han contribuido con sus comentarios sobre las charlas, incluyendo a [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), y [Tim Yung](https://twitter.com/yungsters). +Gracias a todos los que han contribuido con sus comentarios sobre las charlas, incluyendo a [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), y [Tim Yung](https://twitter.com/yungsters). Gracias a [Lauren Tan](https://twitter.com/potetotes) por organizar la conferencia Discord y ser nuestra administradora de Discord. diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 5dc4c475d..c21f14902 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -5,7 +5,7 @@ date: 2022/06/15 description: React 18 estuvo por años en desarrollo, y con él llegaron lecciones valiosas para el equipo de React. Su lanzamiento fue el resultado de muchos años de investigación y exploración de diversos caminos. Algunos de esos caminos fueron exitosos; muchos otros fueron callejones sin salida que nos llevaron a nuevas ideas. Una lección que hemos aprendido es que resulta frustrante para la comunidad esperar nuevas funcionalidades sin tener información sobre las rutas que estamos explorando. --- -15 de junio de 2022 por [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), y [Xuan Huang](https://twitter.com/Huxpro) +15 de junio de 2022 por [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), y [Xuan Huang](https://twitter.com/Huxpro) --- diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index e515bfbb4..975c5b233 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -5,7 +5,7 @@ date: 2023/03/16 description: Hoy estamos encantados de lanzar react.dev, el nuevo hogar de React y su documentación. En esta publicación, nos gustaría mostrarte el nuevo sitio. --- -16 de Marzo de 2023 por [Dan Abramov](https://twitter.com/dan_abramov) y [Rachel Nabors](https://twitter.com/rachelnabors) +16 de Marzo de 2023 por [Dan Abramov](https://bsky.app/profile/danabra.mov) y [Rachel Nabors](https://twitter.com/rachelnabors) --- @@ -631,7 +631,7 @@ Creemos que nunca ha habido un mejor momento para aprender React. ## ¿Quiénes trabajaron en esto? {/*who-worked-on-this*/} -En el equipo de React, [Rachel Nabors](https://twitter.com/rachelnabors/) lideró el proyecto (y proporcionó las ilustraciones), y [Dan Abramov](https://twitter.com/dan_abramov) diseñó el plan de estudios. Ambos coautoraron la mayor parte del contenido juntos también. +En el equipo de React, [Rachel Nabors](https://twitter.com/rachelnabors/) lideró el proyecto (y proporcionó las ilustraciones), y [Dan Abramov](https://bsky.app/profile/danabra.mov) diseñó el plan de estudios. Ambos coautoraron la mayor parte del contenido juntos también. Por supuesto, ningún proyecto tan grande se realiza en aislamiento. ¡Tenemos muchas personas a quienes agradecer! diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md index aeb677f31..1bc78149d 100644 --- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md +++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md @@ -97,9 +97,9 @@ The Transition Tracing API lets you detect when [React Transitions](/reference/r * * * 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. -* [Dan Abramov](https://twitter.com/dan_abramov) and [Joe Savona](https://twitter.com/en_JS) were interviewed by [Kent C. Dodds on his YouTube channel](https://www.youtube.com/watch?v=h7tur48JSaw), where they discussed concerns around React Server Components. -* [Dan Abramov](https://twitter.com/dan_abramov) and [Joe Savona](https://twitter.com/en_JS) were guests on the [JSParty podcast](https://jsparty.fm/267) and shared their thoughts about the future of React. +* [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Joe Savona](https://twitter.com/en_JS) were interviewed by [Kent C. Dodds on his YouTube channel](https://www.youtube.com/watch?v=h7tur48JSaw), where they discussed concerns around React Server Components. +* [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Joe Savona](https://twitter.com/en_JS) were guests on the [JSParty podcast](https://jsparty.fm/267) and shared their thoughts about the future of React. -Thanks to [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Dave McCabe](https://twitter.com/mcc_abe), [Luna Wei](https://twitter.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Sean Keegan](https://twitter.com/DevRelSean), [Sebastian Silbermann](https://twitter.com/sebsilbermann), [Seth Webster](https://twitter.com/sethwebster), and [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this post. +Thanks to [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Luna Wei](https://twitter.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Sean Keegan](https://twitter.com/DevRelSean), [Sebastian Silbermann](https://twitter.com/sebsilbermann), [Seth Webster](https://twitter.com/sethwebster), and [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this post. Thanks for reading, and see you in the next update! diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md index 18bce5e48..7d6c57a70 100644 --- a/src/content/blog/2023/05/03/react-canaries.md +++ b/src/content/blog/2023/05/03/react-canaries.md @@ -5,7 +5,7 @@ date: 2023/05/03 description: Nos gustaría ofrecer a la comunidad de React una opción para adoptar las nuevas características tan pronto su diseño está cerca de su etapa final, antes de que sean lanzados a una versión estable (similar a cómo Meta ha utilizado internamente las más recientes versiones de React). Estamos presentando oficialmente un nuevo [canal de lanzamiento Canary](/community/versioning-policy#canary-channel) con apoyo oficial. Permite que las configuraciones seleccionadas como los frameworks desvinculen la adopción de funcionalidades individuales de React del calendario de lanzamiento de React. --- -3 de Mayo de 2023 por [Dan Abramov](https://twitter.com/dan_abramov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), y [Andrew Clark](https://twitter.com/acdlite) +3 de Mayo de 2023 por [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), y [Andrew Clark](https://twitter.com/acdlite) --- diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md index fee21f4ec..ffe761624 100644 --- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md +++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md @@ -5,7 +5,7 @@ date: 2024/02/15 description: In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our last update, and we’d like to share our progress. --- -February 15, 2024 by [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode), and [Dan Abramov](https://twitter.com/dan_abramov). +February 15, 2024 by [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode), and [Dan Abramov](https://bsky.app/profile/danabra.mov). --- diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index bc77f4bbb..7cb7d42ee 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -42,7 +42,7 @@ Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Cl - [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) by [Sam Selikoff](https://twitter.com/samselikoff) - [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24916s) by [Josh Story](https://twitter.com/joshcstory) - [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff) -- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://twitter.com/dan_abramov2) +- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://bsky.app/profile/danabra.mov) - [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds) Finally, we ended the keynote with [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei) announcing that the React Compiler is now [Open Source](https://github.com/facebook/react/pull/29061), and sharing an experimental version of the React Compiler to try out. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 6b95c64c6..6d84dfe3f 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,10 +10,10 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### React Day Berlin 2024 {/*react-day-berlin-2024*/} -December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) +### React Paris 2025 {/*react-paris-2025*/} +March 20 - 21, 2024. In-person in Paris, France (hybrid event) -[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) +[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) ### App.js Conf 2025 {/*appjs-conf-2025*/} May 28 - 30, 2025. In-person in Kraków, Poland + remote @@ -25,8 +25,24 @@ June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) [Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) +### React Universe Conf 2025 {/*react-universe-conf-2025*/} +September 2-4, 2025. Wrocław, Poland. + +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) + +### React India 2025 {/*react-india-2025*/} +October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - remote day + +[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) + + ## Past Conferences {/*past-conferences*/} +### React Day Berlin 2024 {/*react-day-berlin-2024*/} +December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) + +[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) + ### React Africa 2024 {/*react-africa-2024*/} November 29, 2024. In-person in Casablanca, Morocco (hybrid event) @@ -55,7 +71,7 @@ October 25, 2024. In-person in Verona, Italy + online (hybrid event) ### React Brussels 2024 {/*react-brussels-2024*/} October 18, 2024. In-person in Brussels, Belgium (hybrid event) -[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) +[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWimQ0U75woee2zNUIFsiDC3) ### React India 2024 {/*react-india-2024*/} October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day diff --git a/src/content/community/docs-contributors.md b/src/content/community/docs-contributors.md index f9e0406f3..163ec3732 100644 --- a/src/content/community/docs-contributors.md +++ b/src/content/community/docs-contributors.md @@ -11,7 +11,7 @@ La documentación de React es escrita y mantenida por el [equipo de React](/comm ## Contenido {/*content*/} * [Rachel Nabors](https://twitter.com/RachelNabors): edición, escritura, ilustración -* [Dan Abramov](https://twitter.com/dan_abramov): escritura, diseño del currículo +* [Dan Abramov](https://bsky.app/profile/danabra.mov): escritura, diseño del currículo * [Sylwia Vargas](https://twitter.com/SylwiaVargas): código de ejemplo * [Rick Hanlon](https://twitter.com/rickhanlonii): escritura * [David McCabe](https://twitter.com/mcc_abe): escritura @@ -34,7 +34,7 @@ La documentación de React es escrita y mantenida por el [equipo de React](/comm * [Jared Palmer](https://twitter.com/jaredpalmer): desarrollo del sitio * [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando), [Dustin Goodman](https://twitter.com/dustinsgoodman)): desarrollo del sitio * [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor), [Danilo Woznica](https://twitter.com/danilowoz)): sandbox integration -* [Dan Abramov](https://twitter.com/dan_abramov): desarrollo del sitio +* [Dan Abramov](https://bsky.app/profile/danabra.mov): desarrollo del sitio * [Rick Hanlon](https://twitter.com/rickhanlonii): desarrollo del sitio * [Harish Kumar](https://www.strek.in/): desarrollo y mantenimiento * [Luna Ruan](https://twitter.com/lunaruan): mejoras del sandbox 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 cfb4882b9..b79523265 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -21,7 +21,7 @@ Digamos que tienes una aplicación web existente en `example.com` construida con Así es como recomendamos configurarlo: 1. **Construye la parte React de tu app** utilizando uno de los [*frameworks* basados en React](/learn/start-a-new-react-project). -2. **Especifica `/some-app` como la *ruta base*** en la configuración de tu framework (aquí tienes como: [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/)). +2. **Especifica `/some-app` como la *ruta base*** en la configuración de tu framework (aquí tienes como: [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/)). 3. **Configura tu servidor o un proxy** para que todas las peticiones bajo `/some-app/` sean manejadas por tu aplicación React. Esto garantiza que la parte React de tu aplicación se pueda [beneficiar de las mejoras practicas](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) integradas en aquellos frameworks. @@ -57,12 +57,13 @@ Después agrega las siguientes líneas de código al principio de tu archivo Jav -```html index.html hidden +```html public/index.html hidden My app +
      ``` @@ -119,7 +120,7 @@ Esto te permite encontrar aquel elemento HTML con [`document.getElementById`](ht -```html index.html +```html public/index.html My app diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index b56ff0aee..64d87873a 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -144,7 +144,7 @@ Usualmente, solo necesitarás ejecutar este código una vez al inicio. Este cód -```html index.html +```html public/index.html My app @@ -375,7 +375,7 @@ You can use the `onUncaughtError` root option to display error dialogs: -```html index.html hidden +```html public/index.html hidden @@ -606,7 +606,7 @@ You can use the `onCaughtError` root option to display error dialogs or filter k -```html index.html hidden +```html public/index.html hidden @@ -885,7 +885,7 @@ You can use the `onRecoverableError` root option to display error dialogs: -```html index.html hidden +```html public/index.html hidden diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 32b137e78..8cb98a038 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -405,7 +405,7 @@ You can use the `onUncaughtError` root option to display error dialogs: -```html index.html hidden +```html public/index.html hidden @@ -640,7 +640,7 @@ You can use the `onCaughtError` root option to display error dialogs or filter k -```html index.html hidden +```html public/index.html hidden @@ -921,7 +921,7 @@ You can use the `onRecoverableError` root option to display error dialogs for hy -```html index.html hidden +```html public/index.html hidden diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index d7507d20e..c1cb86c10 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -252,7 +252,7 @@ Los portales resultan útiles cuando se desea integrar contenido de React en pá -```html index.html +```html public/index.html Mi aplicación diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 668b64cbb..b280c20d9 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -227,7 +227,7 @@ Si renderizas varias aplicaciones de React independientes en una sola página, p -```html index.html +```html public/index.html My app diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index 74aab615c..b079e322e 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -82,7 +82,7 @@ export async function createNote() { ``` -When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided: +When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNote` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNote` function using the reference provided: ```js [[1, 2, "createNote"], [1, 5, "createNote"], [1, 7, "createNote"]] "use client"; @@ -90,7 +90,7 @@ import {createNote} from './actions'; function EmptyNote() { console.log(createNote); - // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'} + // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}