Skip to content

Commit dc97a46

Browse files
authored
Merge pull request #552 from reactjs/copy/createFactory
Translation of the "createFactory" page
2 parents 05f7c50 + 036b3ae commit dc97a46

File tree

2 files changed

+43
-42
lines changed

2 files changed

+43
-42
lines changed

TRANSLATORS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
101101
<li><a href="https://fr.react.dev/reference/react-dom/server/renderToStaticNodeStream"><code>renderToStaticNodeStream</code></a></li>
102102
<li><a href="https://fr.react.dev/reference/react/legacy">API React historique</a></li>
103103
<li><a href="https://fr.react.dev/reference/react/createElement"><code>createElement</code></a></li>
104+
<li><a href="https://fr.react.dev/reference/react/createFactory"><code>createFactory</code></a></li>
104105
</ul>
105106
</td>
106107
</tr>

src/content/reference/react/createFactory.md

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ title: createFactory
44

55
<Deprecated>
66

7-
This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
7+
Cette API sera retirée d'une future version majeure de React. [Découvrez les alternatives](#alternatives).
88

99
</Deprecated>
1010

1111
<Intro>
1212

13-
`createFactory` lets you create a function that produces React elements of a given type.
13+
`createFactory` vous permet de créer une fonction qui produira ensuite des éléments React d'un type prédéfini.
1414

1515
```js
1616
const factory = createFactory(type)
@@ -22,57 +22,57 @@ const factory = createFactory(type)
2222

2323
---
2424

25-
## Reference {/*reference*/}
25+
## Référence {/*reference*/}
2626

2727
### `createFactory(type)` {/*createfactory*/}
2828

29-
Call `createFactory(type)` to create a factory function which produces React elements of a given `type`.
29+
Appelez `createFactory(type)` pour créer une fonction *factory* qui produira ensuite des éléments React du `type` passé.
3030

3131
```js
3232
import { createFactory } from 'react';
3333

3434
const button = createFactory('button');
3535
```
3636

37-
Then you can use it to create React elements without JSX:
37+
Vous pouvez alors l'utiliser pour créer des éléments React sans recourir à JSX :
3838

3939
```js
4040
export default function App() {
4141
return button({
4242
onClick: () => {
43-
alert('Clicked!')
43+
alert('Cliqué !')
4444
}
45-
}, 'Click me');
45+
}, 'Cliquez ici');
4646
}
4747
```
4848

49-
[See more examples below.](#usage)
49+
[Voir d'autres exemples ci-dessous](#usage).
5050

51-
#### Parameters {/*parameters*/}
51+
#### Paramètres {/*parameters*/}
5252

53-
* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)).
53+
* `type` : l'argument `type` doit être un type de composant React valide. Par exemple, ce pourrait être un nom de balise (tel que `'div'` ou `'span'`) ou un composant React (une fonction, une classe ou un composant spécial comme un [`Fragment`](/reference/react/Fragment)).
5454

55-
#### Returns {/*returns*/}
55+
#### Valeur renvoyée {/*returns*/}
5656

57-
Returns a factory function. That factory function receives a `props` object as the first argument, followed by a list of `...children` arguments, and returns a React element with the given `type`, `props` and `children`.
57+
Renvoie une fonction *factory*. Cette fonction *factory* reçoit un objet `props` comme premier argument, suivi par une liste d'arguments `...children`, et renvoie un élément React avec les `type`, `props` et `children` passés.
5858

5959
---
6060

61-
## Usage {/*usage*/}
61+
## Utilisation {/*usage*/}
6262

63-
### Creating React elements with a factory {/*creating-react-elements-with-a-factory*/}
63+
### Créer des éléments React avec une *factory* {/*creating-react-elements-with-a-factory*/}
6464

65-
Although most React projects use [JSX](/learn/writing-markup-with-jsx) to describe the user interface, JSX is not required. In the past, `createFactory` used to be one of the ways you could describe the user interface without JSX.
65+
Même si la majorité des projets React utilisent [JSX](/learn/writing-markup-with-jsx) pour décrire leurs interfaces utilisateurs (UI), JSX n'est pas obligatoire. Autrefois, une des manières de décrire l'UI sans recourir à JSX consistait à utiliser `createFactory`.
6666

67-
Call `createFactory` to create a *factory function* for a specific element type like `'button'`:
67+
Appelez `createFactory` pour créer une *fonction factory* calée sur un type d'élément spécifique, par exemple la balise native `'button'` :
6868

6969
```js
7070
import { createFactory } from 'react';
7171

7272
const button = createFactory('button');
7373
```
7474

75-
Calling that factory function will produce React elements with the props and children you have provided:
75+
En appelant cette fonction *factory*, vous obtiendrez des éléments React avec les props et enfants que vous aurez fournis :
7676

7777
<Sandpack>
7878

@@ -84,23 +84,23 @@ const button = createFactory('button');
8484
export default function App() {
8585
return button({
8686
onClick: () => {
87-
alert('Clicked!')
87+
alert('Cliqué !')
8888
}
89-
}, 'Click me');
89+
}, 'Cliquez ici');
9090
}
9191
```
9292

9393
</Sandpack>
9494

95-
This is how `createFactory` was used as an alternative to JSX. However, `createFactory` is deprecated, and you should not call `createFactory` in any new code. See how to migrate away from `createFactory` below.
95+
Voilà comment on utilisait `createFactory` au lieu de JSX. Ceci dit, `createFactory` est dépréciée, et vous ne devriez pas utiliser `createFactory` dans du nouveau code. Découvrez ci-dessous comment retirer les appels à `createFactory` de votre code.
9696

