Skip to content

Commit 0b367a3

Browse files
merging all conflicts
2 parents 4e78f7f + bbb08a5 commit 0b367a3

File tree

91 files changed

+1412
-858
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+1412
-858
lines changed

src/components/MDX/Sandpack/DownloadButton.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import {useSyncExternalStore} from 'react';
66
import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
77
import {IconDownload} from '../../Icon/IconDownload';
8+
import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
89
export interface DownloadButtonProps {}
910

1011
let supportsImportMap = false;
@@ -32,8 +33,6 @@ function useSupportsImportMap() {
3233
return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
3334
}
3435

35-
const SUPPORTED_FILES = ['/App.js', '/styles.css'];
36-
3736
export function DownloadButton({
3837
providedFiles,
3938
}: {
@@ -49,8 +48,8 @@ export function DownloadButton({
4948
}
5049

5150
const downloadHTML = () => {
52-
const css = sandpack.files['/styles.css']?.code ?? '';
53-
const code = sandpack.files['/App.js']?.code ?? '';
51+
const css = sandpack.files[StylesCSSPath]?.code ?? '';
52+
const code = sandpack.files[AppJSPath]?.code ?? '';
5453
const blob = new Blob([
5554
`<!DOCTYPE html>
5655
<html>

src/components/MDX/Sandpack/Preview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function Preview({
5454

5555
// When throwing a new Error in Sandpack - we want to disable the dev error dialog
5656
// to show the Error Boundary fallback
57-
if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
57+
if (rawError && rawError.message.includes('Example Error:')) {
5858
rawError = null;
5959
}
6060

src/components/MDX/Sandpack/SandpackRoot.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client';
99
import {CustomPreset} from './CustomPreset';
1010
import {createFileMap} from './createFileMap';
1111
import {CustomTheme} from './Themes';
12+
import {template} from './template';
1213

1314
type SandpackProps = {
1415
children: React.ReactNode;
@@ -70,17 +71,19 @@ function SandpackRoot(props: SandpackProps) {
7071
const codeSnippets = Children.toArray(children) as React.ReactElement[];
7172
const files = createFileMap(codeSnippets);
7273

73-
files['/styles.css'] = {
74-
code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
75-
hidden: !files['/styles.css']?.visible,
74+
files['/src/styles.css'] = {
75+
code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
76+
hidden: !files['/src/styles.css']?.visible,
7677
};
7778

7879
return (
7980
<div className="sandpack sandpack--playground w-full my-8" dir="ltr">
8081
<SandpackProvider
81-
template="react"
82-
files={files}
82+
files={{...template, ...files}}
8383
theme={CustomTheme}
84+
customSetup={{
85+
environment: 'create-react-app',
86+
}}
8487
options={{
8588
autorun,
8689
initMode: 'user-visible',

src/components/MDX/Sandpack/createFileMap.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
66

7+
export const AppJSPath = `/src/App.js`;
8+
export const StylesCSSPath = `/src/styles.css`;
9+
export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
10+
711
export const createFileMap = (codeSnippets: any) => {
812
return codeSnippets.reduce(
913
(result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
@@ -26,15 +30,16 @@ export const createFileMap = (codeSnippets: any) => {
2630
}
2731
} else {
2832
if (props.className === 'language-js') {
29-
filePath = '/App.js';
33+
filePath = AppJSPath;
3034
} else if (props.className === 'language-css') {
31-
filePath = '/styles.css';
35+
filePath = StylesCSSPath;
3236
} else {
3337
throw new Error(
3438
`Code block is missing a filename: ${props.children}`
3539
);
3640
}
3741
}
42+
3843
if (result[filePath]) {
3944
throw new Error(
4045
`File ${filePath} was defined multiple times. Each file snippet should have a unique path name`

src/components/MDX/Sandpack/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

55
import {lazy, memo, Children, Suspense} from 'react';
6-
import {createFileMap} from './createFileMap';
6+
import {AppJSPath, createFileMap} from './createFileMap';
77

88
const SandpackRoot = lazy(() => import('./SandpackRoot'));
99

@@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any {
5757
);
5858
let activeCode;
5959
if (!activeCodeSnippet.length) {
60-
activeCode = codeSnippet['/App.js'].code;
60+
activeCode = codeSnippet[AppJSPath].code;
6161
} else {
6262
activeCode = codeSnippet[activeCodeSnippet[0]].code;
6363
}
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
export const template = {
2+
'/src/index.js': {
3+
hidden: true,
4+
code: `import React, { StrictMode } from "react";
5+
import { createRoot } from "react-dom/client";
6+
import "./styles.css";
7+
8+
import App from "./App";
9+
10+
const root = createRoot(document.getElementById("root"));
11+
root.render(
12+
<StrictMode>
13+
<App />
14+
</StrictMode>
15+
);`,
16+
},
17+
'/package.json': {
18+
hidden: true,
19+
code: JSON.stringify(
20+
{
21+
name: 'react.dev',
22+
version: '0.0.0',
23+
main: '/src/index.js',
24+
scripts: {
25+
start: 'react-scripts start',
26+
build: 'react-scripts build',
27+
test: 'react-scripts test --env=jsdom',
28+
eject: 'react-scripts eject',
29+
},
30+
dependencies: {
31+
react: '^18.0.0',
32+
'react-dom': '^18.0.0',
33+
'react-scripts': '^5.0.0',
34+
},
35+
},
36+
null,
37+
2
38+
),
39+
},
40+
'/public/index.html': {
41+
hidden: true,
42+
code: `<!DOCTYPE html>
43+
<html lang="en">
44+
<head>
45+
<meta charset="UTF-8">
46+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
47+
<title>Document</title>
48+
</head>
49+
<body>
50+
<div id="root"></div>
51+
</body>
52+
</html>`,
53+
},
54+
};

src/components/Seo.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const deployedTranslations = [
2424
'es',
2525
'fr',
2626
'ja',
27+
'tr',
2728
// We'll add more languages when they have enough content.
2829
// Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
2930
// It must be the same between all translations.

src/content/blog/2023/03/16/introducing-react-dev.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Si vous aimez apprendre en pratiquant, nous vous recommandons de continuer avec
5858

5959
<Sandpack>
6060

61-
```js App.js
61+
```js src/App.js
6262
import { useState } from 'react';
6363

6464
function Square({ value, onSquareClick }) {
@@ -176,7 +176,7 @@ function calculateWinner(squares) {
176176
}
177177
```
178178

179-
```css styles.css
179+
```css src/styles.css
180180
* {
181181
box-sizing: border-box;
182182
}
@@ -429,7 +429,11 @@ export default function PackingList() {
429429

430430
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 !
431431

432+
<<<<<<< HEAD
432433
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>`.
434+
=======
435+
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>`.
436+
>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954
433437
434438
</Solution>
435439

@@ -642,6 +646,12 @@ Merci à [Dan Lebowitz](https://twitter.com/lebo) pour la design du site et à [
642646

643647
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.
644648

649+
<<<<<<< HEAD
645650
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.
646651
647652
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.
653+
=======
654+
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.
655+
656+
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.
657+
>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954

src/content/community/conferences.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse
1010

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

13+
<<<<<<< HEAD
1314
### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
1415
September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
1516

@@ -65,6 +66,8 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
6566

6667
[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)
6768

69+
=======
70+
>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954
6871
### App.js Conf 2024 {/*appjs-conf-2024*/}
6972
May 22 - 24, 2024. In-person in Kraków, Poland + remote
7073

@@ -75,7 +78,71 @@ June 12 - June 14, 2024. Atlanta, GA, USA
7578

7679
[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#/)
7780

81+
<<<<<<< HEAD
7882
## Conférences passées {/*past-conferences*/}
83+
=======
84+
### React India 2024 {/*react-india-2024*/}
85+
October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
86+
87+
[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)
88+
89+
## Past Conferences {/*past-conferences*/}
90+
>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954
91+
92+
### React Day Berlin 2023 {/*react-day-berlin-2023*/}
93+
December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
94+
95+
[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)
96+
97+
### React Summit US 2023 {/*react-summit-us-2023*/}
98+
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
99+
100+
[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)
101+
102+
### reactjsday 2023 {/*reactjsday-2023*/}
103+
October 27th 2023. In-person in Verona, Italy and online (hybrid event)
104+
105+
[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
106+
107+
### React Advanced 2023 {/*react-advanced-2023*/}
108+
October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
109+
110+
[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)
111+
112+
### React Brussels 2023 {/*react-brussels-2023*/}
113+
October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
114+
115+
[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)
116+
117+
### React India 2023 {/*react-india-2023*/}
118+
October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
119+
120+
[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)
121+
122+
### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
123+
September 29 - 30, 2023. Nairobi, Kenya
124+
125+
[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
126+
127+
### React Live 2023 {/*react-live-2023*/}
128+
September 29, 2023. Amsterdam, Netherlands
129+
130+
[Website](https://reactlive.nl/)
131+
132+
### React Alicante 2023 {/*react-alicante-2023*/}
133+
September 28 - 30, 2023. Alicante, Spain
134+
135+
[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
136+
137+
### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
138+
September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
139+
140+
[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
141+
142+
### React Native EU 2023 {/*react-native-eu-2023*/}
143+
September 7 & 8, 2023. Wrocław, Poland
144+
145+
[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
79146

80147
### React Rally 2023 🐙 {/*react-rally-2023*/}
81148
August 17 & 18, 2023. Salt Lake City, UT, USA

0 commit comments

Comments
 (0)