Skip to content

Commit

Permalink
merging all conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
react-translations-bot committed Sep 30, 2024
2 parents 53c0122 + fe37c42 commit 191e103
Show file tree
Hide file tree
Showing 26 changed files with 554 additions and 96 deletions.
12 changes: 6 additions & 6 deletions .github/workflows/analyze.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ jobs:
analyze:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3

- name: Set up node
uses: actions/setup-node@v1
uses: actions/setup-node@v3
with:
node-version: '20.x'

- name: Install dependencies
uses: bahmutov/[email protected]

- name: Restore next build
uses: actions/cache@v2
uses: actions/cache@v3
id: restore-build-cache
env:
cache-name: cache-next-build
Expand All @@ -41,7 +41,7 @@ jobs:
run: npx -p [email protected] report

- name: Upload bundle
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
path: .next/analyze/__bundle_analysis.json
name: bundle_analysis.json
Expand Down Expand Up @@ -73,7 +73,7 @@ jobs:
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare

- name: Upload analysis comment
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: analysis_comment.txt
path: .next/analyze/__bundle_analysis_comment.txt
Expand All @@ -82,7 +82,7 @@ jobs:
run: echo ${{ github.event.number }} > ./pr_number

- name: Upload PR number
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: pr_number
path: ./pr_number
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.5",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
"@docsearch/css": "^3.6.1",
"@docsearch/react": "^3.6.1",
"@headlessui/react": "^1.7.0",
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ export function Footer() {
<div
className="text-xs text-left rtl:text-right mt-2 pe-0.5"
dir="ltr">
&copy;{new Date().getFullYear()}
Copyright &copy; Meta Platforms, Inc
</div>
<div
className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
Expand Down
12 changes: 11 additions & 1 deletion src/components/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,17 @@ export function Search({
onOpen,
onClose,
searchParameters = {
hitsPerPage: 5,
hitsPerPage: 30,
attributesToHighlight: [
'hierarchy.lvl0',
'hierarchy.lvl1',
'hierarchy.lvl2',
'hierarchy.lvl3',
'hierarchy.lvl4',
'hierarchy.lvl5',
'hierarchy.lvl6',
'content',
],
},
}: SearchProps) {
useDocSearchKeyboardEvents({isOpen, onOpen, onClose});
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2023/03/16/introducing-react-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ Utilisez l'opérateur conditionnel (`cond ? a : b`) pour afficher ❌ si `isPack
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -308,7 +308,7 @@ export default function PackingList() {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked ? '' : ''}
{name} {isPacked ? '' : ''}
</li>
);
}
Expand Down
47 changes: 47 additions & 0 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse

## Conférences à venir {/*upcoming-conferences*/}

<<<<<<< HEAD
### React Nexus 2024 {/*react-nexus-2024*/}
July 04 & 05, 2024. Bangalore, India (In-person event)

Expand All @@ -30,6 +31,8 @@ August 12-13, 2024. Park City, UT, USA

[Site web](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)

=======
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
### React Universe Conf 2024 {/*react-universe-conf-2024*/}
September 5-6, 2024. Wrocław, Poland.

Expand All @@ -55,12 +58,56 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)

[Site web](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)

### reactjsday 2024 {/*reactjsday-2024*/}
October 25, 2024. In-person in Verona, Italy + online (hybrid event)

[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)

### React Advanced London 2024 {/*react-advanced-london-2024*/}
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)

[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)

### React Summit US 2024 {/*react-summit-us-2024*/}
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)

[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)

### React Africa 2024 {/*react-africa-2024*/}
November 29, 2024. In-person in Casablanca, Morocco (hybrid event)

[Site web](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)

<<<<<<< HEAD
## Conférences passées {/*past-conferences*/}
=======
### React Day Berlin 2024 {/*react-day-berlin-2024*/}
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)

## Past Conferences {/*past-conferences*/}
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA

[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)

### The Geek Conf 2024 {/*the-geek-conf-2024*/}
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)

### Chain React 2024 {/*chain-react-2024*/}
July 17-19, 2024. In-person in Portland, OR, USA

[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)

### React Nexus 2024 {/*react-nexus-2024*/}
July 04 & 05, 2024. Bangalore, India (In-person event)

