From 56397680f0a8318037a4c7f48782d59914d3171c Mon Sep 17 00:00:00 2001 From: adil <68734155+adevinwild@users.noreply.github.com> Date: Thu, 1 Jun 2023 18:38:55 +0200 Subject: [PATCH 1/4] feat: :globe_with_meridians: Translation of the home page of `Built-in React APIs` in french. --- src/content/reference/react/apis.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index 9c1437870..b46dd46e8 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -1,17 +1,18 @@ --- -title: "Built-in React APIs" +title: "APIs React intégrées" --- -In addition to [Hooks](/reference/react) and [Components](/reference/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs. +En plus des [Hooks](/reference/react) et des [Composants](/reference/react/components), le package `react` propose également d'autres API utiles pour la définition des composants. Cette page répertorie toutes les autres API React modernes. + --- -* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) -* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef) -* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. -* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) -* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) +- [`createContext`](/reference/react/createContext) vous permet de définir et de fournir un contexte aux composants enfants. Utilisé conjointement avec [`useContext`](/reference/react/useContext). +- [`forwardRef`](/reference/react/forwardRef) permet à votre composant d'exposer un nœud DOM en tant que référence (ref) à son parent. Utilisé conjointement avec [`useRef`](/reference/react/useRef). +- [`lazy`](/reference/react/lazy) vous permet de différer le chargement du code d'un composant jusqu'à ce qu'il soit rendu pour la première fois. +- [`memo`](/reference/react/memo) permet à votre composant de sauter les réaffichages avec les mêmes props. Utilisé conjointement avec [`useMemo`](/reference/react/useMemo) et [`useCallback`](/reference/react/useCallback). +- [`startTransition`](/reference/react/startTransition) vous permet de marquer une mise à jour d'état comme non urgente. Similaire à [`useTransition`](/reference/react/useTransition). From b0df2f3d16d709cc1824aee096716e83c3913e2b Mon Sep 17 00:00:00 2001 From: adil <68734155+adevinwild@users.noreply.github.com> Date: Thu, 1 Jun 2023 18:39:20 +0200 Subject: [PATCH 2/4] feat: :globe_with_meridians: Translation of the `createContext` page in french --- src/content/reference/react/createContext.md | 84 +++++++++++--------- 1 file changed, 46 insertions(+), 38 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index a653633c1..2186be236 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -4,7 +4,8 @@ title: createContext -`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read. +`createContext` vous permet de créer un [contexte](/learn/passing-data-deeply-with-context) que les composants peuvent partager ou lire. + ```js const SomeContext = createContext(defaultValue) @@ -16,11 +17,11 @@ const SomeContext = createContext(defaultValue) --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `createContext(defaultValue)` {/*createcontext*/} -Call `createContext` outside of any components to create a context. +Utilisez `createContext` en dehors de tout composant afin de créer un contexte. ```js import { createContext } from 'react'; @@ -28,26 +29,26 @@ import { createContext } from 'react'; const ThemeContext = createContext('light'); ``` -[See more examples below.](#usage) +[Voir d'autres exemples ci-dessous.](#usage) -#### Parameters {/*parameters*/} +#### Paramètres {/*parameters*/} -* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time. +* `defaultValue` : Ce sera la valeur uniquement utilisé lorsqu'il n'y a pas de contexte correspondant au-dessus du composant qui lit le contexte. Si vous n'avez pas de valeur par défaut, spécifiez `null`. La valeur par défaut est un "dernier recours". Elle est statique et ne change jamais au fil du temps. -#### Returns {/*returns*/} +#### Retours {/*returns*/} -`createContext` returns a context object. +`createContext` retourne un objet représentant le context. -**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: +**L'objet contexte lui-même ne contient aucune information.** Il représente _le_ contexte que les autres composants lisent ou partagent. Typiquement, vous utiliserez [`SomeContext.Provider`](#provider) dans les composants au-dessus afin de spécifier la valeur du contexte, et vous appellerez [`useContext(SomeContext)`](/reference/react/useContext) dans les composants en-dessous afin de lire la valeur du contexte. L'objet contexte a quelques propriétés : -* `SomeContext.Provider` lets you provide the context value to components. -* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` vous permet de fournir la valeur du contexte aux composants enfants. +* `SomeContext.Consumer` est une alternative et une manière rarement utilisée afin de lire la valeur d'un contexte. --- ### `SomeContext.Provider` {/*provider*/} -Wrap your components into a context provider to specify the value of this context for all components inside: +Enveloppez vos composants dans un Provider afin de répartir sa valeur pour tous les composants à l'intérieur : ```js function App() { @@ -63,17 +64,17 @@ function App() { #### Props {/*provider-props*/} -* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it. - +* `value`: La valeur que vous souhaitez passer à tous les composants lisant ce contexte à l'intérieur d'un Provider, peu importe la profondeur. La valeur du contexte peut être de n'importe quel type. Un composant appelant [`useContext(SomeContext)`](/reference/react/useContext) à l'intérieur d'un Provider reçoit la `value` du Provider correspondant le plus proche qui l'englobe. --- ### `SomeContext.Consumer` {/*consumer*/} -Before `useContext` existed, there was an older way to read context: +Avant l'existence de `useContext`, il existait une ancienne méthode pour lire un contexte : + ```js function Button() { - // 🟡 Legacy way (not recommended) + // 🟡 Ancienne méthode (non recommandée) return ( {theme => ( @@ -83,12 +84,10 @@ function Button() { ); } ``` - -Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:** - +Bien que cette ancienne méthode fonctionne toujours, **privilégiez la lecture d'un contexte à l'aide de [`useContext()`](/reference/react/useContext) dans du nouveau code :** ```js function Button() { - // ✅ Recommended way + // ✅ Méthode recommandée const theme = useContext(ThemeContext); return