merging all conflicts

reactjs · Jan 1, 2024 · 0b367a3 · 0b367a3
2 parents 4e78f7f + bbb08a5
commit 0b367a3
Show file tree

Hide file tree

Showing 91 changed files with 1,412 additions and 858 deletions.
diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -5,6 +5,7 @@
 import {useSyncExternalStore} from 'react';
 import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
 import {IconDownload} from '../../Icon/IconDownload';
+import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
 export interface DownloadButtonProps {}
 
 let supportsImportMap = false;
@@ -32,8 +33,6 @@ function useSupportsImportMap() {
   return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
 }
 
-const SUPPORTED_FILES = ['/App.js', '/styles.css'];
-
 export function DownloadButton({
   providedFiles,
 }: {
@@ -49,8 +48,8 @@ export function DownloadButton({
   }
 
   const downloadHTML = () => {
-    const css = sandpack.files['/styles.css']?.code ?? '';
-    const code = sandpack.files['/App.js']?.code ?? '';
+    const css = sandpack.files[StylesCSSPath]?.code ?? '';
+    const code = sandpack.files[AppJSPath]?.code ?? '';
     const blob = new Blob([
       `<!DOCTYPE html>
 <html>

diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
@@ -54,7 +54,7 @@ export function Preview({
 
   // When throwing a new Error in Sandpack - we want to disable the dev error dialog
   // to show the Error Boundary fallback
-  if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
+  if (rawError && rawError.message.includes('Example Error:')) {
     rawError = null;
   }
 

diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -9,6 +9,7 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 import {CustomTheme} from './Themes';
+import {template} from './template';
 
 type SandpackProps = {
   children: React.ReactNode;
@@ -70,17 +71,19 @@ function SandpackRoot(props: SandpackProps) {
   const codeSnippets = Children.toArray(children) as React.ReactElement[];
   const files = createFileMap(codeSnippets);
 
-  files['/styles.css'] = {
-    code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
-    hidden: !files['/styles.css']?.visible,
+  files['/src/styles.css'] = {
+    code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
+    hidden: !files['/src/styles.css']?.visible,
   };
 
   return (
     <div className="sandpack sandpack--playground w-full my-8" dir="ltr">
       <SandpackProvider
-        template="react"
-        files={files}
+        files={{...template, ...files}}
         theme={CustomTheme}
+        customSetup={{
+          environment: 'create-react-app',
+        }}
         options={{
           autorun,
           initMode: 'user-visible',

diff --git a/src/components/MDX/Sandpack/createFileMap.ts b/src/components/MDX/Sandpack/createFileMap.ts
@@ -4,6 +4,10 @@
 
 import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
 
+export const AppJSPath = `/src/App.js`;
+export const StylesCSSPath = `/src/styles.css`;
+export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
+
 export const createFileMap = (codeSnippets: any) => {
   return codeSnippets.reduce(
     (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
@@ -26,15 +30,16 @@ export const createFileMap = (codeSnippets: any) => {
         }
       } else {
         if (props.className === 'language-js') {
-          filePath = '/App.js';
+          filePath = AppJSPath;
         } else if (props.className === 'language-css') {
-          filePath = '/styles.css';
+          filePath = StylesCSSPath;
         } else {
           throw new Error(
             `Code block is missing a filename: ${props.children}`
           );
         }
       }
+
       if (result[filePath]) {
         throw new Error(
           `File ${filePath} was defined multiple times. Each file snippet should have a unique path name`

diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx
@@ -3,7 +3,7 @@
  */
 
 import {lazy, memo, Children, Suspense} from 'react';
-import {createFileMap} from './createFileMap';
+import {AppJSPath, createFileMap} from './createFileMap';
 
 const SandpackRoot = lazy(() => import('./SandpackRoot'));
 
@@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any {
   );
   let activeCode;
   if (!activeCodeSnippet.length) {
-    activeCode = codeSnippet['/App.js'].code;
+    activeCode = codeSnippet[AppJSPath].code;
   } else {
     activeCode = codeSnippet[activeCodeSnippet[0]].code;
   }

diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
@@ -0,0 +1,54 @@
+export const template = {
+  '/src/index.js': {
+    hidden: true,
+    code: `import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles.css";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);`,
+  },
+  '/package.json': {
+    hidden: true,
+    code: JSON.stringify(
+      {
+        name: 'react.dev',
+        version: '0.0.0',
+        main: '/src/index.js',
+        scripts: {
+          start: 'react-scripts start',
+          build: 'react-scripts build',
+          test: 'react-scripts test --env=jsdom',
+          eject: 'react-scripts eject',
+        },
+        dependencies: {
+          react: '^18.0.0',
+          'react-dom': '^18.0.0',
+          'react-scripts': '^5.0.0',
+        },
+      },
+      null,
+      2
+    ),
+  },
+  '/public/index.html': {
+    hidden: true,
+    code: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>`,
+  },
+};
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -24,6 +24,7 @@ const deployedTranslations = [
   'es',
   'fr',
   'ja',
+  'tr',
   // We'll add more languages when they have enough content.
   // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
   // It must be the same between all translations.

diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -58,7 +58,7 @@ Si vous aimez apprendre en pratiquant, nous vous recommandons de continuer avec
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import { useState } from 'react';
 
 function Square({ value, onSquareClick }) {
@@ -176,7 +176,7 @@ function calculateWinner(squares) {
 }
 ```
 
-```css styles.css
+```css src/styles.css
 * {
   box-sizing: border-box;
 }
@@ -429,7 +429,11 @@ export default function PackingList() {
 
 Remarquez qu'il faut écrire `importance > 0 && ...` plutôt que juste `importance && ...` afin de nous assurer que si `importance` vaut `0`, `0` ne sera pas affiché comme résultat !
 
+<<<<<<< HEAD
 Dans cette solution, on utilise deux conditions distinctes pour insérer une espace entre le nom et le libellé d'importance.  On aurait aussi pu utiliser un fragment avec une espace au début : `importance > 0 && <> <i>...</i></>` ou ajouter l'espace immédiatement au début du `<i>` :  `importance > 0 && <i> ...</i>`.
+=======
+In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954
 
 </Solution>
 
@@ -642,6 +646,12 @@ Merci à [Dan Lebowitz](https://twitter.com/lebo) pour la design du site et à [
 
 Côté développement, merci à  [Jared Palmer](https://twitter.com/jaredpalmer) pour avoir codé le prototype. Merci à [Dane Grant](https://twitter.com/danecando) et [Dustin Goodman](https://twitter.com/dustinsgoodman) de [ThisDotLabs](https://www.thisdot.co/) pour leur aide dans le développement de l'UI. Merci à [Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor) et [Danilo Woznica](https://twitter.com/danilowoz) de [CodeSandbox](https://codesandbox.io/) pour leur boulot sur l'intégration des bacs à sable. Merci à [Rick Hanlon](https://twitter.com/rickhanlonii) pour son travail de qualité sur le développement et le design, l'affinage des couleurs et d'autres subtilités. Merci à [Harish Kumar](https://www.strek.in/) et [Luna Ruan](https://twitter.com/lunaruan) pour avoir ajouté des nouvelles fonctionnalités au site et pour nous aider à le maintenir.
 
+<<<<<<< HEAD
 Un immense merci à celles et ceux qui ont donné de leur temps pour participer aux programmes de tests alpha et beta. Votre enthousiasme et vos retours précieux nous ont aidé à affiner ces docs. Un merci tout particulier à notre beta testeuse [Debbie O'Brien](https://twitter.com/debs_obrien), qui a présenté son expérience avec les docs React à la React Conf 2021.
 
 Enfin, merci à la communauté React de nous avoir inspirés dans cette entreprise.  Vous êtes la raison de tout cela, et nous espérons que ces nouvelles docs vous aideront à utiliser React pour construire toutes les interfaces utilisateurs que vous pourriez imaginer.
+=======
+Huge thanks to the folks who volunteered their time to participate in the alpha and beta testing program. Your enthusiasm and invaluable feedback helped us shape these docs. A special shout out to our beta tester, [Debbie O'Brien](https://twitter.com/debs_obrien), who gave a talk about her experience using the React docs at React Conf 2021.
+
+Finally, thanks to the React community for being the inspiration behind this effort. You are the reason we do this, and we hope that the new docs will help you use React to build any user interface that you want.
+>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
@@ -10,6 +10,7 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse
 
 ## Conférences à venir {/*upcoming-conferences*/}
 
+<<<<<<< HEAD
 ### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
 September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
 
@@ -65,6 +66,8 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
 
 [Site web](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Vidéos](https://portal.gitnation.org/events/react-day-berlin-2023)
 
+=======
+>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954
 ### App.js Conf 2024 {/*appjs-conf-2024*/}
 May 22 - 24, 2024. In-person in Kraków, Poland + remote
 
@@ -75,7 +78,71 @@ June 12 - June 14, 2024. Atlanta, GA, USA
 
 [Site web](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
 
+<<<<<<< HEAD
 ## Conférences passées {/*past-conferences*/}
+=======
+### React India 2024 {/*react-india-2024*/}
+October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+
+[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+
+## Past Conferences {/*past-conferences*/}
+>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954
+
+### React Day Berlin 2023 {/*react-day-berlin-2023*/}
+December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
+
+[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
+
+### React Summit US 2023 {/*react-summit-us-2023*/}
+November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
+
+[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023)
+
+### reactjsday 2023 {/*reactjsday-2023*/}
+October 27th 2023. In-person in Verona, Italy and online (hybrid event)
+
+[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
+### React Advanced 2023 {/*react-advanced-2023*/}
+October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
+
+[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
+
+### React Brussels 2023 {/*react-brussels-2023*/}
+October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
+
+[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)
+
+### React India 2023 {/*react-india-2023*/}
+October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
+
+[Website](https://www.reactindia.io) - [Twitter](https://x.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+
+### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
+September 29 - 30, 2023. 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)
+
+### React Live 2023 {/*react-live-2023*/}
+September 29, 2023. Amsterdam, Netherlands
+
+[Website](https://reactlive.nl/)
+
+### React Alicante 2023 {/*react-alicante-2023*/}
+September 28 - 30, 2023. Alicante, Spain
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
+
+### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
+September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event) 
+
+[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
+
+### React Native EU 2023 {/*react-native-eu-2023*/}
+September 7 & 8, 2023. Wrocław, Poland
+
+[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
 
 ### React Rally 2023 🐙 {/*react-rally-2023*/}
 August 17 & 18, 2023. Salt Lake City, UT, USA