9797
---
9898

9999
## Alternatives {/*alternatives*/}
100100

101-
### Copying `createFactory` into your project {/*copying-createfactory-into-your-project*/}
101+
### Copier `createFactory` dans votre projet {/*copying-createfactory-into-your-project*/}
102102

103-
If your project has many `createFactory` calls, copy this `createFactory.js` implementation into your project:
103+
Si votre projet à de nombreux appels à `createFactory`, copiez cette implémentation alternative `createFactory.js` dans votre base de code :
104104

105105
<Sandpack>
106106

@@ -112,9 +112,9 @@ const button = createFactory('button');
112112
export default function App() {
113113
return button({
114114
onClick: () => {
115-
alert('Clicked!')
115+
alert('Cliqué !')
116116
}
117-
}, 'Click me');
117+
}, 'Cliquez ici');
118118
}
119119
```
120120

@@ -128,13 +128,13 @@ export function createFactory(type) {
128128

129129
</Sandpack>
130130

131-
This lets you keep all of your code unchanged except the imports.
131+
Ça vous permettra de conserver votre code intact, à l'exception des imports.
132132

133133
---
134134

135-
### Replacing `createFactory` with `createElement` {/*replacing-createfactory-with-createelement*/}
135+
### Remplacer `createFactory` par `createElement` {/*replacing-createfactory-with-createelement*/}
136136

137-
If you have a few `createFactory` calls that you don't mind porting manually, and you don't want to use JSX, you can replace every call a factory function with a [`createElement`](/reference/react/createElement) call. For example, you can replace this code:
137+
Si vous n'avez que quelques appels à `createFactory` et que vous voulez bien les migrer manuellement, sans pour autant recourir à JSX, vous pouvez remplacer chaque appel à une fonction *factory* par un appel à [`createElement`](/reference/react/createElement). Par exemple, vous pouvez remplacer ce code :
138138

139139
```js {1,3,6}
140140
import { createFactory } from 'react';
@@ -144,13 +144,13 @@ const button = createFactory('button');
144144
export default function App() {
145145
return button({
146146
onClick: () => {
147-
alert('Clicked!')
147+
alert('Cliqué !')
148148
}
149-
}, 'Click me');
149+
}, 'Cliquez ici ');
150150
}
151151
```
152152

153-
with this code:
153+
…par ce code :
154154

155155

156156
```js {1,4}
@@ -159,13 +159,13 @@ import { createElement } from 'react';
159159
export default function App() {
160160
return createElement('button', {
161161
onClick: () => {
162-
alert('Clicked!')
162+
alert('Cliqué !')
163163
}
164-
}, 'Click me');
164+
}, 'Cliquez ici');
165165
}
166166
```
167167

168-
Here is a complete example of using React without JSX:
168+
Voici un exemple complet d'utilisation de React sans JSX :
169169

170170
<Sandpack>
171171

@@ -175,29 +175,29 @@ import { createElement } from 'react';
175175
export default function App() {
176176
return createElement('button', {
177177
onClick: () => {
178-
alert('Clicked!')
178+
alert('Cliqué !')
179179
}
180-
}, 'Click me');
180+
}, 'Cliquez ici');
181181
}
182182
```
183183

184184
</Sandpack>
185185

186186
---
187187

188-
### Replacing `createFactory` with JSX {/*replacing-createfactory-with-jsx*/}
188+
### Remplacer `createFactory` par JSX {/*replacing-createfactory-with-jsx*/}
189189

190-
Finally, you can use JSX instead of `createFactory`. This is the most common way to use React:
190+
Pour finir, vous pouvez utiliser JSX plutôt que `createFactory`. C'est la façon la plus courante d'utiliser React :
191191

192192
<Sandpack>
193193

194194
```js App.js
195195
export default function App() {
196196
return (
197197
<button onClick={() => {
198-
alert('Clicked!');
198+
alert('Cliqué !');
199199
}}>
200-
Click me
200+
Cliquez ici
201201
</button>
202202
);
203203
};
@@ -207,7 +207,7 @@ export default function App() {
207207

208208
<Pitfall>
209209

210-
Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`:
210+
Il peut arriver que votre code existant passe une variable comme `type` plutôt qu'une constante du genre `'button'` :
211211

212212
```js {3}
213213
function Heading({ isSubheading, ...props }) {
@@ -217,7 +217,7 @@ function Heading({ isSubheading, ...props }) {
217217
}
218218
```
219219

220-
To do the same in JSX, you need to rename your variable to start with an uppercase letter like `Type`:
220+
Pour y parvenir en JSX, vous devez renommer votre variable pour qu'elle démarre par une lettre majuscule, comme par exemple `Type` :
221221

222222
```js {2,3}
223223
function Heading({ isSubheading, ...props }) {
@@ -226,6 +226,6 @@ function Heading({ isSubheading, ...props }) {
226226
}
227227
```
228228

229-
Otherwise React will interpret `<type>` as a built-in HTML tag because it is lowercase.
229+
Dans le cas contraire, React interprèterait `<type>` comme une balise HTML native, parce qu'elle serait tout en minuscules.
230230

231231
</Pitfall>

0 commit comments

Comments
 (0)