Skip to content

Commit 7f6ed12

Browse files
react-translations-botreact-translations-bot
committed
Merge branch 'main' of https://github.com/reactjs/react.dev into sync-7bdbab14
2 parents daa886e + 7bdbab1 commit 7f6ed12

12 files changed

+709
-12
lines changed

Diff for: ‎src/content/learn/rendering-lists.md

+2
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,11 @@ const people = [{
113113
name: 'Mohammad Abdus Salam',
114114
profession: 'physicist',
115115
}, {
116+
id: 3,
116117
name: 'Percy Lavon Julian',
117118
profession: 'chemist',
118119
}, {
120+
id: 4,
119121
name: 'Subrahmanyan Chandrasekhar',
120122
profession: 'astrophysicist',
121123
}];

Diff for: ‎src/content/learn/typescript.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -435,7 +435,7 @@ interface ModalRendererProps {
435435

436436
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 `<li>` children.
437437

438-
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).
438+
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).
439439

440440
### Style Props {/*typing-style-props*/}
441441

@@ -456,7 +456,7 @@ We recommend the following resources:
456456

457457
- [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features.
458458

459-
- [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth.
459+
- [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth.
460460

461461
- [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.
462462

Diff for: ‎src/content/reference/react-dom/components/link.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ Props that are **not recommended** for use with React:
7979

8080
#### Special rendering behavior {/*special-rendering-behavior*/}
8181

82-
React will always place the DOM element corresponding to the `<link>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<link>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<link>` components itself.
82+
React will always place the DOM element corresponding to the `<link>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<link>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<link>` components itself.
8383

8484
There are a few exceptions to this:
8585

@@ -91,7 +91,7 @@ There are a few exceptions to this:
9191

9292
In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet"` in its props), React treats it specially in the following ways:
9393

94-
* The component that renders `<link>` will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading.
94+
* The component that renders `<link>` will [suspend](/reference/react/Suspense) while the stylesheet is loading.
9595
* 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.
9696

9797
There are two exception to this special behavior:
@@ -133,7 +133,7 @@ export default function BlogPage() {
133133

134134
### Linking to a stylesheet {/*linking-to-a-stylesheet*/}
135135

136-
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.
136+
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.
137137

138138
<Note>
139139
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 `<link>` 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() {
217217

218218
### Annotating specific items within the document with links {/*annotating-specific-items-within-the-document-with-links*/}
219219

220-
You can use the `<link>` 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 `<head>` but will place them like any other React component.
220+
You can use the `<link>` 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 `<head>` but will place them like any other React component.
221221

222222
```js
223223
<section itemScope>

Diff for: ‎src/content/reference/react-dom/components/style.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Props that are **not recommended** for use with React:
5252

5353
#### Special rendering behavior {/*special-rendering-behavior*/}
5454

55-
React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading.
55+
React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](/reference/react/Suspense) while the stylesheet is loading.
5656

5757
To opt into this behavior, provide the `href` and `precedence` props. React will de-duplicate styles if they have the same `href`. The precedence prop tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other.
5858

Diff for: ‎src/content/reference/react/StrictMode.md

+12-4
Original file line numberDiff line numberDiff line change
@@ -196,14 +196,16 @@ ul {
196196
margin: 0;
197197
list-style-type: none;
198198
height: 100%;
199+
display: flex;
200+
flex-wrap: wrap;
201+
padding: 10px;
199202
}
200203

201204
li {
202205
border: 1px solid #aaa;
203206
border-radius: 6px;
204207
float: left;
205208
margin: 5px;
206-
margin-bottom: 20px;
207209
padding: 5px;
208210
width: 70px;
209211
height: 100px;
@@ -283,14 +285,16 @@ ul {
283285
margin: 0;
284286
list-style-type: none;
285287
height: 100%;
288+
display: flex;
289+
flex-wrap: wrap;
290+
padding: 10px;
286291
}
287292

288293
li {
289294
border: 1px solid #aaa;
290295
border-radius: 6px;
291296
float: left;
292297
margin: 5px;
293-
margin-bottom: 20px;
294298
padding: 5px;
295299
width: 70px;
296300
height: 100px;
@@ -377,14 +381,16 @@ ul {
377381
margin: 0;
378382
list-style-type: none;
379383
height: 100%;
384+
display: flex;
385+
flex-wrap: wrap;
386+
padding: 10px;
380387
}
381388

382389
li {
383390
border: 1px solid #aaa;
384391
border-radius: 6px;
385392
float: left;
386393
margin: 5px;
387-
margin-bottom: 20px;
388394
padding: 5px;
389395
width: 70px;
390396
height: 100px;
@@ -467,14 +473,16 @@ ul {
467473
margin: 0;
468474
list-style-type: none;
469475
height: 100%;
476+
display: flex;
477+
flex-wrap: wrap;
478+
padding: 10px;
470479
}
471480

472481
li {
473482
border: 1px solid #aaa;
474483
border-radius: 6px;
475484
float: left;
476485
margin: 5px;
477-
margin-bottom: 20px;
478486
padding: 5px;
479487
width: 70px;
480488
height: 100px;

Diff for: ‎src/content/reference/react/index.md

+8
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ React-dom contains features that are only supported for web applications (which
2929
* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
3030
* [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
3131

32+
## Rules of React {/*rules-of-react*/}
33+
34+
React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications:
35+
36+
* [Components and Hooks must be pure](/reference/rules/components-and-hooks-must-be-pure) – Purity makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly.
37+
* [React calls Components and Hooks](/reference/rules/react-calls-components-and-hooks) – React is responsible for rendering components and hooks when necessary to optimize the user experience.
38+
* [Rules of Hooks](/reference/rules/rules-of-hooks) – Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
39+
3240
## Legacy APIs {/*legacy-apis*/}
3341

3442
* [Legacy APIs](/reference/react/legacy) - Exported from the `react` package, but not recommended for use in newly written code.

0 commit comments

Comments
 (0)