8000 merging all conflicts · reactjs/lo.react.dev@567cabc · GitHub
[go: up one dir, main page]

Skip to content

Commit 567cabc

Browse files
merging all conflicts
2 parents c4da3fe + bbb08a5 commit 567cabc

File tree

91 files changed

+1086
-944
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

+1086
-944
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/Preview.tsx

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

+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
}
+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/components/Seo.tsx

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

+3-4
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
}
@@ -428,7 +428,7 @@ export default function PackingList() {
428428

429429
Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
430430

431-
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>`.
431+
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>`.
432432

433433
</Solution>
434434

@@ -643,4 +643,3 @@ On the development front, thanks to [Jared Palmer](https://twitter.com/jaredpalm
643643
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.
644644

645645
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.
646-

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)
47 10000 44

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/community/versioning-p F438 olicy.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ In general, we *don't* bump the major version number for changes to:
4646

4747
* **Development warnings.** Since these don't affect production behavior, we may add new warnings or modify existing warnings in between major versions. In fact, this is what allows us to reliably warn about upcoming breaking changes.
4848
* **APIs starting with `unstable_`.** These are provided as experimental features whose APIs we are not yet confident in. By releasing these with an `unstable_` prefix, we can iterate faster and get to a stable API sooner.
49-
* **Alpha and canary versions of React.** We provide alpha versions of React as a way to test new features early, but we need the flexibility to make changes based on what we learn in the alpha period. If you use these versions, note that APIs may change before the stable release.
49+
* **Alpha and Canary versions of React.** We provide alpha versions of React as a way to test new features early, but we need the flexibility to make changes based on what we learn in the alpha period. If you use these versions, note that APIs may change before the stable release.
5050
* **Undocumented APIs and internal data structures.** If you access internal property names like `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` or `__reactInternalInstance$uk43rzhitjg`, there is no warranty. You are on your own.
5151

5252
This policy is designed to be pragmatic: certainly, we don't want to cause headaches for you. If we bumped the major version for all of these changes, we would end up releasing more major versions and ultimately causing more versioning pain for the community. It would also mean that we can't make progress in improving React as fast as we'd like.

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ npm install react react-dom
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 ເນື້ອຫາ HTML ທີ່ມີຢູ່ແລ້ວ
@@ -131,7 +131,7 @@ root.render(<h1>Hello, world</h1>);
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)
0