Skip to content

Commit 59344c5

Browse files
harshilparmarharshilparmar
authored
Merge pull request #30 from reactjs/sync-303ecae3
Sync with react.dev @ 303ecae
2 parents 9f11e5a + 9b366b7 commit 59344c5

File tree

80 files changed

+986
-919
lines changed

Some content is hidden

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

80 files changed

+986
-919
lines changed

‎src/components/MDX/Sandpack/DownloadButton.tsx

+3-4
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/SandpackRoot.tsx

+8-5
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

+7-2
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

+2-2
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
}

‎src/components/MDX/Sandpack/template.ts

+54
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/content/blog/2023/03/16/introducing-react-dev.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ If you like to learn by doing, we recommend checking out the [Tic-Tac-Toe Tutori
5757

5858
<Sandpack>
5959

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

6363
function Square({ value, onSquareClick }) {
@@ -175,7 +175,7 @@ function calculateWinner(squares) {
175175
}
176176
```
177177

178-
```css styles.css
178+
```css src/styles.css
179179
* {
180180
box-sizing: border-box;
181181
}

‎src/content/community/conferences.md

+43-38
Original file line numberDiff line numberDiff line change
@@ -10,72 +10,77 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
1010

1111
## Upcoming Conferences {/*upcoming-conferences*/}
1212

13-
### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
14-
September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
15-
16-
[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
13+
### App.js Conf 2024 {/*appjs-conf-2024*/}
14+
May 22 - 24, 2024. In-person in Kraków, Poland + remote
1715

18-
### React Alicante 2023 {/*react-alicante-2023*/}
19-
September 28 - 30, 2023. Alicante, Spain
16+
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
2017

21-
[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
18+
### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
19+
June 12 - June 14, 2024. Atlanta, GA, USA
2220

23-
### React Live 2023 {/*react-live-2023*/}
24-
September 29, 2023. Amsterdam, Netherlands
21+
[Website](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#/)
2522

26-
[Website](https://reactlive.nl/)
23+
### React India 2024 {/*react-india-2024*/}
24+
October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
2725

28-
### React Native EU 2023 {/*react-native-eu-2023*/}
29-
September 7 & 8, 2023. Wrocław, Poland
26+
[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)
3027

31-
[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
28+
## Past Conferences {/*past-conferences*/}
3229

33-
### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
34-
September 29 - 30, 2023. Nairobi, Kenya
30+
### React Day Berlin 2023 {/*react-day-berlin-2023*/}
31+
December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
3532

36-
[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
33+
[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)
3734

38-
### React India 2023 {/*react-india-2023*/}
39-
October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
35+
### React Summit US 2023 {/*react-summit-us-2023*/}
36+
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
4037

41-
[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)
38+
[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)
4239

43-
### React Brussels 2023 {/*react-brussels-2023*/}
44-
October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
40+
### reactjsday 2023 {/*reactjsday-2023*/}
41+
October 27th 2023. In-person in Verona, Italy and online (hybrid event)
4542

46-
[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)
43+
[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
4744

4845
### React Advanced 2023 {/*react-advanced-2023*/}
4946
October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
5047

5148
[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)
5249

53-
### reactjsday 2023 {/*reactjsday-2023*/}
54-
October 27th 2023. In-person in Verona, Italy and online (hybrid event)
50+
### React Brussels 2023 {/*react-brussels-2023*/}
51+
October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
5552

56-
[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
53+
[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)
5754

58-
### React Summit US 2023 {/*react-summit-us-2023*/}
59-
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
55+
### React India 2023 {/*react-india-2023*/}
56+
October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
6057

61-
[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)
58+
[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)
6259

63-
### React Day Berlin 2023 {/*react-day-berlin-2023*/}
64-
December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
60+
### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
61+
September 29 - 30, 2023. Nairobi, Kenya
6562

66-
[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)
63+
[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
6764

68-
### App.js Conf 2024 {/*appjs-conf-2024*/}
69-
May 22 - 24, 2024. In-person in Kraków, Poland + remote
65+
### React Live 2023 {/*react-live-2023*/}
66+
September 29, 2023. Amsterdam, Netherlands
7067

71-
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
68+
[Website](https://reactlive.nl/)
7269

73-
### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
74-
June 12 - June 14, 2024. Atlanta, GA, USA
70+
### React Alicante 2023 {/*react-alicante-2023*/}
71+
September 28 - 30, 2023. Alicante, Spain
7572

76-
[Website](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#/)
73+
[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
7774

78-
## Past Conferences {/*past-conferences*/}
75+
### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
76+
September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
77+
78+
[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
79+
80+
### React Native EU 2023 {/*react-native-eu-2023*/}
81+
September 7 & 8, 2023. Wrocław, Poland
82+
83+
[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
7984

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

‎src/content/community/meetups.md

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
101101
* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
102102
* [Chennai](https://www.meetup.com/React-Chennai/)
103103
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
104+
* [Mumbai](https://reactmumbai.dev)
104105
* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
105106

106107
## Indonesia {/*indonesia*/}

‎src/content/learn/add-react-to-an-existing-project.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ Then add these lines of code at the top of your main JavaScript file (it might b
6767
</html>
6868
```
6969

70-
```js index.js active
70+
```js src/index.js active
7171
import { createRoot } from 'react-dom/client';
7272

7373
// Clear the existing HTML content
@@ -131,7 +131,7 @@ This lets you find that HTML element with [`document.getElementById`](https://de
131131
</html>
132132
```
133133

134-
```js index.js active
134+
```js src/index.js active
135135
import { createRoot } from 'react-dom/client';
136136

137137
function NavigationBar() {

‎src/content/learn/adding-interactivity.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export default function Gallery() {
134134
}
135135
```
136136

137-
```js data.js
137+
```js src/data.js
138138
export const sculptureList = [{
139139
name: 'Homenaje a la Neurocirugía',
140140
artist: 'Marta Colvin Andrade',

0 commit comments

Comments
 (0)