Merge branch 'main' into translate-api-pureComponent

Author: Radapls

beta/public/images/team/acdlite.jpg

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconLink = memo<JSX.IntrinsicElements['svg']>(function IconLink(
+  props
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.33em"
+      height="1.33em"
+      viewBox="0 -2 24 24"
+      fill="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+      />
+    </svg>
+  );
+});

beta/public/images/team/bvaughn.jpg

@@ -125,12 +125,13 @@ export function Footer() {
               <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md">
                 Code of Conduct
               </FooterLink>
-              <FooterLink href="/community/acknowledgements">
+              <FooterLink href="/learn/acknowledgements">
                 Acknowledgements
               </FooterLink>
-              <FooterLink href="/community/meet-the-team">
-                Meet the Team
+              <FooterLink href="/learn/docs-contributors">
+                Docs Contributors
               </FooterLink>
+              <FooterLink href="/learn/meet-the-team">Meet the Team</FooterLink>
               <FooterLink href="https://reactjs.org/blog">Blog</FooterLink>
               {/* <FooterLink href="/">Community Resources</FooterLink> */}
             </div>

beta/public/images/team/gaearon.jpg

@@ -29,6 +29,7 @@ import {IconNavArrow} from '../Icon/IconNavArrow';
 import ButtonLink from 'components/ButtonLink';
 import {TocContext} from './TocContext';
 import type {Toc, TocItem} from './TocContext';
+import {TeamMember} from './TeamMember';
 
 function CodeStep({children, step}: {children: any; step: number}) {
   return (
@@ -398,6 +399,7 @@ export const MDXComponents = {
   Recap,
   Recipes,
   Sandpack,
+  TeamMember,
   TerminalBlock,
   YouWillLearn,
   YouWillLearnCard,

beta/public/images/team/huxpro.jpg

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+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';
+
+interface TeamMemberProps {
+  name: string;
+  title: string;
+  permalink: string;
+  children: React.ReactNode;
+  photo: string;
+  twitter?: string;
+  github?: string;
+  personal?: string;
+}
+
+// TODO: good alt text for images/links
+export function TeamMember({
+  name,
+  title,
+  permalink,
+  children,
+  photo,
+  github,
+  twitter,
+  personal,
+}: TeamMemberProps) {
+  if (name == null || title == null || permalink == null || children == null) {
+    throw new Error(
+      'Expected name, title, permalink, and children for ' + name ??
+        title ??
+        permalink ??
+        'unknown'
+    );
+  }
+  return (
+    <div className="pb-6 sm:pb-10">
+      <div className="flex flex-col sm:flex-row height-auto">
+        <div
+          className="hidden sm:block basis-2/5 rounded overflow-hidden relative"
+          style={{width: 300, height: 250}}>
+          <Image src={photo} layout="fill" objectFit="cover" alt={name} />
+        </div>
+        <div
+          style={{minHeight: 300}}
+          className="block w-full sm:hidden flex-grow basis-2/5 rounded overflow-hidden relative">
+          <Image src={photo} layout="fill" objectFit="cover" alt={name} />
+        </div>
+        <div className="pl-0 sm:pl-6 basis-3/5 items-start">
+          <H3 className="mb-1 sm:my-0" id={permalink}>
+            {name}
+          </H3>
+          {title && <div>{title}</div>}
+          {children}
+          <div className="sm:flex sm:flex-row">
+            {twitter && (
+              <div className="mr-4">
+                <ExternalLink
+                  aria-label="React on Twitter"
+                  href={`https://twitter.com/${twitter}`}
+                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  <IconTwitter className="pr-2" />
+                  {twitter}
+                </ExternalLink>
+              </div>
+            )}
+            {github && (
+              <div className="mr-4">
+                <ExternalLink
+                  aria-label="GitHub Profile"
+                  href={`https://github.com/${github}`}
+                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  <IconGitHub className="pr-2" /> {github}
+                </ExternalLink>
+              </div>
+            )}
+            {personal && (
+              <ExternalLink
+                aria-label="Personal Site"
+                href={`https://${personal}`}
+                className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                <IconLink className="pr-2" /> {personal}
+              </ExternalLink>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

beta/public/images/team/jasonbonta.jpg

@@ -233,7 +233,7 @@ It is uncommon to call `render` multiple times. Usually, you'll [update state](/
 ---
 ## Reference {/*reference*/}
 
-### `createRoot(domNode, options?)` {/*create-root*/}
+### `createRoot(domNode, options?)` {/*createroot*/}
 
 Call `createRoot` to create a React root for displaying content inside a browser DOM element.
 
@@ -254,13 +254,13 @@ An app fully built with React will usually only have one `createRoot` call for i
 
 #### Parameters {/*parameters*/}
 
-
 * `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content.
 
-* **optional** `options`: A object contain options for this React root.
+* **optional** `options`: An object with options for this React root.
+
+  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/apis/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
 
-  * `onRecoverableError`: optional callback called when React automatically recovers from errors.
-  * `identifierPrefix`: optional prefix React uses for IDs generated by [`useId`.](/apis/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
 #### Returns {/*returns*/}
 
 `createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)