You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
-4Lines changed: 0 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,11 +8,7 @@ Le 15 juin 2022 par [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](h
8
8
9
9
<Intro>
10
10
11
-
<<<<<<< HEAD
12
11
[React 18](/blog/2022/03/29/react-v18) a pris des années, mais il était porteur de précieuses leçons pour l'équipe React. Sa sortie était l'aboutissement de nombreuses années de recherche, en explorant de nouvelles voies. Certaines de ces tentatives ont réussi ; mais bien davantage se sont révélées des impasses qui nous ont toutefois fourni de nouvelles pistes. Une des leçons que nous en avons tirées, c'est qu'il est frustrant pour la communauté d'attendre la sortie de nouvelles fonctionnalités sans que nous communiquions sur nos travaux.
13
-
=======
14
-
[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
Copy file name to clipboardExpand all lines: src/content/learn/referencing-values-with-refs.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -284,11 +284,7 @@ Vous n'avez pas non plus à vous préoccuper [d'éviter les mutations](/learn/up
284
284
285
285
## Les refs et le DOM {/*refs-and-the-dom*/}
286
286
287
-
<<<<<<< HEAD
288
-
Vous pouvez faire pointer votre ref vers ce que vous voulez. Ceci dit, le cas le plus courant pour une ref consiste à accéder à un élément du DOM. C'est par exemple bien pratique pour gérer le focus programmatiquement. Quand vous passez une ref à la prop `ref` d'un élément en JSX, comme dans `<div ref={myRef}>`, React référencera l'élément DOM correspondant dans `myRef.current`. Vous pouvez en apprendre davantage dans [Manipuler le DOM avec des refs](/learn/manipulating-the-dom-with-refs).
289
-
=======
290
-
You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
291
-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
287
+
Vous pouvez faire pointer votre ref vers ce que vous voulez. Ceci dit, le cas le plus courant pour une ref consiste à accéder à un élément du DOM. C'est par exemple bien pratique pour gérer le focus programmatiquement. Quand vous passez une ref à la prop `ref` d'un élément en JSX, comme dans `<div ref={myRef}>`, React référencera l'élément DOM correspondant dans `myRef.current`. Lorsque l'élément sera retiré du DOM, React recalera `ref.current` à `null`. Vous pouvez en apprendre davantage dans [Manipuler le DOM avec des refs](/learn/manipulating-the-dom-with-refs).
Copy file name to clipboardExpand all lines: src/content/learn/rendering-lists.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1090,11 +1090,7 @@ Dans ce code, `<Recipe {...recipe} key={recipe.id} />` est un raccourci syntaxiq
1090
1090
1091
1091
#### Liste avec séparateur {/*list-with-a-separator*/}
1092
1092
1093
-
<<<<<<< HEAD
1094
-
Cet exemple affiche un célèbre haïku de Katsushika Hokusai, dont chaque ligne est enrobée par une balise `<p>`. Votre tâche consiste à insérer un séparateur `<hr />` entre chaque paragraphe. La structure finale devrait ressembler à ceci :
1095
-
=======
1096
-
This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
1097
-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
1093
+
Cet exemple affiche un célèbre haïku de Tachibana Hokushi, dont chaque ligne est enrobée par une balise `<p>`. Votre tâche consiste à insérer un séparateur `<hr />` entre chaque paragraphe. La structure finale devrait ressembler à ceci :
Copy file name to clipboardExpand all lines: src/content/learn/start-a-new-react-project.md
+3-18Lines changed: 3 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,11 +26,7 @@ npx create-next-app@latest
26
26
27
27
Si Next.js est nouveau pour vous, consultez le [tutoriel de Next.js](https://nextjs.org/learn/foundations/about-nextjs).
28
28
29
-
<<<<<<< HEAD
30
-
Next.js est maintenu par [Vercel](https://vercel.com/). Vous pouvez [déployer une appli Next.js](https://nextjs.org/docs/deployment) sur tout hébergement *serverless* ou Node.js, ou sur votre propre serveur. Les [applis Next.js pleinement statiques](https://nextjs.org/docs/advanced-features/static-html-export) peuvent être déployées sur tout hébergement statique.
31
-
=======
32
-
Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server.
33
-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
29
+
Next.js est maintenu par [Vercel](https://vercel.com/). Vous pouvez [déployer une appli Next.js](https://nextjs.org/docs/app/building-your-application/deploying) sur tout hébergement *serverless* ou Node.js, ou sur votre propre serveur. Next.js permet également un [export statique](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) qui ne nécessite pas de serveur.
34
30
35
31
### Remix {/*remix*/}
36
32
@@ -93,20 +89,9 @@ Ces fonctionnalités se rapprochent chaque jour un peu plus de la production, et
93
89
94
90
### Next.js (App Router) {/*nextjs-app-router*/}
95
91
96
-
<<<<<<< HEAD
97
-
**[L'*App Router* de Next.js](https://beta.nextjs.org/docs/getting-started) est une refonte intégrale des API de Next.js qui vise à concrétiser la vision d'architecture full-stack portée par l'équipe de React.** Il vous permet de charger des données dans des composants asynchrones qui s’exécutent sur le serveur ou pendant le *build*.
92
+
**[L'*App Router* de Next.js](https://nextjs.org/docs) est une refonte intégrale des API de Next.js qui vise à concrétiser la vision d'architecture full-stack portée par l'équipe de React.** Il vous permet de charger des données dans des composants asynchrones qui s’exécutent sur le serveur ou pendant le *build*.
98
93
99
-
Next.js est maintenu par [Vercel](https://vercel.com/). Vous pouvez [déployer une appli Next.js](https://nextjs.org/docs/deployment) sur tout hébergement Node.js ou *serverless*, ou sur votre propre serveur. Next.js également prend en charge [l’exportation statique](https://beta.nextjs.org/docs/configuring/static-export) qui ne requiert pas de serveur.
100
-
<Pitfall>
101
-
102
-
L’App Router de Next.js est **actuellement en beta et n’est pas recommandé pour la production** (en mars 2023). Pour l’expérimenter dans un projet Next.js existant, [suivez ce guide de migration progressive](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
103
-
104
-
</Pitfall>
105
-
=======
106
-
**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.
107
-
108
-
Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
109
-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
94
+
Next.js est maintenu par [Vercel](https://vercel.com/). Vous pouvez [déployer une appli Next.js](https://nextjs.org/docs/app/building-your-application/deploying) sur tout hébergement Node.js ou *serverless*, ou sur votre propre serveur. Next.js permet également un [export statique](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) qui ne requiert pas de serveur.
Copy file name to clipboardExpand all lines: src/content/learn/tutorial-tic-tac-toe.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2081,17 +2081,17 @@ export default function Game() {
2081
2081
}
2082
2082
```
2083
2083
2084
-
<<<<<<< HEAD
2085
-
Vous pouvez voir le résultat ci-dessous. Notez que vous devriez voir une erreur dans la console des outils de développement, qui dit ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` *(« Avertissement : chaque enfant d'une liste devrait avoir une prop "key" unique. Vérifiez la méthode de rendu de `Game`. », NdT.)* Vous la corrigerez dans la prochaine section.
2086
-
=======
2087
-
You can see what your code should look like below. Note that you should see an error in the developer tools console that says:
2084
+
Vous pouvez voir le résultat ci-dessous. Notez que vous devriez voir une erreur dans la console des outils de développement, qui dit :
2088
2085
2089
2086
<ConsoleBlock level="warning">
2090
-
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.
2087
+
2088
+
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.
2089
+
2091
2090
</ConsoleBlock>
2092
-
2093
-
You'll fix this error in the next section.
2094
-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
2091
+
2092
+
*(« Avertissement : chaque enfant d'une liste devrait avoir une prop "key" unique. Vérifiez la méthode de rendu de `Game`. », NdT.)*
*`id` : la prop textuelle `id` du `<Profiler>` qui vient de boucler son rendu. Elle vous permet d’identifier quelle partie de l’arbre est finalisée lorsque vous utilisez plusieurs profileurs.
58
57
*`phase` : `"mount"`, `"update"` ou `"nested-update"`. Ça vous permet de savoir si l’arbre vient d’être monté pour la première fois ou a fait un nouveau rendu suite à un changement dans les props, l’état ou les hooks.
59
58
*`actualDuration` : la durée en millisecondes du rendu du `<Profiler>` et de ses enfants pour la mise à jour concernée. Ça indique à quel point vos descendants profitent de la mémoïsation (notamment [`memo`](/reference/react/memo) et [`useMemo`](/reference/react/useMemo)). Idéalement, cette valeur devrait décroître de façon significative après le montage initial car la plupart des descendants ne referont un rendu que si leurs props changent.
60
59
*`baseDuration` : une estimation de la durée en millisecondes que prendrait un rendu complet du `<Profiler>` et de ses descendants, sans aucune optimisation. Elle est calculée en ajoutant les durées de rendu les plus récentes de chaque composant concerné. Cette valeur représente le coût maximal de rendu (c’est-à-dire le temps initial de montage sans mémoïsation). Comparez-la avec `actualDuration` pour déterminer si la mémoïsation fonctionne.
61
60
*`startTime` : un horodatage numérique du début de la mise à jour par React.
62
-
*`endTime` : un horodatage numérique de la fin de la mise à jour par React. Cette valeur est partagée par tous les profileurs d’une même phase de commit, ce qui permet si besoin de les grouper.
63
-
=======
64
-
*`id`: The string `id` prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
65
-
*`phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
66
-
*`actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
67
-
*`baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
68
-
*`startTime`: A numeric timestamp for when React began rendering the current update.
69
-
*`commitTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
70
-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
61
+
*`commitTime` : un horodatage numérique de la fin de la mise à jour par React. Cette valeur est partagée par tous les profileurs d’une même phase de commit, ce qui permet si besoin de les grouper.
Copy file name to clipboardExpand all lines: src/content/reference/react/useMemo.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -650,11 +650,7 @@ Dans cet exemple, le composant `List` est **artificiellement ralenti** pour que
650
650
651
651
Le changement d'onglet semble lent parce qu'elle force le `List` ralenti à refaire son rendu. On pouvait s'y attendre, puisque l'onglet a changé, vous devez donc refléter le nouveau choix de l'utilisateur à l'écran.
652
652
653
-
<<<<<<< HEAD
654
-
Essayez maintenant de basculer le thème. **Grâce à la combinaison de `useMemo` et [`memo`](/reference/react/memo), c'est rapide en dépit du ralenti artificiel !**`List` a évité un nouveau rendu parce que le tableau `visibleItems` n'a pas changé, dans la mesure où ni `todos` ni `tab` (les dépendances déclarées pour le `useMemo`) n'ont changé depuis le dernier rendu.
655
-
=======
656
-
Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
657
-
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
653
+
Essayez maintenant de basculer le thème. **Grâce à la combinaison de `useMemo` et [`memo`](/reference/react/memo), c'est rapide en dépit du ralenti artificiel !**`List` a évité un nouveau rendu parce que le tableau `visibleTodos` n'a pas changé, dans la mesure où ni `todos` ni `tab` (les dépendances déclarées pour le `useMemo`) n'ont changé depuis le dernier rendu.
0 commit comments