diff --git a/.eslintrc b/.eslintrc index 147e54607..f617dea26 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,7 +5,8 @@ "plugins": ["@typescript-eslint"], "rules": { "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": "warn" + "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }], + "react-hooks/exhaustive-deps": "error" }, "env": { "node": true, diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index c447a2cdb..87dcfdc73 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -16,7 +16,7 @@ jobs: - name: Set up node uses: actions/setup-node@v1 with: - node-version: "14.x" + node-version: '20.x' - name: Install dependencies uses: bahmutov/npm-install@v1.7.10 @@ -38,7 +38,7 @@ jobs: # Here's the first place where next-bundle-analysis' own script is used # This step pulls the raw bundle stats for the current bundle - name: Analyze bundle - run: npx -p nextjs-bundle-analysis report + run: npx -p nextjs-bundle-analysis@0.5.0 report - name: Upload bundle uses: actions/upload-artifact@v2 diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index bd73b6b4e..5a3047cfc 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -47,26 +47,9 @@ jobs: pr_number=$(cat pr_number/pr_number) echo "pr-number=$pr_number" >> $GITHUB_OUTPUT - - name: Find Comment - uses: peter-evans/find-comment@v1 - if: success() - id: fc - with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body-includes: "" - - - name: Create Comment - uses: peter-evans/create-or-update-comment@v1.4.4 - if: success() && steps.fc.outputs.comment-id == 0 - with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body: ${{ steps.get-comment-body.outputs.body }} - - - name: Update Comment - uses: peter-evans/create-or-update-comment@v1.4.4 - if: success() && steps.fc.outputs.comment-id != 0 + - name: Comment + uses: marocchino/sticky-pull-request-comment@v2 with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body: ${{ steps.get-comment-body.outputs.body }} - comment-id: ${{ steps.fc.outputs.comment-id }} - edit-mode: replace + header: next-bundle-analysis + number: ${{ steps.get-comment-body.outputs.pr-number }} + message: ${{ steps.get-comment-body.outputs.body }} diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml index bf446393a..34ca6d7b8 100644 --- a/.github/workflows/site_lint.yml +++ b/.github/workflows/site_lint.yml @@ -11,17 +11,17 @@ jobs: lint: runs-on: ubuntu-latest - name: Lint on node 12.x and ubuntu-latest + name: Lint on node 20.x and ubuntu-latest steps: - uses: actions/checkout@v1 - - name: Use Node.js 12.x - uses: actions/setup-node@v1 + - name: Use Node.js 20.x + uses: actions/setup-node@v3 with: - node-version: 12.x + node-version: 20.x - name: Install deps and build (with cache) - uses: bahmutov/npm-install@v1.7.10 + uses: bahmutov/npm-install@v1.8.32 - name: Lint codebase run: yarn ci-check diff --git a/next.config.js b/next.config.js index 2ea3e916e..414728580 100644 --- a/next.config.js +++ b/next.config.js @@ -9,10 +9,10 @@ const nextConfig = { pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], reactStrictMode: true, experimental: { - plugins: true, + // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed + appDir: false, scrollRestoration: true, legacyBrowsers: false, - browsersListForSwc: true, }, env: { SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS, diff --git a/package.json b/package.json index f4f9a8026..e47c10ff7 100644 --- a/package.json +++ b/package.json @@ -32,12 +32,12 @@ "debounce": "^1.2.1", "ga-lite": "^2.1.4", "github-slugger": "^1.3.0", - "next": "12.3.2-canary.7", + "next": "^13.4.1", "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", - "react": "0.0.0-experimental-cb5084d1c-20220924", + "react": "^0.0.0-experimental-16d053d59-20230506", "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1", - "react-dom": "0.0.0-experimental-cb5084d1c-20220924", + "react-dom": "^0.0.0-experimental-16d053d59-20230506", "remark-frontmatter": "^4.0.1", "remark-gfm": "^3.0.1" }, @@ -92,13 +92,13 @@ "retext": "^7.0.1", "retext-smartypants": "^4.0.0", "rss": "^1.2.2", - "tailwindcss": "^3.0.22", + "tailwindcss": "^3.3.2", "typescript": "^4.0.2", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" }, "engines": { - "node": ">=12.x" + "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0" }, "nextBundleAnalysis": { "budget": null, diff --git a/patches/next+12.3.2-canary.7.patch b/patches/next+12.3.2-canary.7.patch deleted file mode 100644 index ee8d132de..000000000 --- a/patches/next+12.3.2-canary.7.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 3a141de..72a8749 100644 ---- a/node_modules/next/dist/server/render.js -+++ b/node_modules/next/dist/server/render.js -@@ -752,9 +752,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) { - // Enabling react concurrent rendering mode: __NEXT_REACT_ROOT = true - const renderShell = async (EnhancedApp, EnhancedComponent)=>{ - const content = renderContent(EnhancedApp, EnhancedComponent); -- return await (0, _nodeWebStreamsHelper).renderToInitialStream({ -- ReactDOMServer, -- element: content -+ return new Promise((resolve, reject) => { -+ (0, _nodeWebStreamsHelper).renderToInitialStream({ -+ ReactDOMServer, -+ element: content, -+ streamOptions: { -+ onError: reject -+ } -+ }).then(resolve, reject); - }); - }; - const createBodyResult = (initialStream, suffix)=>{ diff --git a/patches/next+13.4.1.patch b/patches/next+13.4.1.patch new file mode 100644 index 000000000..6de490aa4 --- /dev/null +++ b/patches/next+13.4.1.patch @@ -0,0 +1,22 @@ +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/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index ca3afa851..e64b486d1 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -15,12 +15,12 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) { !crumb.skipBreadcrumb && (
- - - {crumb.title} - + + {crumb.title} - + & ButtonLinkProps) { const classes = cn( className, 'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug', @@ -34,10 +34,13 @@ function ButtonLink({ } ); return ( - - - {children} - + + {children} ); } diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index d2c2c25de..2fdbb0460 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -66,25 +66,24 @@ function FooterLink({ type: 'Previous' | 'Next'; }) { return ( - - - - - - {type} - - {title} + + + + + {type} - + {title} + ); } diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx index 53bde1326..714cccd82 100644 --- a/src/components/Icon/IconArrow.tsx +++ b/src/components/Icon/IconArrow.tsx @@ -7,7 +7,12 @@ import cn from 'classnames'; export const IconArrow = memo< JSX.IntrinsicElements['svg'] & { - displayDirection: 'left' | 'right' | 'up' | 'down'; + /** + * The direction the arrow should point. + * `start` and `end` are relative to the current locale. + * for example, in LTR, `start` is left and `end` is right. + */ + displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; } >(function IconArrow({displayDirection, className, ...rest}) { return ( @@ -20,6 +25,7 @@ export const IconArrow = memo< {...rest} className={cn(className, { 'rotate-180': displayDirection === 'right', + 'rotate-180 rtl:rotate-0': displayDirection === 'end', })}> diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index cf85988d2..6653dc387 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.tsx @@ -7,11 +7,17 @@ import cn from 'classnames'; export const IconArrowSmall = memo< JSX.IntrinsicElements['svg'] & { - displayDirection: 'left' | 'right' | 'up' | 'down'; + /** + * The direction the arrow should point. + * `start` and `end` are relative to the current locale. + * for example, in LTR, `start` is left and `end` is right. + */ + displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; } >(function IconArrowSmall({displayDirection, className, ...rest}) { const classes = cn(className, { 'rotate-180': displayDirection === 'left', + 'rotate-180 rtl:rotate-0': displayDirection === 'start', 'rotate-90': displayDirection === 'down', }); return ( diff --git a/src/components/Icon/IconCanary.tsx b/src/components/Icon/IconCanary.tsx new file mode 100644 index 000000000..a7782b141 --- /dev/null +++ b/src/components/Icon/IconCanary.tsx @@ -0,0 +1,32 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconCanary = memo( + function IconCanary({className, title}) { + return ( + + {title && {title}} + + + + + + + ); + } +); diff --git a/src/components/Icon/IconChevron.tsx b/src/components/Icon/IconChevron.tsx index 1184d77d2..4d40330ce 100644 --- a/src/components/Icon/IconChevron.tsx +++ b/src/components/Icon/IconChevron.tsx @@ -7,7 +7,12 @@ import cn from 'classnames'; export const IconChevron = memo< JSX.IntrinsicElements['svg'] & { - displayDirection: 'up' | 'down' | 'left' | 'right'; + /** + * The direction the arrow should point. + * `start` and `end` are relative to the current locale. + * for example, in LTR, `start` is left and `end` is right. + */ + displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down'; } >(function IconChevron({className, displayDirection}) { const classes = cn( @@ -16,6 +21,8 @@ export const IconChevron = memo< 'rotate-90': displayDirection === 'left', 'rotate-180': displayDirection === 'up', '-rotate-90': displayDirection === 'right', + 'rotate-90 rtl:-rotate-90': displayDirection === 'start', + '-rotate-90 rtl:rotate-90': displayDirection === 'end', }, className ); diff --git a/src/components/Icon/IconNavArrow.tsx b/src/components/Icon/IconNavArrow.tsx index 93eed6e3c..f61175e9b 100644 --- a/src/components/Icon/IconNavArrow.tsx +++ b/src/components/Icon/IconNavArrow.tsx @@ -7,15 +7,22 @@ import cn from 'classnames'; export const IconNavArrow = memo< JSX.IntrinsicElements['svg'] & { - displayDirection: 'right' | 'down' | 'left'; + /** + * The direction the arrow should point. + * `start` and `end` are relative to the current locale. + * for example, in LTR, `start` is left and `end` is right. + */ + displayDirection: 'start' | 'end' | 'right' | 'left' | 'down'; } ->(function IconNavArrow({displayDirection = 'right', className}) { +>(function IconNavArrow({displayDirection = 'start', className}) { const classes = cn( 'duration-100 ease-in transition', { 'rotate-0': displayDirection === 'down', - '-rotate-90': displayDirection === 'right', 'rotate-90': displayDirection === 'left', + '-rotate-90': displayDirection === 'right', + 'rotate-90 rtl:-rotate-90': displayDirection === 'start', + '-rotate-90 rtl:rotate-90': displayDirection === 'end', }, className ); diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index 6bb8a4aac..2bf9afe57 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -62,13 +62,13 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) { const [isSubmitted, setIsSubmitted] = useState(false); return (
-

+

{isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}

{!isSubmitted && ( diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx index 6889a4b10..1b961e9c6 100644 --- a/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/src/components/Layout/Sidebar/SidebarLink.tsx @@ -8,6 +8,7 @@ import {useRef, useEffect} from 'react'; import * as React from 'react'; import cn from 'classnames'; import {IconNavArrow} from 'components/Icon/IconNavArrow'; +import {IconCanary} from 'components/Icon/IconCanary'; import Link from 'next/link'; interface SidebarLinkProps { @@ -15,7 +16,7 @@ interface SidebarLinkProps { selected?: boolean; title: string; level: number; - wip: boolean | undefined; + canary?: boolean; icon?: React.ReactNode; isExpanded?: boolean; hideArrow?: boolean; @@ -26,7 +27,7 @@ export function SidebarLink({ href, selected = false, title, - wip, + canary, level, isExpanded, hideArrow, @@ -49,44 +50,48 @@ export function SidebarLink({ target = '_blank'; } return ( - - 0, - 'pl-5': level < 2, - 'text-base font-bold': level === 0, - 'text-primary dark:text-primary-dark': level === 0 && !selected, - 'text-base text-secondary dark:text-secondary-dark': - level > 0 && !selected, - 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': - selected, - 'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3': - isPending, - } - )}> - {/* This here needs to be refactored ofc */} + 0, + 'ps-5': level < 2, + 'text-base font-bold': level === 0, + 'text-primary dark:text-primary-dark': level === 0 && !selected, + 'text-base text-secondary dark:text-secondary-dark': + level > 0 && !selected, + 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': + selected, + 'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3': + isPending, + } + )}> + {/* This here needs to be refactored ofc */} +
+ {title}{' '} + {canary && ( + + )} +
+ + {isExpanded != null && !hideArrow && ( - {title} + - {isExpanded != null && !hideArrow && ( - - - - )} - + )} ); } diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index fa6b0cb25..9a0dd23f5 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -82,7 +82,15 @@ export function SidebarRouteTree({
    {currentRoutes.map( ( - {path, title, routes, wip, heading, hasSectionHeader, sectionHeader}, + { + path, + title, + routes, + canary, + heading, + hasSectionHeader, + sectionHeader, + }, index ) => { const selected = slug === path; @@ -112,7 +120,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - wip={wip} + canary={canary} isExpanded={isExpanded} hideArrow={isForceExpanded} /> @@ -136,7 +144,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - wip={wip} + canary={canary} /> ); @@ -147,12 +155,12 @@ export function SidebarRouteTree({ {index !== 0 && (
  • )}

    {sectionHeader} diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx index 24fe86fa5..702ff5b5a 100644 --- a/src/components/Layout/SidebarNav/SidebarNav.tsx +++ b/src/components/Layout/SidebarNav/SidebarNav.tsx @@ -5,7 +5,6 @@ import {Suspense} from 'react'; import * as React from 'react'; import cn from 'classnames'; -import {Search} from 'components/Search'; import {Feedback} from '../Feedback'; import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree'; import type {RouteItem} from '../getRouteMeta'; @@ -46,7 +45,7 @@ export default function SidebarNav({

@@ -120,8 +120,8 @@ export function Challenge({ active> Next Challenge )} diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx index e448828cf..736db093c 100644 --- a/src/components/MDX/Challenges/Navigation.tsx +++ b/src/components/MDX/Challenges/Navigation.tsx @@ -87,7 +87,7 @@ export function Navigation({ {challenges.map(({name, id, order}, index) => (
-
+
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx index 3195bbe8f..21ab31e7c 100644 --- a/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -202,6 +202,7 @@ const CodeBlock = function CodeBlock({ return (
-
+

{children}

diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx index de6201b6a..5683d6dcf 100644 --- a/src/components/MDX/ConsoleBlock.tsx +++ b/src/components/MDX/ConsoleBlock.tsx @@ -38,7 +38,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { } return ( -
+
@@ -48,8 +48,8 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { Console
- - + +
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 1fb1ea0ce..c46898026 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -8,8 +8,9 @@ import cn from 'classnames'; import {IconNote} from '../Icon/IconNote'; import {IconWarning} from '../Icon/IconWarning'; import {IconPitfall} from '../Icon/IconPitfall'; +import {IconCanary} from '../Icon/IconCanary'; -type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip'; +type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary'; interface ExpandableCalloutProps { children: React.ReactNode; @@ -34,6 +35,15 @@ const variantMap = { overlayGradient: 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', }, + canary: { + title: 'Canary', + Icon: IconCanary, + containerClasses: + 'bg-gray-5 dark:bg-gray-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', + textColor: 'text-gray-60 dark:text-gray-30', + overlayGradient: + 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', + }, pitfall: { title: 'Pitfall', Icon: IconPitfall, @@ -65,7 +75,7 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) { )}>

{variant.title}

diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx index 1ad1e0313..1e709e483 100644 --- a/src/components/MDX/ExpandableExample.tsx +++ b/src/components/MDX/ExpandableExample.tsx @@ -70,13 +70,13 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { })}> {isDeepDive && ( <> - + Deep Dive )} {isExample && ( <> - + Example )} @@ -98,7 +98,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { isExample, })} onClick={() => setIsExpanded((current) => !current)}> - + {isExpanded ? 'Hide Details' : 'Show Details'} diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx index 707e5e3ca..50e209e74 100644 --- a/src/components/MDX/Heading.tsx +++ b/src/components/MDX/Heading.tsx @@ -39,7 +39,7 @@ const Heading = forwardRefWithAs(function Heading( height="1em" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg" - className="text-gray-70 ml-2 h-5 w-5"> + className="text-gray-70 ms-2 h-5 w-5"> diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx index 4a87c2a53..d206e9888 100644 --- a/src/components/MDX/InlineCode.tsx +++ b/src/components/MDX/InlineCode.tsx @@ -13,6 +13,7 @@ function InlineCode({ }: JSX.IntrinsicElements['code'] & InlineCodeProps) { return ( in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()` className={cn( 'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline', { diff --git a/src/components/MDX/Link.tsx b/src/components/MDX/Link.tsx index 8986d07a5..7bf041e56 100644 --- a/src/components/MDX/Link.tsx +++ b/src/components/MDX/Link.tsx @@ -13,7 +13,7 @@ function Link({ className, children, ...props -}: JSX.IntrinsicElements['a']) { +}: React.AnchorHTMLAttributes) { const classes = 'inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal'; const modifiedChildren = Children.toArray(children).map((child: any) => { @@ -41,11 +41,8 @@ function Link({ {modifiedChildren} ) : ( - - {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - - {modifiedChildren} - + + {modifiedChildren} )} diff --git a/src/components/MDX/MDXComponents.module.css b/src/components/MDX/MDXComponents.module.css index 9840e77ce..e3ed413e0 100644 --- a/src/components/MDX/MDXComponents.module.css +++ b/src/components/MDX/MDXComponents.module.css @@ -8,11 +8,11 @@ } .markdown ol { - @apply mb-4 ml-8 list-decimal; + @apply mb-4 ms-8 list-decimal; } .markdown ul { - @apply mb-4 ml-8 list-disc; + @apply mb-4 ms-8 list-disc; } .markdown h1 { @@ -30,7 +30,7 @@ } .markdown code { - @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline; + @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline; font-size: 90%; } diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index ba531c9f0..a35a15147 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -62,13 +62,13 @@ const Strong = (strong: JSX.IntrinsicElements['strong']) => ( ); const OL = (p: JSX.IntrinsicElements['ol']) => ( -
    +
      ); const LI = (p: JSX.IntrinsicElements['li']) => (
    1. ); const UL = (p: JSX.IntrinsicElements['ul']) => ( -
        +
          ); const Divider = () => ( @@ -87,6 +87,10 @@ const Note = ({children}: {children: React.ReactNode}) => ( {children} ); +const Canary = ({children}: {children: React.ReactNode}) => ( + {children} +); + const Blockquote = ({ children, ...props @@ -123,7 +127,7 @@ function LearnMore({ href={path} type="primary"> Read More - + ) : null}
@@ -137,7 +141,7 @@ function ReadBlogPost({path}: {path: string}) { return ( Read Post - + ); } @@ -191,7 +195,7 @@ function AuthorCredit({ }) { return (
-

+

Illustrated by{' '} {authorLink ? ( @@ -369,7 +373,8 @@ function YouTubeIframe(props: any) { } function Image(props: any) { - return ; + const {alt, ...rest} = props; + return {alt}; } export const MDXComponents = { @@ -402,7 +407,7 @@ export const MDXComponents = { return children; }, MaxWidth({children}: {children: any}) { - return

{children}
; + return
{children}
; }, Pitfall, Deprecated, @@ -415,6 +420,7 @@ export const MDXComponents = { Math, MathI, Note, + Canary, PackageImport, ReadBlogPost, Recap, diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx index 23194c870..85daee1f8 100644 --- a/src/components/MDX/Sandpack/Console.tsx +++ b/src/components/MDX/Sandpack/Console.tsx @@ -162,7 +162,7 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => { className="flex items-center p-1" onClick={() => setIsExpanded(!isExpanded)}> - Console ({logs.length}) + Console ({logs.length}) ); } diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index 8c884a5d8..1392ea7dd 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -21,6 +21,7 @@ import {ResetButton} from './ResetButton'; import {DownloadButton} from './DownloadButton'; import {IconChevron} from '../../Icon/IconChevron'; import {Listbox} from '@headlessui/react'; +import {OpenInTypeScriptPlaygroundButton} from './OpenInTypeScriptPlayground'; export function useEvent(fn: any): any { const ref = useRef(null); @@ -90,15 +91,17 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { } else { return; } - }, [isMultiFile]); + + // Note: in a real useEvent, onContainerResize would be omitted. + }, [isMultiFile, onContainerResize]); const handleReset = () => { /** * resetAllFiles must come first, otherwise - * the previous content will appears for a second + * the previous content will appear for a second * when the iframe loads. * - * Plus, it should only prompts if there's any file changes + * Plus, it should only prompt if there's any file changes */ if ( sandpack.editorState === 'dirty' && @@ -135,7 +138,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // space that's taken by the (invisible) tab list.
{isMultiFile && showDropdown && ( - + {visibleFiles.map((filePath: string) => ( {({active}) => ( @@ -177,11 +180,16 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
+ {activeFile.endsWith('.tsx') && ( + + )}
); diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx index 42a2d2743..f943ee6ff 100644 --- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx +++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx @@ -8,10 +8,10 @@ import {IconNewPage} from '../../Icon/IconNewPage'; export const OpenInCodeSandboxButton = () => { return ( diff --git a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx new file mode 100644 index 000000000..f4b7ba77d --- /dev/null +++ b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx @@ -0,0 +1,26 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {IconNewPage} from '../../Icon/IconNewPage'; + +export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => { + const contentWithReactImport = `import * as React from 'react';\n\n${props.content}`; + return ( + + + TypeScript Playground + + ); +}; diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index 2e140360c..6b7a6d183 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -49,7 +49,6 @@ export function Preview({ errorScreenRegisteredRef, openInCSBRegisteredRef, loadingScreenRegisteredRef, - status, } = sandpack; if ( diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx index 1ac413138..243ce2349 100644 --- a/src/components/MDX/Sandpack/ResetButton.tsx +++ b/src/components/MDX/Sandpack/ResetButton.tsx @@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) { onClick={onReset} title="Reset Sandbox" type="button"> - Reset + Reset ); } diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index 043daf9b1..f710f8fe0 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -62,7 +62,7 @@ code { } ul { - padding-left: 20px; + padding-inline-start: 20px; } `.trim(); @@ -78,7 +78,7 @@ function SandpackRoot(props: SandpackProps) { }; return ( -
+
(
-
+
{code}
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index 887e9f691..da2dc4535 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -7,7 +7,6 @@ import Image from 'next/image'; import {IconTwitter} from '../Icon/IconTwitter'; import {IconGitHub} from '../Icon/IconGitHub'; import {ExternalLink} from '../ExternalLink'; -import {IconNewPage} from 'components/Icon/IconNewPage'; import {H3} from './Heading'; import {IconLink} from 'components/Icon/IconLink'; @@ -54,7 +53,7 @@ export function TeamMember({ className="block w-full sm:hidden flex-grow basis-2/5 rounded overflow-hidden relative"> {name}
-
+

{name}

@@ -62,23 +61,23 @@ export function TeamMember({ {children}
{twitter && ( -
+
- + {twitter}
)} {github && ( -
+
- {github} + {github}
)} @@ -87,7 +86,7 @@ export function TeamMember({ aria-label="Personal Site" href={`https://${personal}`} className="hover:text-primary dark:text-primary-dark flex flex-row items-center"> - {personal} + {personal} )}
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index 9fb5ff35f..fc13af338 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -17,9 +17,9 @@ interface TerminalBlockProps { function LevelText({type}: {type: LogLevel}) { switch (type) { case 'warning': - return Warning: ; + return Warning: ; case 'error': - return Error: ; + return Error: ; default: return null; } @@ -55,22 +55,25 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
- Terminal + Terminal
-
+
{message}
diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx index 839876029..d46a70277 100644 --- a/src/components/MDX/YouWillLearnCard.tsx +++ b/src/components/MDX/YouWillLearnCard.tsx @@ -29,7 +29,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) { size="md" label={title}> Read More - +
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx index a92cd8f60..b6437b46b 100644 --- a/src/components/PageHeading.tsx +++ b/src/components/PageHeading.tsx @@ -6,9 +6,12 @@ import Breadcrumbs from 'components/Breadcrumbs'; import Tag from 'components/Tag'; import {H1} from './MDX/Heading'; import type {RouteTag, RouteItem} from './Layout/getRouteMeta'; +import * as React from 'react'; +import {IconCanary} from './Icon/IconCanary'; interface PageHeadingProps { title: string; + canary?: boolean; status?: string; description?: string; tags?: RouteTag[]; @@ -18,20 +21,27 @@ interface PageHeadingProps { function PageHeading({ title, status, + canary, description, tags = [], breadcrumbs, }: PageHeadingProps) { return (
-
+
{breadcrumbs ? : null}

{title} + {canary && ( + + )} {status ? —{status} : ''}

{description && ( -

+

{description}

)} diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 0e8f84f0d..8bc47297a 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -5,11 +5,10 @@ import Head from 'next/head'; import Link from 'next/link'; import Router from 'next/router'; -import {lazy, useCallback, useEffect} from 'react'; +import {lazy, useEffect} from 'react'; import * as React from 'react'; import {createPortal} from 'react-dom'; import {siteConfig} from 'siteConfig'; -import cn from 'classnames'; export interface SearchProps { appId?: string; @@ -22,11 +21,7 @@ export interface SearchProps { } function Hit({hit, children}: any) { - return ( - - {children} - - ); + return {children}; } // Copy-pasted from @docsearch/react to avoid importing the whole bundle. diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index e76df63e2..d4f037128 100644 --- a/src/components/Seo.tsx +++ b/src/components/Seo.tsx @@ -53,7 +53,7 @@ export const Seo = withRouter( const canonicalUrl = `https://${siteDomain}${ router.asPath.split(/[\?\#]/)[0] }`; - const pageTitle = isHomePage ? 'React' : title + ' – React'; + const pageTitle = isHomePage ? title : title + ' – React'; // Twitter's meta parser is not very good. const twitterTitle = pageTitle.replace(/[<>]/g, ''); return ( diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx index 826119c14..e980b6f4d 100644 --- a/src/components/SocialBanner.tsx +++ b/src/components/SocialBanner.tsx @@ -37,7 +37,7 @@ export default function SocialBanner() { )}>
{bannerText}
🇺🇦
{bannerLinkText} diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 7033e030a..2e63a81f6 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -37,7 +37,7 @@ interface TagProps { function Tag({text, variant, className}: TagProps) { const {name, classes} = variantMap[variant]; return ( - + + +We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final, before they're released in a stable version--similar to how Meta has long used bleeding-edge versions of React internally. We are introducing a new officially supported [Canary release channel](/community/versioning-policy#canary-channel). It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule. + + + +--- + +## tl;dr {/*tldr*/} + +* We're introducing an officially supported [Canary release channel](/community/versioning-policy#canary-channel) for React. Since it's officially supported, if any regressions land, we'll treat them with a similar urgency to bugs in stable releases. +* Canaries let you start using individual new React features before they land in the semver-stable releases. +* Unlike the [Experimental](/community/versioning-policy#experimental-channel) channel, React Canaries only include features that we reasonably believe to be ready for adoption. We encourage frameworks to consider bundling pinned Canary React releases. +* We will announce breaking changes and new features on our blog as they land in Canary releases. +* **As always, React continues to follow semver for every Stable release.** + +## How React features are usually developed {/*how-react-features-are-usually-developed*/} + +Typically, every React feature has gone through the same stages: + +1. We develop an initial version and prefix it with `experimental_` or `unstable_`. The feature is only available in the `experimental` release channel. At this point, the feature is expected to change significantly. +2. We find a team at Meta willing to help us test this feature and provide feedback on it. This leads to a round of changes. As the feature becomes more stable, we work with more teams at Meta to try it out. +3. Eventually, we feel confident in the design. We remove the prefix from the API name, and make the feature available on the `main` branch by default, which most Meta products use. At this point, any team at Meta can use this feature. +4. As we build confidence in the direction, we also post an RFC for the new feature. At this point we know the design works for a broad set of cases, but we might make some last minute adjustments. +5. When we are close to cutting an open source release, we write documentation for the feature and finally release the feature in a stable React release. + +This playbook works well for most features we've released so far. However, there can be a significant gap between when the feature is generally ready to use (step 3) and when it is released in open source (step 5). + +**We'd like to offer the React community an option to follow the same approach as Meta, and adopt individual new features earlier (as they become available) without having to wait for the next release cycle of React.** + +As always, all React features will eventually make it into a Stable release. + +## Can we just do more minor releases? {/*can-we-just-do-more-minor-releases*/} + +Generally, we *do* use minor releases for introducing new features. + +However, this isn't always possible. Sometimes, new features are interconnected with *other* new features which have not yet been fully completed and that we're still actively iterating on. We can't release them separately because their implementations are related. We can't version them separately because they affect the same packages (for example, `react` and `react-dom`). And we need to keep the ability to iterate on the pieces that aren't ready without a flurry of major version releases, which semver would require us to do. + +At Meta, we've solved this problem by building React from the `main` branch, and manually updating it to a specific pinned commit every week. This is also the approach that React Native releases have been following for the last several years. Every *stable* release of React Native is pinned to a specific commit from the `main` branch of the React repository. This lets React Native include important bugfixes and incrementally adopt new React features at the framework level without getting coupled to the global React release schedule. + +We would like to make this workflow available to other frameworks and curated setups. For example, it lets a framework *on top of* React include a React-related breaking change *before* this breaking change gets included into a stable React release. This is particularly useful because some breaking changes only affect framework integrations. This lets a framework release such a change in its own minor version without breaking semver. + +Rolling releases with the Canaries channel will allow us to have a tighter feedback loop and ensure that new features get comprehensive testing in the community. This workflow is closer to how TC39, the JavaScript standards committee, [handles changes in numbered stages](https://tc39.es/process-document/). New React features may be available in frameworks built on React before they are in a React stable release, just as new JavaScript features ship in browsers before they are officially ratified as part of the specification. + +## Why not use experimental releases instead? {/*why-not-use-experimental-releases-instead*/} + +Although you *can* technically use [Experimental releases](/community/versioning-policy#canary-channel), we recommend against using them in production because experimental APIs can undergo significant breaking changes on their way to stabilization (or can even be removed entirely). While Canaries can also contain mistakes (as with any release), going forward we plan to announce any significant breaking changes in Canaries on our blog. Canaries are the closest to the code Meta runs internally, so you can generally expect them to be relatively stable. However, you *do* need to keep the version pinned and manually scan the GitHub commit log when updating between the pinned commits. + +**We expect that most people using React outside a curated setup (like a framework) will want to continue using the Stable releases.** However, if you're building a framework, you might want to consider bundling a Canary version of React pinned to a particular commit, and update it at your own pace. The benefit of that is that it lets you ship individual completed React features and bugfixes earlier for your users and at your own release schedule, similar to how React Native has been doing it for the last few years. The downside is that you would take on additional responsibility to review which React commits are being pulled in and communicate to your users which React changes are included with your releases. + +If you're a framework author and want to try this approach, please get in touch with us. + +## Announcing breaking changes and new features early {/*announcing-breaking-changes-and-new-features-early*/} + +Canary releases represent our best guess of what will go into the next stable React release at any given time. + +Traditionally, we've only announced breaking changes at the *end* of the release cycle (when doing a major release). Now that Canary releases are an officially supported way to consume React, we plan to shift towards announcing breaking changes and significant new features *as they land* in Canaries. For example, if we merge a breaking change that will go out in a Canary, we will write a post about it on the React blog, including codemods and migration instructions if necessary. Then, if you're a framework author cutting a major release that updates the pinned React canary to include that change, you can link to our blog post from your release notes. Finally, when a stable major version of React is ready, we will link to those already published blog posts, which we hope will help our team make progress faster. + +We plan to document APIs as they land in Canaries--even if these APIs are not yet available outside of them. APIs that are only available in Canaries will be marked with a special note on the corresponding pages. This will include APIs like [`use`](https://github.com/reactjs/rfcs/pull/229), and some others (like `cache` and `createServerContext`) which we'll send RFCs for. + +## Canaries must be pinned {/*canaries-must-be-pinned*/} + +If you decide to adopt the Canary workflow for your app or framework, make sure you always pin the *exact* version of the Canary you're using. Since Canaries are pre-releases, they may still include breaking changes. + +## Example: React Server Components {/*example-react-server-components*/} + +As we [announced in March](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components), the React Server Components conventions have been finalized, and we do not expect significant breaking changes related to their user-facing API contract. However, we can't release support for React Server Components in a stable version of React yet because we are still working on several intertwined framework-only features (such as [asset loading](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#asset-loading)) and expect more breaking changes there. + +This means that React Server Components are ready to be adopted by frameworks. However, until the next major React release, the only way for a framework to adopt them is to ship a pinned Canary version of React. (To avoid bundling two copies of React, frameworks that wish to do this would need to enforce resolution of `react` and `react-dom` to the pinned Canary they ship with their framework, and explain that to their users. As an example, this is what Next.js App Router does.) + +## Testing libraries against both Stable and Canary versions {/*testing-libraries-against-both-stable-and-canary-versions*/} + +We do not expect library authors to test every single Canary release since it would be prohibitively difficult. However, just as when we [originally introduced the different React pre-release channels three years ago](https://legacy.reactjs.org/blog/2019/10/22/react-release-channels.html), we encourage libraries to run tests against *both* the latest Stable and latest Canary versions. If you see a change in behavior that wasn't announced, please file a bug in the React repository so that we can help diagnose it. We expect that as this practice becomes widely adopted, it will reduce the amount of effort necessary to upgrade libraries to new major versions of React, since accidental regressions would be found as they land. + + + +Strictly speaking, Canary is not a *new* release channel--it used to be called Next. However, we've decided to rename it to avoid confusion with Next.js. We're announcing it as a *new* release channel to communicate the new expectations, such as Canaries being an officially supported way to use React. + + + +## Stable releases work like before {/*stable-releases-work-like-before*/} + +We are not introducing any changes to stable React releases. + + + diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 3459965f6..fc8a2969b 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -10,6 +10,11 @@ This blog is the official source for the updates from the React team. Anything i
+ + +Traditionally, new React features used to only be available at Meta first, and land in the open source releases later. We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final--similar to how Meta uses React internally. We are introducing a new officially supported Canary release channel. It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule. + + diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 6e8585369..2908f9cd0 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,87 +10,82 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### React Miami 2023 {/*react-miami-2023*/} -April 20 - 21, 2023. Miami, FL, USA - -[Website](https://www.reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf) - -### Reactathon 2023 {/*reactathon-2023*/} -May 2 - 3, 2023. San Francisco, CA, USA - -[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact) +### React Rally 2023 🐙 {/*react-rally-2023*/} +August 17 & 18, 2023. Salt Lake City, UT, USA -### RemixConf 2023 {/*remixconf-2023*/} -May, 2023. Salt Lake City, UT +[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/) -[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run) +### React India 2023 {/*react-india-2023*/} +Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day -### App.js Conf 2023 {/*appjs-conf-2023*/} -May 10 - 12, 2023. In-person in Kraków, Poland + remote +[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) -[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) +### React Advanced 2023 {/*react-advanced-2023*/} +October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event) -### Chain React 2023 {/*chain-react-2023*/} -May 17 - 19, 2023. Portland, OR, USA +[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023) -[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists) +### React Summit US 2023 {/*react-summit-us-2023*/} +November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event) -### Render(ATL) 2023 🍑 {/*renderatl-2023-*/} -May 31 - June 2, 2023. Atlanta, GA, USA +[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023) -[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/) +### React Day Berlin 2023 {/*react-day-berlin-2023*/} +December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event) -### React Summit 2023 {/*react-summit-2023*/} -June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event) +[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023) -[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023) +## Past Conferences {/*past-conferences*/} -### React Norway 2023 {/*react-norway-2023*/} -June 16th, 2023. Larvik, Norway +### React Nexus 2023 {/*react-nexus-2023*/} +July 07 & 08, 2023. Bangalore, India (In-person event) -[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/) +[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in) ### ReactNext 2023 {/*reactnext-2023*/} June 27th, 2023. Tel Aviv, Israel [Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext) -### React Nexus 2023 {/*react-nexus-2023*/} -July 07 & 08, 2023. Bangalore, India (In-person event) +### React Norway 2023 {/*react-norway-2023*/} +June 16th, 2023. Larvik, Norway -[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in) +[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/) -### React Rally 2023 🐙 {/*react-rally-2023*/} -August 17 & 18, 2023. Salt Lake City, UT, USA +### React Summit 2023 {/*react-summit-2023*/} +June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event) -[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/) +[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023) -### React On The Beach 2023 {/*react-on-the-beach-2023*/} -September 07, 2023. Amsterdam, Netherlands (In-person event) +### Render(ATL) 2023 🍑 {/*renderatl-2023-*/} +May 31 - June 2, 2023. Atlanta, GA, USA -[Website](https://reactonthebeach.com/) - [Twitter](https://twitter.com/reactonthebeach) +[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/) -### React India 2023 {/*react-india-2023*/} -Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day +### Chain React 2023 {/*chain-react-2023*/} +May 17 - 19, 2023. Portland, OR, USA -[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) +[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists) -### React Advanced 2023 {/*react-advanced-2023*/} -October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event) +### App.js Conf 2023 {/*appjs-conf-2023*/} +May 10 - 12, 2023. In-person in Kraków, Poland + remote -[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023) +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) -### React Summit US 2023 {/*react-summit-us-2023*/} -November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event) +### RemixConf 2023 {/*remixconf-2023*/} +May, 2023. Salt Lake City, UT -[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023) +[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run) -### React Day Berlin 2023 {/*react-day-berlin-2023*/} -December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event) +### Reactathon 2023 {/*reactathon-2023*/} +May 2 - 3, 2023. San Francisco, CA, USA -[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023) +[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact) -## Past Conferences {/*past-conferences*/} +### React Miami 2023 {/*react-miami-2023*/} +April 20 - 21, 2023. Miami, FL, USA + +[Website](https://www.reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf) ### React Day Berlin 2022 {/*react-day-berlin-2022*/} December 2, 2022. In-person in Berlin, Germany + remote (hybrid event) diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index b6ffc96de..68d5b8eb1 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -79,13 +79,18 @@ This section will be most relevant to developers who work on frameworks, librari Each of React's release channels is designed for a distinct use case: -- [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **Use this for all user-facing React applications.** -- [**Next**](#next-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next minor semver release. Use this for integration testing between React and third party projects. +- [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **User-facing applications that consume React directly use this channel.** +- [**Canary**](#canary-channel) tracks the main branch of the React source code repository. Think of these as release candidates for the next semver release. **[Frameworks or other curated setups may choose to use this channel with a pinned version of React.](/blog/2023/05/03/react-canaries) You can also Canaries for integration testing between React and third party projects.** - [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the main branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released. -All releases are published to npm, but only Latest uses semantic versioning. Prereleases (those in the Next and Experimental channels) have versions generated from a hash of their contents and the commit date, e.g. `0.0.0-68053d940-20210623` for Next and `0.0.0-experimental-68053d940-20210623` for Experimental. +All releases are published to npm, but only Latest uses semantic versioning. Prereleases (those in the Canary and Experimental channels) have versions generated from a hash of their contents and the commit date, e.g. `18.3.0-canary-388686f29-20230503` for Canary and `0.0.0-experimental-388686f29-20230503` for Experimental. -**The only officially supported release channel for user-facing applications is Latest**. Next and Experimental releases are provided for testing purposes only, and we provide no guarantees that behavior won't change between releases. They do not follow the semver protocol that we use for releases from Latest. +**Both Latest and Canary channels are officially supported for user-facing applications, but with different expectations**: + +* Latest releases follow the traditional semver model. +* Canary releases [must be pinned](/blog/2023/05/03/react-canaries) and may include breaking changes. They exist for curated setups (like frameworks) that want to gradually release new React features and bugfixes on their own release schedule. + +The Experimental releases are provided for testing purposes only, and we provide no guarantees that behavior won't change between releases. They do not follow the semver protocol that we use for releases from Latest. By publishing prereleases to the same registry that we use for stable releases, we are able to take advantage of the many tools that support the npm workflow, like [unpkg](https://unpkg.com) and [CodeSandbox](https://codesandbox.io). @@ -93,51 +98,51 @@ By publishing prereleases to the same registry that we use for stable releases, Latest is the channel used for stable React releases. It corresponds to the `latest` tag on npm. It is the recommended channel for all React apps that are shipped to real users. -**If you're not sure which channel you should use, it's Latest.** If you're a React developer, this is what you're already using. You can expect updates to Latest to be extremely stable. Versions follow the semantic versioning scheme, as [described earlier.](#stable-releases) +**If you're not sure which channel you should use, it's Latest.** If you're using React directly, this is what you're already using. You can expect updates to Latest to be extremely stable. Versions follow the semantic versioning scheme, as [described earlier.](#stable-releases) -### Next channel {/*next-channel*/} +### Canary channel {/*canary-channel*/} -The Next channel is a prerelease channel that tracks the main branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently. +The Canary channel is a prerelease channel that tracks the main branch of the React repository. We use prereleases in the Canary channel as release candidates for the Latest channel. You can think of Canary as a superset of Latest that is updated more frequently. -The degree of change between the most recent Next release and the most recent Latest release is approximately the same as you would find between two minor semver releases. However, **the Next channel does not conform to semantic versioning.** You should expect occasional breaking changes between successive releases in the Next channel. +The degree of change between the most recent Canary release and the most recent Latest release is approximately the same as you would find between two minor semver releases. However, **the Canary channel does not conform to semantic versioning.** You should expect occasional breaking changes between successive releases in the Canary channel. -**Do not use prereleases in user-facing applications.** +**Do not use prereleases in user-facing applications directly unless you're following the [Canary workflow](/blog/2023/05/03/react-canaries).** -Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `0.0.0-68053d940-20210623`. +Releases in Canary are published with the `canary` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `18.3.0-canary-388686f29-20230503`. -#### Using the next channel for integration testing {/*using-the-next-channel-for-integration-testing*/} +#### Using the canary channel for integration testing {/*using-the-canary-channel-for-integration-testing*/} -The Next channel is designed to support integration testing between React and other projects. +The Canary channel also supports integration testing between React and other projects. All changes to React go through extensive internal testing before they are released to the public. However, there are a myriad of environments and configurations used throughout the React ecosystem, and it's not possible for us to test against every single one. If you're the author of a third party React framework, library, developer tool, or similar infrastructure-type project, you can help us keep React stable for your users and the entire React community by periodically running your test suite against the most recent changes. If you're interested, follow these steps: - Set up a cron job using your preferred continuous integration platform. Cron jobs are supported by both [CircleCI](https://circleci.com/docs/2.0/triggers/#scheduled-builds) and [Travis CI](https://docs.travis-ci.com/user/cron-jobs/). -- In the cron job, update your React packages to the most recent React release in the Next channel, using `next` tag on npm. Using the npm cli: +- In the cron job, update your React packages to the most recent React release in the Canary channel, using `canary` tag on npm. Using the npm cli: ```console - npm update react@next react-dom@next + npm update react@canary react-dom@canary ``` Or yarn: ```console - yarn upgrade react@next react-dom@next + yarn upgrade react@canary react-dom@canary ``` - Run your test suite against the updated packages. - If everything passes, great! You can expect that your project will work with the next minor React release. - If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/facebook/react/issues). -A project that uses this workflow is Next.js. (No pun intended! Seriously!) You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example. +A project that uses this workflow is Next.js. You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example. ### Experimental channel {/*experimental-channel*/} -Like Next, the Experimental channel is a prerelease channel that tracks the main branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release. +Like Canary, the Experimental channel is a prerelease channel that tracks the main branch of the React repository. Unlike Canary, Experimental releases include additional features and APIs that are not ready for wider release. -Usually, an update to Next is accompanied by a corresponding update to Experimental. They are based on the same source revision, but are built using a different set of feature flags. +Usually, an update to Canary is accompanied by a corresponding update to Experimental. They are based on the same source revision, but are built using a different set of feature flags. -Experimental releases may be significantly different than releases to Next and Latest. **Do not use Experimental releases in user-facing applications.** You should expect frequent breaking changes between releases in the Experimental channel. +Experimental releases may be significantly different than releases to Canary and Latest. **Do not use Experimental releases in user-facing applications.** You should expect frequent breaking changes between releases in the Experimental channel. Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `0.0.0-experimental-68053d940-20210623`. @@ -147,11 +152,11 @@ Experimental features are ones that are not ready to be released to the wider pu For example, if the Experimental channel had existed when we announced Hooks, we would have released Hooks to the Experimental channel weeks before they were available in Latest. -You may find it valuable to run integration tests against Experimental. This is up to you. However, be advised that Experimental is even less stable than Next. **We do not guarantee any stability between Experimental releases.** +You may find it valuable to run integration tests against Experimental. This is up to you. However, be advised that Experimental is even less stable than Canary. **We do not guarantee any stability between Experimental releases.** #### How can I learn more about experimental features? {/*how-can-i-learn-more-about-experimental-features*/} -Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Next or Latest. +Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Canary or Latest. If a feature is not documented, they may be accompanied by an [RFC](https://github.com/reactjs/rfcs). diff --git a/src/content/index.md b/src/content/index.md index 0ef5df597..63dbd33eb 100644 --- a/src/content/index.md +++ b/src/content/index.md @@ -1,6 +1,6 @@ --- id: home -title: React – The library for web and native user interfaces +title: React permalink: index.html --- diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index b1478324e..49e11a22f 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -696,119 +696,115 @@ export const initialTravelPlan = { childPlaces: [] }, { id: 21, - title: 'Hong Kong', - childPlaces: [] - }, { - id: 22, title: 'India', childPlaces: [] }, { - id: 23, + id: 22, title: 'Singapore', childPlaces: [] }, { - id: 24, + id: 23, title: 'South Korea', childPlaces: [] }, { - id: 25, + id: 24, title: 'Thailand', childPlaces: [] }, { - id: 26, + id: 25, title: 'Vietnam', childPlaces: [] }] }, { - id: 27, + id: 26, title: 'Europe', childPlaces: [{ - id: 28, + id: 27, title: 'Croatia', childPlaces: [], }, { - id: 29, + id: 28, title: 'France', childPlaces: [], }, { - id: 30, + id: 29, title: 'Germany', childPlaces: [], }, { - id: 31, + id: 30, title: 'Italy', childPlaces: [], }, { - id: 32, + id: 31, title: 'Portugal', childPlaces: [], }, { - id: 33, + id: 32, title: 'Spain', childPlaces: [], }, { - id: 34, + id: 33, title: 'Turkey', childPlaces: [], }] }, { - id: 35, + id: 34, title: 'Oceania', childPlaces: [{ - id: 36, + id: 35, title: 'Australia', childPlaces: [], }, { - id: 37, + id: 36, title: 'Bora Bora (French Polynesia)', childPlaces: [], }, { - id: 38, + id: 37, title: 'Easter Island (Chile)', childPlaces: [], }, { - id: 39, + id: 38, title: 'Fiji', childPlaces: [], }, { - id: 40, + id: 39, title: 'Hawaii (the USA)', childPlaces: [], }, { - id: 41, + id: 40, title: 'New Zealand', childPlaces: [], }, { - id: 42, + id: 41, title: 'Vanuatu', childPlaces: [], }] }] }, { - id: 43, + id: 42, title: 'Moon', childPlaces: [{ - id: 44, + id: 43, title: 'Rheita', childPlaces: [] }, { - id: 45, + id: 44, title: 'Piccolomini', childPlaces: [] }, { - id: 46, + id: 45, title: 'Tycho', childPlaces: [] }] }, { - id: 47, + id: 46, title: 'Mars', childPlaces: [{ - id: 48, + id: 47, title: 'Corn Town', childPlaces: [] }, { - id: 49, + id: 48, title: 'Green Hill', childPlaces: [] }] @@ -877,12 +873,12 @@ export const initialTravelPlan = { 0: { id: 0, title: '(Root)', - childIds: [1, 43, 47], + childIds: [1, 42, 46], }, 1: { id: 1, title: 'Earth', - childIds: [2, 10, 19, 27, 35] + childIds: [2, 10, 19, 26, 34] }, 2: { id: 2, @@ -972,7 +968,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25, 26], + childIds: [20, 21, 22, 23, 24, 25], }, 20: { id: 20, @@ -981,146 +977,141 @@ export const initialTravelPlan = { }, 21: { id: 21, - title: 'Hong Kong', + title: 'India', childIds: [] }, 22: { id: 22, - title: 'India', + title: 'Singapore', childIds: [] }, 23: { id: 23, - title: 'Singapore', + title: 'South Korea', childIds: [] }, 24: { id: 24, - title: 'South Korea', + title: 'Thailand', childIds: [] }, 25: { id: 25, - title: 'Thailand', + title: 'Vietnam', childIds: [] }, 26: { id: 26, - title: 'Vietnam', - childIds: [] + title: 'Europe', + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, - title: 'Europe', - childIds: [28, 29, 30, 31, 32, 33, 34], + title: 'Croatia', + childIds: [] }, 28: { id: 28, - title: 'Croatia', + title: 'France', childIds: [] }, 29: { id: 29, - title: 'France', + title: 'Germany', childIds: [] }, 30: { id: 30, - title: 'Germany', + title: 'Italy', childIds: [] }, 31: { id: 31, - title: 'Italy', + title: 'Portugal', childIds: [] }, 32: { id: 32, - title: 'Portugal', + title: 'Spain', childIds: [] }, 33: { id: 33, - title: 'Spain', + title: 'Turkey', childIds: [] }, 34: { id: 34, - title: 'Turkey', - childIds: [] + title: 'Oceania', + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, - title: 'Oceania', - childIds: [36, 37, 38, 39, 40, 41, 42], + title: 'Australia', + childIds: [] }, 36: { id: 36, - title: 'Australia', + title: 'Bora Bora (French Polynesia)', childIds: [] }, 37: { id: 37, - title: 'Bora Bora (French Polynesia)', + title: 'Easter Island (Chile)', childIds: [] }, 38: { id: 38, - title: 'Easter Island (Chile)', + title: 'Fiji', childIds: [] }, 39: { - id: 39, - title: 'Fiji', + id: 40, + title: 'Hawaii (the USA)', childIds: [] }, 40: { id: 40, - title: 'Hawaii (the USA)', + title: 'New Zealand', childIds: [] }, 41: { id: 41, - title: 'New Zealand', + title: 'Vanuatu', childIds: [] }, 42: { id: 42, - title: 'Vanuatu', - childIds: [] + title: 'Moon', + childIds: [43, 44, 45] }, 43: { id: 43, - title: 'Moon', - childIds: [44, 45, 46] + title: 'Rheita', + childIds: [] }, 44: { id: 44, - title: 'Rheita', + title: 'Piccolomini', childIds: [] }, 45: { id: 45, - title: 'Piccolomini', + title: 'Tycho', childIds: [] }, 46: { id: 46, - title: 'Tycho', - childIds: [] + title: 'Mars', + childIds: [47, 48] }, 47: { id: 47, - title: 'Mars', - childIds: [48, 49] - }, - 48: { - id: 48, title: 'Corn Town', childIds: [] }, - 49: { - id: 49, + 48: { + id: 48, title: 'Green Hill', childIds: [] } @@ -1218,12 +1209,12 @@ export const initialTravelPlan = { 0: { id: 0, title: '(Root)', - childIds: [1, 43, 47], + childIds: [1, 42, 46], }, 1: { id: 1, title: 'Earth', - childIds: [2, 10, 19, 27, 35] + childIds: [2, 10, 19, 26, 34] }, 2: { id: 2, @@ -1313,7 +1304,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25, 26], + childIds: [20, 21, 22, 23, 24, 25], }, 20: { id: 20, @@ -1322,146 +1313,141 @@ export const initialTravelPlan = { }, 21: { id: 21, - title: 'Hong Kong', + title: 'India', childIds: [] }, 22: { id: 22, - title: 'India', + title: 'Singapore', childIds: [] }, 23: { id: 23, - title: 'Singapore', + title: 'South Korea', childIds: [] }, 24: { id: 24, - title: 'South Korea', + title: 'Thailand', childIds: [] }, 25: { id: 25, - title: 'Thailand', + title: 'Vietnam', childIds: [] }, 26: { id: 26, - title: 'Vietnam', - childIds: [] + title: 'Europe', + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, - title: 'Europe', - childIds: [28, 29, 30, 31, 32, 33, 34], + title: 'Croatia', + childIds: [] }, 28: { id: 28, - title: 'Croatia', + title: 'France', childIds: [] }, 29: { id: 29, - title: 'France', + title: 'Germany', childIds: [] }, 30: { id: 30, - title: 'Germany', + title: 'Italy', childIds: [] }, 31: { id: 31, - title: 'Italy', + title: 'Portugal', childIds: [] }, 32: { id: 32, - title: 'Portugal', + title: 'Spain', childIds: [] }, 33: { id: 33, - title: 'Spain', + title: 'Turkey', childIds: [] }, 34: { id: 34, - title: 'Turkey', - childIds: [] + title: 'Oceania', + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, - title: 'Oceania', - childIds: [36, 37, 38, 39, 40, 41,, 42], + title: 'Australia', + childIds: [] }, 36: { id: 36, - title: 'Australia', + title: 'Bora Bora (French Polynesia)', childIds: [] }, 37: { id: 37, - title: 'Bora Bora (French Polynesia)', + title: 'Easter Island (Chile)', childIds: [] }, 38: { id: 38, - title: 'Easter Island (Chile)', + title: 'Fiji', childIds: [] }, 39: { id: 39, - title: 'Fiji', + title: 'Hawaii (the USA)', childIds: [] }, 40: { id: 40, - title: 'Hawaii (the USA)', + title: 'New Zealand', childIds: [] }, 41: { id: 41, - title: 'New Zealand', + title: 'Vanuatu', childIds: [] }, 42: { id: 42, - title: 'Vanuatu', - childIds: [] + title: 'Moon', + childIds: [43, 44, 45] }, 43: { id: 43, - title: 'Moon', - childIds: [44, 45, 46] + title: 'Rheita', + childIds: [] }, 44: { id: 44, - title: 'Rheita', + title: 'Piccolomini', childIds: [] }, 45: { id: 45, - title: 'Piccolomini', + title: 'Tycho', childIds: [] }, 46: { id: 46, - title: 'Tycho', - childIds: [] + title: 'Mars', + childIds: [47, 48] }, 47: { id: 47, - title: 'Mars', - childIds: [48, 49] - }, - 48: { - id: 48, title: 'Corn Town', childIds: [] }, - 49: { - id: 49, + 48: { + id: 48, title: 'Green Hill', childIds: [] } @@ -1562,12 +1548,12 @@ export const initialTravelPlan = { 0: { id: 0, title: '(Root)', - childIds: [1, 43, 47], + childIds: [1, 42, 46], }, 1: { id: 1, title: 'Earth', - childIds: [2, 10, 19, 27, 35] + childIds: [2, 10, 19, 26, 34] }, 2: { id: 2, @@ -1657,7 +1643,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25, 26], + childIds: [20, 21, 22, 23, 24, 25,], }, 20: { id: 20, @@ -1666,146 +1652,141 @@ export const initialTravelPlan = { }, 21: { id: 21, - title: 'Hong Kong', + title: 'India', childIds: [] }, 22: { id: 22, - title: 'India', + title: 'Singapore', childIds: [] }, 23: { id: 23, - title: 'Singapore', + title: 'South Korea', childIds: [] }, 24: { id: 24, - title: 'South Korea', + title: 'Thailand', childIds: [] }, 25: { id: 25, - title: 'Thailand', + title: 'Vietnam', childIds: [] }, 26: { id: 26, - title: 'Vietnam', - childIds: [] + title: 'Europe', + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, - title: 'Europe', - childIds: [28, 29, 30, 31, 32, 33, 34], + title: 'Croatia', + childIds: [] }, 28: { id: 28, - title: 'Croatia', + title: 'France', childIds: [] }, 29: { id: 29, - title: 'France', + title: 'Germany', childIds: [] }, 30: { id: 30, - title: 'Germany', + title: 'Italy', childIds: [] }, 31: { id: 31, - title: 'Italy', + title: 'Portugal', childIds: [] }, 32: { id: 32, - title: 'Portugal', + title: 'Spain', childIds: [] }, 33: { id: 33, - title: 'Spain', + title: 'Turkey', childIds: [] }, 34: { id: 34, - title: 'Turkey', - childIds: [] + title: 'Oceania', + childIds: [35, 36, 37, 38, 39, 40,, 41], }, 35: { id: 35, - title: 'Oceania', - childIds: [36, 37, 38, 39, 40, 41,, 42], + title: 'Australia', + childIds: [] }, 36: { id: 36, - title: 'Australia', + title: 'Bora Bora (French Polynesia)', childIds: [] }, 37: { id: 37, - title: 'Bora Bora (French Polynesia)', + title: 'Easter Island (Chile)', childIds: [] }, 38: { id: 38, - title: 'Easter Island (Chile)', + title: 'Fiji', childIds: [] }, 39: { id: 39, - title: 'Fiji', + title: 'Hawaii (the USA)', childIds: [] }, 40: { id: 40, - title: 'Hawaii (the USA)', + title: 'New Zealand', childIds: [] }, 41: { id: 41, - title: 'New Zealand', + title: 'Vanuatu', childIds: [] }, 42: { id: 42, - title: 'Vanuatu', - childIds: [] + title: 'Moon', + childIds: [43, 44, 45] }, 43: { id: 43, - title: 'Moon', - childIds: [44, 45, 46] + title: 'Rheita', + childIds: [] }, 44: { id: 44, - title: 'Rheita', + title: 'Piccolomini', childIds: [] }, 45: { id: 45, - title: 'Piccolomini', + title: 'Tycho', childIds: [] }, 46: { id: 46, - title: 'Tycho', - childIds: [] + title: 'Mars', + childIds: [47, 48] }, 47: { id: 47, - title: 'Mars', - childIds: [48, 49] - }, - 48: { - id: 48, title: 'Corn Town', childIds: [] }, - 49: { - id: 49, + 48: { + id: 48, title: 'Green Hill', childIds: [] } diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index cbae68cec..cfd52320a 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -626,7 +626,7 @@ export default function PackingList() { Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result! -In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`. +In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`. diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index f8f55605c..3a39c36db 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -52,7 +52,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. +These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. ## Exporting and importing a component {/*exporting-and-importing-a-component*/} diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index b5c193763..3e91a7694 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -31,7 +31,7 @@ Then, use it to declare a ref inside your component: const myRef = useRef(null); ``` -Finally, pass it to the DOM node as the `ref` attribute: +Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node: ```js
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index dc34eedad..0a5151daa 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -882,7 +882,7 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' }; // These are two different objects! console.log(Object.is(options1, options2)); // false -```` +``` **Object and function dependencies can make your Effect re-synchronize more often than you need.** @@ -968,7 +968,7 @@ const roomId2 = 'music'; // These two strings are the same! console.log(Object.is(roomId1, roomId2)); // true -```` +``` Thanks to this fix, the chat no longer re-connects if you edit the input: diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md index 782b6c0f1..4450c4613 100644 --- a/src/content/learn/responding-to-events.md +++ b/src/content/learn/responding-to-events.md @@ -313,6 +313,12 @@ button { margin-right: 10px; } Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later. + + + +Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [` + ); +} + +export default function MyApp() { + return ( +
+

Welcome to my app

+ +
+ ); +} +``` + +```js App.js hidden +import AppTSX from "./App.tsx"; +export default App = AppTSX; +``` + + + + +These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox. + + + +This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props: + + + +```tsx App.tsx active +interface MyButtonProps { + /** The text to display inside the button */ + title: string; + /** Whether the button can be interacted with */ + disabled: boolean; +} + +function MyButton({ title, disabled }: MyButtonProps) { + return ( + + ); +} + +export default function MyApp() { + return ( +
+

Welcome to my app

+ +
+ ); +} +``` + +```js App.js hidden +import AppTSX from "./App.tsx"; +export default App = AppTSX; +``` + + + +The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases. + + +## Example Hooks {/*example-hooks*/} + +The type definitions from `@types/react` include types for the built-in hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. + +However, we can look at a few examples of how to provide types for hooks. + +### `useState` {/*typing-usestate*/} + +The [`useState` hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example: + +```ts +// Infer the type as "boolean" +const [enabled, setEnabled] = useState(false); +``` + +Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call: + +```ts +// Explicitly set the type to "boolean" +const [enabled, setEnabled] = useState(false); +``` + +This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings: + +```ts +type Status = "idle" | "loading" | "success" | "error"; + +const [status, setStatus] = useState("idle"); +``` + +Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types: + +```ts +type RequestState = + | { status: 'idle' } + | { status: 'loading' } + | { status: 'success', data: any } + | { status: 'error', error: Error }; + +const [requestState, setRequestState] = useState({ status: 'idle' }); +``` + +### `useReducer` {/*typing-usereducer*/} + +The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead: + + + +```tsx App.tsx active +import {useReducer} from 'react'; + +interface State { + count: number +}; + +type CounterAction = + | { type: "reset" } + | { type: "setCount"; value: State["count"] } + +const initialState: State = { count: 0 }; + +function stateReducer(state: State, action: CounterAction): State { + switch (action.type) { + case "reset": + return initialState; + case "setCount": + return { ...state, count: action.value }; + default: + throw new Error("Unknown action"); + } +} + +export default function App() { + const [state, dispatch] = useReducer(stateReducer, initialState); + + const addFive = () => dispatch({ type: "setCount", value: state.count + 5 }); + const reset = () => dispatch({ type: "reset" }); + + return ( +
+

Welcome to my counter

+ +

Count: {state.count}

+ + +
+ ); +} + +``` + +```js App.js hidden +import AppTSX from "./App.tsx"; +export default App = AppTSX; +``` + + + + +We are using TypeScript in a few key places: + + - `interface State` describes the shape of the reducer's state. + - `type CounterAction` describes the different actions which can be dispatched to the reducer. + - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default. + - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value. + +A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: + +```ts +import { stateReducer, State } from './your-reducer-implementation'; + +const initialState = { count: 0 }; + +export default function App() { + const [state, dispatch] = useReducer(stateReducer, initialState); +} +``` + +### `useContext` {/*typing-usecontext*/} + +The [`useContext` hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a hook to consume the value in a child component. + +The type of the value provided by the context is inferred from the value passed to the `createContext` call: + + + +```tsx App.tsx active +import { createContext, useContext, useState } from 'react'; + +type Theme = "light" | "dark" | "system"; +const ThemeContext = createContext("system"); + +const useGetTheme = () => useContext(ThemeContext); + +export default function MyApp() { + const [theme, setTheme] = useState('light'); + + return ( + + + + ) +} + +function MyComponent() { + const theme = useGetTheme(); + + return ( +
+

Current theme: {theme}

+
+ ) +} +``` + +```js App.js hidden +import AppTSX from "./App.tsx"; +export default App = AppTSX; +``` + + + +This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. + +This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present: + +```js {5, 16-20} +import { createContext, useContext, useState, useMemo } from 'react'; + +// This is a simpler example, but you can imagine a more complex object here +type ComplexObject = { + kind: string +}; + +// The context is created with `| null` in the type, to accurately reflect the default value. +const Context = createContext(null); + +// The `| null` will be removed via the check in the hook. +const useGetComplexObject = () => { + const object = useContext(Context); + if (!object) { throw new Error("useGetComplexObject must be used within a Provider") } + return object; +} + +export default function MyApp() { + const object = useMemo(() => ({ kind: "complex" }), []); + + return ( + + + + ) +} + +function MyComponent() { + const object = useGetComplexObject(); + + return ( +
+

Current object: {object.kind}

+
+ ) +} +``` + +### `useMemo` {/*typing-usememo*/} + +The [`useMemo`](/reference/react/useMemo) hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the hook. + +```ts +// The type of visibleTodos is inferred from the return value of filterTodos +const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); +``` + + +### `useCallback` {/*typing-usecallback*/} + +The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the hook. + + +```ts +const handleClick = useCallback(() => { + // ... +}, [todos]); +``` + +When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood. + +Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: + +```ts +import { useState, useCallback } from 'react'; + +export default function Form() { + const [value, setValue] = useState("Change me"); + + const handleChange = useCallback>((event) => { + setValue(event.currentTarget.value); + }, [setValue]) + + return ( + <> + +

Value: {value}

+ + ); +} +``` + +## Useful Types {/*useful-types*/} + +There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here. + +### DOM Events {/*typing-dom-events*/} + +When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event. + + + +```tsx App.tsx active +import { useState } from 'react'; + +export default function Form() { + const [value, setValue] = useState("Change me"); + + function handleChange(event: React.ChangeEvent) { + setValue(event.currentTarget.value); + } + + return ( + <> + +

Value: {value}

+ + ); +} +``` + +```js App.js hidden +import AppTSX from "./App.tsx"; +export default App = AppTSX; +``` + + + +There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events). + +When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event. + +If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events. + +### Children {/*typing-children*/} + +There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX: + +```ts +interface ModalRendererProps { + title: string; + children: React.ReactNode; +} +``` + +This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers: + +```ts +interface ModalRendererProps { + title: string; + children: React.ReactElement; +} +``` + +Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
  • ` children. + +You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). + +### Style Props {/*typing-style-props*/} + +When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor. + +```ts +interface MyComponentProps { + style: React.CSSProperties; +} +``` + +## Further learning {/*further-learning*/} + +This guide has covered the basics of using TypeScript with React, but there is a lot more to learn. +Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript. + +We recommend the following resources: + + - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. + + - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth. + + - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. + + - [TypeScript Community Discord](discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. \ No newline at end of file diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index 1e23c8d3d..9289f2454 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -184,7 +184,7 @@ const nextPosition = {}; nextPosition.x = e.clientX; nextPosition.y = e.clientY; setPosition(nextPosition); -```` +``` In fact, it is completely equivalent to writing this: diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 05f053be2..a3b33d3a7 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -1438,7 +1438,7 @@ It would be nice if there was a way to tell React that when `savedContact.id` is -Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditContact` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact. +Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditForm` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact. diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 343823aa4..17fa01e98 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -211,7 +211,7 @@ When a child component needs some data from a parent, [pass it by props](/learn/ #### Components all the way down {/*components-all-the-way-down*/} -Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. +Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 9121e1d78..d91bc20c6 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -133,7 +133,7 @@ import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render(); -```` +``` Usually, you only need to run this code once at startup. It will: @@ -395,7 +395,7 @@ root.render(App); // ✅ Correct: is a component. root.render(); -```` +``` Or if you pass a function to `root.render`, instead of the result of calling it: diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index c875560da..cf77a81ac 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -107,7 +107,7 @@ Calling `root.unmount` will unmount all the components in the root and "detach" #### Returns {/*root-unmount-returns*/} -`render` returns `null`. +`root.unmount` returns `undefined`. #### Caveats {/*root-unmount-caveats*/} @@ -127,7 +127,7 @@ If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/cl import { hydrateRoot } from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); -```` +``` This will hydrate the server HTML inside the browser DOM node with the React component for your app. Usually, you will do it once at startup. If you use a framework, it might do this behind the scenes for you. diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index ca16b6a6e..d3cc4d5b9 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -96,7 +96,7 @@ These standard DOM props are also supported for all built-in components: * `onDragStartCapture`: A version of `onDragStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) * [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when something is dropped on a valid drop target. * `onDropCapture`: A version of `onDrop` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) -* `onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element lost focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles. +* `onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element receives focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles. * `onFocusCapture`: A version of `onFocus` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) * [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element programmatically captures a pointer. * `onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) @@ -149,14 +149,13 @@ These standard DOM props are also supported for all built-in components: * [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): A [`WheelEvent` handler](#wheelevent-handler) function. Fires when the user rotates a wheel button. * `onWheelCapture`: A version of `onWheel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) * [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the element role explicitly for assistive technologies. -nt. * [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example `} right={} />`. * [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): A boolean or null. If explicitly set to `true` or `false`, enables or disables spellchecking. * [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): A number. Overrides the default Tab button behavior. [Avoid using values other than `-1` and `0`.](https://www.tpgi.com/using-the-tabindex-attribute/) * [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title): A string. Specifies the tooltip text for the element. * [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate): Either `'yes'` or `'no'`. Passing `'no'` excludes the element content from being translated. -You can also pass custom attributes as props, for example `mycustomprop="someValue".` This can be useful when integrating with third-party libraries. The custom attribute name must be lowercase and must not start with `on`. The value will be converted to a string. If you pass `null` or `undefined`, the custom attribute will be removed. +You can also pass custom attributes as props, for example `mycustomprop="someValue"`. This can be useful when integrating with third-party libraries. The custom attribute name must be lowercase and must not start with `on`. The value will be converted to a string. If you pass `null` or `undefined`, the custom attribute will be removed. These events fire only for the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) elements: @@ -169,7 +168,6 @@ These events fire only for the [``](https://developer.mozilla.org/en-US/ * [`onCancel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event): An [`Event` handler](#event-handler) function. Fires when the user tries to dismiss the dialog. * `onCancelCapture`: A version of `onCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) -capture-phase-events) * [`onClose`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event): An [`Event` handler](#event-handler) function. Fires when a dialog has been closed. * `onCloseCapture`: A version of `onClose` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) @@ -177,7 +175,6 @@ These events fire only for the [`
    `](https://developer.mozilla.org/en-US * [`onToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event): An [`Event` handler](#event-handler) function. Fires when the user toggles the details. * `onToggleCapture`: A version of `onToggle` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) -capture-phase-events) These events fire for [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`