diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 5a26e057d..68426b4ca 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -113,9 +113,11 @@ const people = [{ name: 'Mohammad Abdus Salam', profession: 'physicist', }, { + id: 3, name: 'Percy Lavon Julian', profession: 'chemist', }, { + id: 4, name: 'Subrahmanyan Chandrasekhar', profession: 'astrophysicist', }]; diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index c2b1a9948..6f49c7656 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -435,7 +435,7 @@ interface ModalRendererProps { 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). +You can see 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*/} @@ -456,7 +456,7 @@ 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. + - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover 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. diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index fcbb9fab0..c3331d94c 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -79,7 +79,7 @@ Props that are **not recommended** for use with React: #### Special rendering behavior {/*special-rendering-behavior*/} -React will always place the DOM element corresponding to the `` component within the document’s ``, regardless of where in the React tree it is rendered. The `` is the only valid place for `` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `` components itself. +React will always place the DOM element corresponding to the `` component within the document’s ``, regardless of where in the React tree it is rendered. The `` is the only valid place for `` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `` components itself. There are a few exceptions to this: @@ -91,7 +91,7 @@ There are a few exceptions to this: In addition, if the `` is to a stylesheet (namely, it has `rel="stylesheet"` in its props), React treats it specially in the following ways: -* The component that renders `` will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading. +* The component that renders `` will [suspend](/reference/react/Suspense) while the stylesheet is loading. * If multiple components render links to the same stylesheet, React will de-duplicate them and only put a single link into the DOM. Two links are considered the same if they have the same `href` prop. There are two exception to this special behavior: @@ -133,7 +133,7 @@ export default function BlogPage() { ### Linking to a stylesheet {/*linking-to-a-stylesheet*/} -If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence. +If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence. When you want to use a stylesheet, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the stylesheet earlier than if you just render a `` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103). @@ -217,7 +217,7 @@ function Component() { ### Annotating specific items within the document with links {/*annotating-specific-items-within-the-document-with-links*/} -You can use the `` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `` but will place them like any other React component. +You can use the `` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `` but will place them like any other React component. ```js
    diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md index 238a26d8c..2c5d7b97b 100644 --- a/src/content/reference/react-dom/components/style.md +++ b/src/content/reference/react-dom/components/style.md @@ -52,7 +52,7 @@ Props that are **not recommended** for use with React: #### Special rendering behavior {/*special-rendering-behavior*/} -React can move `