Skip to content

Commit 632a692

Browse files
rayonnunesrayonnunes
authored
Merge branch 'main' into main
2 parents 2d6b8c0 + 0d82feb commit 632a692

File tree

11 files changed

+707
-10
lines changed

11 files changed

+707
-10
lines changed

‎src/content/learn/rendering-lists.md

Lines changed: 2 additions & 0 deletions
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
}];

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

Lines changed: 4 additions & 4 deletions
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>

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

Lines changed: 1 addition & 1 deletion
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

‎src/content/reference/react/StrictMode.md

Lines changed: 12 additions & 4 deletions
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;

‎src/content/reference/react/index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ React-dom contém recursos que são suportados apenas por aplicativos da web (qu
2929
* [APIs do cliente](/reference/react-dom/client) - As APIs `react-dom/client` permitem renderizar componentes do React no cliente (no navegador).
3030
* [APIs de servidor](/reference/react-dom/server) - As APIs `react-dom/server` permitem renderizar componentes React para HTML no servidor.
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) - Exportado do pacote `react`, mas não recomendado para uso em código recém-escrito.

0 commit comments

Comments
 (0)