[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### React Summit 2024 {/*react-summit-2024*/}
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
Expand Down
36 changes: 22 additions & 14 deletions src/content/learn/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,17 @@ export default function PackingList() {

</Sandpack>

<<<<<<< HEAD
Remarquez que certains composants `Item` ont leur prop `isPacked` à `true` plutôt qu'à `false`. Vous souhaitez ajouter une coche (✔) aux objets pour lesquels `isPacked={true}`.
=======
Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`.
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
Vous pourriez écrire ça sous forme [d'instruction `if`/`else`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/if...else), comme ceci :

```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -70,7 +74,7 @@ Si la prop `isPacked` vaut `true`, ce code **renverra un arbre JSX différent**.
```js
function Item({ name, isPacked }) {
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
}
Expand Down Expand Up @@ -159,7 +163,7 @@ En pratique, les composants ne renvoient pas souvent `null` parce que ça peut s
Dans l'exemple précédent, vous contrôliez quel arbre JSX renvoyer (si tant est qu'il y en ait un !) depuis le composant. Vous avez peut-être remarqué une légère duplication dans l'affichage produit. Ce JSX :

```js
<li className="item">{name} </li>
<li className="item">{name} </li>
```

est très similaire à
Expand All @@ -172,7 +176,7 @@ Les deux branches conditionnelles renvoient `<li className="item">...</li>` :

```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -187,7 +191,7 @@ Au lieu de ceci :

```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -197,12 +201,16 @@ Vous pouvez plutôt écrire ceci :
```js
return (
<li className="item">
{isPacked ? name + ' ' : name}
{isPacked ? name + ' ' : name}
</li>
);
```

<<<<<<< HEAD
Vous pouvez le lire comme suit : *« si `isPacked` est vrai, alors (`?`) affiche `name + ' ✔'`, sinon (`:`) affiche `name` »*.
=======
You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*.
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
<DeepDive>

Expand All @@ -222,7 +230,7 @@ function Item({ name, isPacked }) {
<li className="item">
{isPacked ? (
<del>
{name + ' '}
{name + ' '}
</del>
) : (
name
Expand Down Expand Up @@ -265,7 +273,7 @@ Un autre raccourci que vous rencontrerez souvent utilise [l'opérateur ET logiqu
```js
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
```
Expand All @@ -280,7 +288,7 @@ Le voici en action :
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -337,7 +345,7 @@ Utilisez une instruction `if` pour réaffecter une expression JSX à `itemConten

```js
if (isPacked) {
itemContent = name + " ";
itemContent = name + " ";
}
```

Expand All @@ -357,7 +365,7 @@ Ce style est certes le plus verbeux, mais au final le plus flexible. Le voici e
function Item({ name, isPacked }) {
let itemContent = name;
if (isPacked) {
itemContent = name + " ";
itemContent = name + " ";
}
return (
<li className="item">
Expand Down Expand Up @@ -401,7 +409,7 @@ function Item({ name, isPacked }) {
if (isPacked) {
itemContent = (
<del>
{name + " "}
{name + " "}
</del>
);
}
Expand Down Expand Up @@ -462,7 +470,7 @@ Utilisez l'opérateur conditionnel (`cond ? a : b`) pour afficher ❌ si `isPack
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -500,7 +508,7 @@ export default function PackingList() {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked ? '' : ''}
{name} {isPacked ? '' : ''}
</li>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/describing-the-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ Dans cet exemple, on utilise l'opérateur JavaScript `&&` pour afficher conditio
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down
8 changes: 4 additions & 4 deletions src/content/learn/react-compiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro
Prior to installing the compiler, you can first check to see if your codebase is compatible:

<TerminalBlock>
npx react-compiler-healthcheck@latest
npx react-compiler-healthcheck@experimental
</TerminalBlock>

This script will:
Expand All @@ -145,7 +145,7 @@ Found no usage of incompatible libraries.
React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.

<TerminalBlock>
npm install eslint-plugin-react-compiler
npm install eslint-plugin-react-compiler@experimental
</TerminalBlock>

Then, add it to your eslint config:
Expand Down Expand Up @@ -205,7 +205,7 @@ If you're starting a new project, you can enable the compiler on your entire cod
### Babel {/*usage-with-babel*/}

<TerminalBlock>
npm install babel-plugin-react-compiler
npm install babel-plugin-react-compiler@experimental
</TerminalBlock>

The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
Expand Down Expand Up @@ -260,7 +260,7 @@ Next.js has an experimental configuration to enable the React Compiler. It autom
- Install `babel-plugin-react-compiler`

<TerminalBlock>
npm install next@canary babel-plugin-react-compiler
npm install next@canary babel-plugin-react-compiler@experimental
</TerminalBlock>

Then configure the experimental option in `next.config.js`:
Expand Down
6 changes: 6 additions & 0 deletions src/content/learn/you-might-not-need-an-effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -409,9 +409,15 @@ function Game() {
Ce code pose deux problèmes.
<<<<<<< HEAD
Le premier problème est qu’il est très inefficace : le composant (et ses enfants) doivent refaire un rendu entre chaque appel `set` de la chaîne. Dans l’exemple ci-dessus, dans le pire des cas (`setCard` → rendu → `setGoldCardCount` → rendu → `setRound` → rendu → `setIsGameOver` → rendu) on a pas moins de trois rendus superflus de l’arbre au sein du composant.
Même si ce n’était pas lent, au fil de l’évolution de votre code, vous tomberez sur des cas où la « chaîne » que vous avez construite ne correspond plus aux nouvelles spécifications. Imaginez que vous ajoutiez une étape au sein de l’historique des mouvements de la partie. Pour ce faire, vous devriez mettre à jour chaque variable d’état sur base d’une valeur passée. Seulement voilà, redéfinir `card` à une valeur passée déclencherait à nouveau la chaîne d’Effets et modifierait la donnée affichée. Ce genre de code est rigide et fragile.
=======
The first problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
Dans un tel cas, il vaut largement mieux calculer tout ce qu’on peut pendant le rendu, et ajuster l’état au sein d’un gestionnaire d’événement :
Expand Down
4 changes: 4 additions & 0 deletions src/content/reference/react-dom/components/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,11 @@ React leur réserve un traitement particulier parce que leur passer la prop `val

## Composants de ressources et métadonnées {/*resource-and-metadata-components*/}

<<<<<<< HEAD
Ces composants natifs du navigateur vous permettent de charger des ressources externes ou d'annoter le document avec des métadonnées :
=======
These built-in browser components let you load external resources or annotate the document with metadata:
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266
* [`<link>`](/reference/react-dom/components/link)
* [`<meta>`](/reference/react-dom/components/meta)
Expand Down
Loading

0 comments on commit 191e103

Please sign in to comment.