diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index 87dcfdc73..2a905a0df 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -11,10 +11,10 @@ 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' @@ -22,7 +22,7 @@ jobs: uses: bahmutov/npm-install@v1.7.10 - name: Restore next build - uses: actions/cache@v2 + uses: actions/cache@v3 id: restore-build-cache env: cache-name: cache-next-build @@ -41,7 +41,7 @@ jobs: run: npx -p nextjs-bundle-analysis@0.5.0 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 @@ -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 @@ -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 diff --git a/package.json b/package.json index 1f63eb121..ad9b9baa4 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index ad97079e2..bb495beae 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -283,7 +283,7 @@ export function Footer() {
- ©{new Date().getFullYear()} + Copyright © Meta Platforms, Inc
{ setShowLoading(true); diff --git a/src/components/Search.tsx b/src/components/Search.tsx index cff7f8852..f5c963f67 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -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}); diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index a1ed591e3..41fbf7328 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -270,7 +270,7 @@ Utilisez l'opérateur conditionnel (`cond ? a : b`) pour afficher ❌ si `isPack function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -308,7 +308,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
    • ); } diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 1b597747d..3ace9db4a 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -355,7 +355,7 @@ npm install react-shallow-renderer --save-dev ##### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/} -Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started). +Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro). @@ -526,7 +526,7 @@ We are deprecating `react-test-renderer` because it implements its own renderer The test renderer was created before there were more viable testing strategies available like [React Testing Library](https://testing-library.com), and we now recommend using a modern testing library instead. -In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience. +In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) for a modern and well supported testing experience. ## Notable changes {/*notable-changes*/} diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index d361c7f4f..27c1b7018 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,26 +10,6 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse ## Conférences à venir {/*upcoming-conferences*/} -### React Nexus 2024 {/*react-nexus-2024*/} -July 04 & 05, 2024. Bangalore, India (In-person event) - -[Site web](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in) - -### Chain React 2024 {/*chain-react-2024*/} -July 17-19, 2024. In-person in Portland, OR, USA - -[Site web](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf) - -### The Geek Conf 2024 {/*the-geek-conf-2024*/} -July 25, 2024. In-person in Berlin, Germany + remote (hybrid event) - -[Site web](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf) - -### React Rally 2024 🐙 {/*react-rally-2024*/} -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) - ### React Universe Conf 2024 {/*react-universe-conf-2024*/} September 5-6, 2024. Wrocław, Poland. @@ -43,7 +23,7 @@ September 19-21, 2024. Alicante, Spain. ### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} October 04 - 05, 2024. Nairobi, Kenya -[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) +[Site web](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) ### React India 2024 {/*react-india-2024*/} October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day @@ -55,13 +35,58 @@ 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) + +[Site web](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) + +[Site web](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) + +### React Native London Conf 2024 {/*react-native-london-2024*/} +November 14 & 15, 2024. In-person in London, UK + +[Site web](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) + +### React Summit US 2024 {/*react-summit-us-2024*/} +November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) + +[Site web](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_) +### React Day Berlin 2024 {/*react-day-berlin-2024*/} +December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) + +[Site web](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) + ## Conférences passées {/*past-conferences*/} +### React Rally 2024 🐙 {/*react-rally-2024*/} +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) + +### The Geek Conf 2024 {/*the-geek-conf-2024*/} +July 25, 2024. In-person in Berlin, Germany + remote (hybrid event) + +[Site web](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf) + +### Chain React 2024 {/*chain-react-2024*/} +July 17-19, 2024. In-person in Portland, OR, USA + +[Site web](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf) + +### React Nexus 2024 {/*react-nexus-2024*/} +July 04 & 05, 2024. Bangalore, India (In-person event) + +[Site web](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) diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index f696d8e4d..bed42f779 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -45,15 +45,8 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un * [Belo Horizonte](https://www.meetup.com/reactbh/) * [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/) * [Florianópolis](https://www.meetup.com/pt-br/ReactJS-Floripa/) -* [Goiânia](https://www.meetup.com/pt-br/React-Goiania/) * [Joinville](https://www.meetup.com/pt-BR/React-Joinville/) -* [Juiz de Fora](https://www.meetup.com/pt-br/React-Juiz-de-Fora/) -* [Maringá](https://www.meetup.com/pt-BR/React-Maringa/) -* [Porto Alegre](https://www.meetup.com/pt-BR/React-Porto-Alegre/) -* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/) -* [Salvador](https://www.meetup.com/pt-BR/ReactSSA) * [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/) -* [Vila Velha](https://www.meetup.com/pt-BR/React-ES/) ## Bolivie {/*bolivia*/} * [Bolivia](https://www.meetup.com/ReactBolivia/) @@ -66,16 +59,8 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/) * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/) -## Chili {/*chile*/} -* [Santiago](https://www.meetup.com/es-ES/react-santiago/) - -## Chine {/*china*/} -* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/) - ## Colombie {/*colombia*/} -* [Bogotá](https://www.meetup.com/meetup-group-iHIeHykY/) * [Medellin](https://www.meetup.com/React-Medellin/) -* [Cali](https://www.meetup.com/reactcali/) ## Danemark {/*denmark*/} * [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/) @@ -84,15 +69,10 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un ## Écosse (R.-U.) {/*scotland-uk*/} * [Edinburgh](https://www.meetup.com/React-Scotland/) -## Égypte {/*egypt*/} -* [Cairo](https://www.meetup.com/react-cairo/) - ## Espagne {/*spain*/} * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/) -* [Canarias](https://www.meetup.com/React-Canarias/) ## États-Unis {/*us*/} -* [Ann Arbor, MI - ReactJS](https://www.meetup.com/AnnArbor-jsx/) * [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/) * [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/) * [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/) @@ -103,7 +83,6 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un * [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/) * [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/) * [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/) -* [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/) * [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/) * [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy) * [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/) @@ -113,34 +92,25 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un * [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/) * [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/) * [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/) -* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/) * [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/) * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) * [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/) * [New York, NY - React.NYC](https://guild.host/react-nyc) -* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) -* [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) -* [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) -* [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/) * [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/) -* [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/) * [San Diego, CA - San Diego JS](https://www.meetup.com/sandiegojs/) * [San Francisco - Real World React](https://www.meetup.com/Real-World-React) * [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/) * [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/) -* [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/) * [Santa Monica, CA - ReactJS](https://www.meetup.com/Los-Angeles-ReactJS-User-Group/) -* [Seattle, WA - React Native](https://www.meetup.com/Seattle-React-Native-Meetup/) * [Seattle, WA - ReactJS](https://www.meetup.com/seattle-react-js/) * [Tampa, FL - ReactJS](https://www.meetup.com/ReactJS-Tampa-Bay/) * [Tucson, AZ - ReactJS](https://www.meetup.com/Tucson-ReactJS-Meetup/) * [Washington, DC - ReactJS](https://www.meetup.com/React-DC/) ## France {/*france*/} -* [Nantes](https://www.meetup.com/React-Nantes/) * [Lille](https://www.meetup.com/ReactBeerLille/) * [Paris](https://www.meetup.com/ReactJS-Paris/) @@ -148,14 +118,11 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un * [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/) * [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/) -## Hongrie {/*hungary*/} -* [Budapest](https://www.meetup.com/React-Budapest/) - ## Inde {/*india*/} * [Ahmedabad](https://www.meetup.com/react-ahmedabad/) * [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/) * [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup) -* [Chennai](https://www.meetup.com/React-Chennai/) +* [Chennai](https://www.linkedin.com/company/chennaireact) * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) * [Mumbai](https://reactmumbai.dev) * [Pune](https://www.meetup.com/ReactJS-and-Friends/) @@ -166,12 +133,15 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un ## Irlande {/*ireland*/} * [Dublin](https://guild.host/reactjs-dublin) -## Israël {/*israel*/} +## Israel {/*israel*/} * [Tel Aviv](https://www.meetup.com/ReactJS-Israel/) ## Italie {/*italy*/} * [Milan](https://www.meetup.com/React-JS-Milano/) +## Japon {/*japan*/} +* [Osaka](https://react-osaka.connpass.com/) + ## Kenya {/*kenya*/} * [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske) @@ -190,15 +160,9 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un * [Karachi](https://www.facebook.com/groups/902678696597634/) * [Lahore](https://www.facebook.com/groups/ReactjsLahore/) -## Panama {/*panama*/} -* [Panama](https://www.meetup.com/React-Panama/) - ## Pays-Bas {/*netherlands*/} * [Amsterdam](https://guild.host/react-amsterdam) -## Pérou {/*peru*/} -* [Lima](https://www.meetup.com/ReactJS-Peru/) - ## Philippines {/*philippines*/} * [Manila](https://www.meetup.com/reactjs-developers-manila/) * [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/) diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 8006ba458..a921ad0ac 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -52,13 +52,13 @@ export default function PackingList() { -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}`. +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}`. 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
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -70,7 +70,7 @@ Si la prop `isPacked` vaut `true`, ce code **renverra un arbre JSX différent**. ```js function Item({ name, isPacked }) { if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; } @@ -159,7 +159,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 -
  • {name} ✔
    • +
  • {name} ✅
    • ``` est très similaire à @@ -172,7 +172,7 @@ Les deux branches conditionnelles renvoient `
  • ...
    • ` : ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -187,7 +187,7 @@ Au lieu de ceci : ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -197,12 +197,12 @@ Vous pouvez plutôt écrire ceci : ```js return (
  • - {isPacked ? name + ' ✔' : name} + {isPacked ? name + ' ✅' : name}
    • ); ``` -Vous pouvez le lire comme suit : *« si `isPacked` est vrai, alors (`?`) affiche `name + ' ✔'`, sinon (`:`) affiche `name` »*. +Vous pouvez le lire comme suit : *« si `isPacked` est vrai, alors (`?`) affiche `name + ' ✅'`, sinon (`:`) affiche `name` »*. @@ -222,7 +222,7 @@ function Item({ name, isPacked }) {
  • {isPacked ? ( - {name + ' ✔'} + {name + ' ✅'} ) : ( name @@ -265,7 +265,7 @@ Un autre raccourci que vous rencontrerez souvent utilise [l'opérateur ET logiqu ```js return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); ``` @@ -280,7 +280,7 @@ Le voici en action : function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -337,7 +337,7 @@ Utilisez une instruction `if` pour réaffecter une expression JSX à `itemConten ```js if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + " ✅"; } ``` @@ -357,7 +357,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 (
  • @@ -401,7 +401,7 @@ function Item({ name, isPacked }) { if (isPacked) { itemContent = ( - {name + " ✔"} + {name + " ✅"} ); } @@ -462,7 +462,7 @@ Utilisez l'opérateur conditionnel (`cond ? a : b`) pour afficher ❌ si `isPack function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -500,7 +500,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
    • ); } diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 53a4cd10c..a8505dee4 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -326,7 +326,7 @@ Dans cet exemple, on utilise l'opérateur JavaScript `&&` pour afficher conditio function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 5b3ab11a4..d24f89f77 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -124,35 +124,35 @@ export default function CatFriends() { <>
    • Tom
    • Maru
    • Jellylorum
      • @@ -245,9 +245,9 @@ export default function CatFriends() { return ( <>
        @@ -950,7 +950,7 @@ const catList = []; for (let i = 0; i < 10; i++) { catList.push({ id: i, - imageUrl: 'https://placekitten.com/250/200?image=' + i + imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i }); } @@ -1067,7 +1067,7 @@ const catList = []; for (let i = 0; i < 10; i++) { catList.push({ id: i, - imageUrl: 'https://placekitten.com/250/200?image=' + i + imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i }); } diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index ba87ae9f0..61c90243c 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -22,8 +22,6 @@ These docs are still a work in progress. More documentation is available in the React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production. - -React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible. React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. @@ -123,7 +121,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: -npx react-compiler-healthcheck@latest +npx react-compiler-healthcheck@experimental This script will: @@ -145,7 +143,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. -npm install eslint-plugin-react-compiler +npm install eslint-plugin-react-compiler@experimental Then, add it to your eslint config: @@ -205,7 +203,7 @@ If you're starting a new project, you can enable the compiler on your entire cod ### Babel {/*usage-with-babel*/} -npm install babel-plugin-react-compiler +npm install babel-plugin-react-compiler@experimental The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler. @@ -228,6 +226,29 @@ module.exports = function () { `babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis. +React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17. + + +npm install react-compiler-runtime@experimental + + +You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: + +```js {3} +// babel.config.js +const ReactCompilerConfig = { + target: '18' // '17' | '18' | '19' +}; + +module.exports = function () { + return { + plugins: [ + ['babel-plugin-react-compiler', ReactCompilerConfig], + ], + }; +}; +``` + ### Vite {/*usage-with-vite*/} If you use Vite, you can add the plugin to vite-plugin-react: @@ -260,7 +281,7 @@ Next.js has an experimental configuration to enable the React Compiler. It autom - Install `babel-plugin-react-compiler` -npm install next@canary babel-plugin-react-compiler +npm install next@canary babel-plugin-react-compiler@experimental Then configure the experimental option in `next.config.js`: diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index af9a3be5c..79a2f023f 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -1139,7 +1139,7 @@ On appelle alors la fonction `setSquares` pour avertir React que l'état du comp -JavaScript utilise des [fermetures lexicales](https://developer.mozilla.org/docs/Web/JavaScript/Closures), ce qui signifie qu'une fonction imbriquée (ex. `handleClick`) a accès aux variables et fonctions définies dans une fonction englobante (ex. `Board`). La fonction `handleClick` peut lire l'état `squares` et appeler la fonction `setSquares` parce que les deux sont définis dans la fonction`Board`. +JavaScript utilise des [fermetures lexicales](https://developer.mozilla.org/docs/Web/JavaScript/Closures), ce qui signifie qu'une fonction imbriquée (ex. `handleClick`) a accès aux variables et fonctions définies dans une fonction englobante (ex. `Board`). La fonction `handleClick` peut lire l'état `squares` et appeler la fonction `setSquares` parce que les deux sont définis dans la fonction `Board`. diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index 9f601052c..23ea08557 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -57,6 +57,7 @@ Cet exemple utilise un objet dans l’état pour représenter la position actuel ```js import { useState } from 'react'; + export default function MovingDot() { const [position, setPosition] = useState({ x: 0, @@ -127,6 +128,7 @@ Voyez comme le point rouge suit désormais votre pointeur lorsque vous le touche ```js import { useState } from 'react'; + export default function MovingDot() { const [position, setPosition] = useState({ x: 0, diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 64eed03e8..5824b487b 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -411,7 +411,7 @@ Ce code pose deux problèmes. 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. +Le second problème vient du fait que 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 un moyen de naviguer 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 souvent rigide et fragile. 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 : diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md index 5eb4cd2b1..b96f4dbd6 100644 --- a/src/content/reference/react-dom/preinitModule.md +++ b/src/content/reference/react-dom/preinitModule.md @@ -53,7 +53,7 @@ La fonction `preinitModule` suggère au navigateur de commencer à télécharger * `href` : une chaîne de caractères. L'URL du module que vous souhaitez télécharger et évaluer. * `options` : un objet. Il contient les propriétés suivantes : - * `as` : une chaîne de caractères obligatoire. Le type de la ressource. La seule valeur autorisée est `script`. + * `as` : une chaîne de caractères obligatoire. La seule valeur autorisée est `script`. * `crossOrigin` : une chaîne de caractères. La [politique CORS](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/crossorigin) à utiliser. Les valeurs possibles sont `anonymous` et `use-credentials`. * `integrity` : une chaîne de caractères. Une empreinte cryptographique de la ressource afin de [vérifier son authenticité](https://developer.mozilla.org/fr/docs/Web/Security/Subresource_Integrity). * `nonce` : une chaîne de caractères. Un [nonce cryptographique autorisant la ressource](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/nonce) dans le cadre d'une Politique de Sécurité de Contenu (CSP) stricte. diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index eae704bc0..6cfdd1417 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -49,10 +49,10 @@ Côté client, appelez [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) * `reactNode` : un nœud React dont vous souhaitez produire le HTML. Ça pourrait par exemple être un élément JSX tel que ``. C'est censé produire le document entier, de sorte que le composant `App` devrait produire la balise ``. * `options` **optionnelles** : un objet avec des options de streaming. - * `bootstrapScriptContent` **optionnel** : s'il est fourni, ce code source sera placé dans une balise `