Sync with reactjs.org @ 19aa5b48

beta/.gitignore

@@ -35,6 +35,4 @@ yarn-error.log*
 .vercel
 
 # external fonts
-public/fonts/Optimistic_Display_W_Lt.woff2
-public/fonts/Optimistic_Display_W_Md.woff2
-public/fonts/Optimistic_Display_W_Bd.woff2
+public/fonts/Optimistic_*.woff2

beta/scripts/downloadFonts.js

@@ -15,3 +15,15 @@ execSync(
 execSync(
   'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2'
 );
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_SBd.woff2 --output public/fonts/Optimistic_Display_W_SBd.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Rg.woff2 --output public/fonts/Optimistic_Text_W_Rg.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Md.woff2 --output public/fonts/Optimistic_Text_W_Md.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Bd.woff2 --output public/fonts/Optimistic_Text_W_Bd.woff2'
+);

beta/src/components/MDX/ConsoleBlock.tsx

@@ -44,7 +44,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
           <Box className="bg-gray-300 dark:bg-gray-90" width="15px" />
         </div>
         <div className="flex text-sm px-4">
-          <div className="border-b-2 border-gray-300 dark:border-gray-90">
+          <div className="border-b-2 border-gray-300 dark:border-gray-90 dark:text-gray-30 text-gray-50">
             Console
           </div>
           <div className="px-4 py-2 flex">

beta/src/content/community/conferences.md

@@ -30,6 +30,11 @@ June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivi
 
 [Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
 
+### React Norway 2023 {/*react-norway-2023*/}
+June 16th, 2023. Larvik, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
+
 ### ReactNext 2023 {/*reactnext-2023*/}
 June 27th, 2023. Tel Aviv, Israel
 

beta/src/content/community/team.md

@@ -14,7 +14,7 @@ The React Core team members work full time on the core component APIs, the engin
 
 Current members of the React team are listed in alphabetical order below.
 
-<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Meta">
+<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Vercel">
     Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
 </TeamMember>
 
@@ -38,10 +38,14 @@ Current members of the React team are listed in alphabetical order below.
     Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner, and her dog Zelda.
 </TeamMember>
 
-<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Engineer at Meta">
+<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Independent Engineer">
     Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
 </TeamMember>
 
+<TeamMember name="Mengdi Chen" permalink="mengdi-chen" photo="/images/team/mengdi-chen.jpg" github="mondaychen" twitter="mengdi_en" title="Engineer at Meta">
+    While working on his Digital Arts degree Mengdi was conceited about his front-end skills because his CSS worked perfectly even on IE6. But soon React opened a new door of programming for him, and he has been dreaming of joining the React team ever since. Outside of work, he is usually busy chasing his two kids around or collecting strange recipes.
+</TeamMember>
+
 <TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
     Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
 </TeamMember>

beta/src/content/learn/conditional-rendering.md

@@ -212,7 +212,7 @@ If you're coming from an object-oriented programming background, you might assum
 
 </DeepDive>
 
-Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX each of the cases:
+Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases:
 
 <Sandpack>
 

beta/src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -469,7 +469,7 @@ export default function TodoList() {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>
@@ -520,7 +520,7 @@ export default function TodoList() {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>
@@ -575,7 +575,7 @@ export function getImageUrl(person) {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>
@@ -584,4 +584,4 @@ Variables and functions can help you keep the markup simple!
 
 </Solution>
 
-</Challenges>
+</Challenges>

beta/src/content/learn/tutorial-tic-tac-toe.md

@@ -1410,7 +1410,7 @@ But wait, there's a problem. Try clicking on the same square multiple times:
 
 The `X` is overwritten by an `O`! While this would add a very interesting twist to the game, we're going to stick to the original rules for now.
 
-When you mark a square with a `X` or a `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or and `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+When you mark a square with a `X` or an `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
 
 ```js {2,3,4}
 function handleClick(i) {

beta/src/content/reference/react-dom/server/renderToReadableStream.md

@@ -167,7 +167,7 @@ const assetMap = {
 
 async function handler(request) {
   const stream = await renderToReadableStream(<App assetMap={assetMap} />, {
-    bootstrapScripts: [assets['/main.js']]
+    bootstrapScripts: [assetMap['/main.js']]
   });
   return new Response(stream, {
     headers: { 'content-type': 'text/html' },
@@ -188,7 +188,7 @@ async function handler(request) {
   const stream = await renderToReadableStream(<App assetMap={assetMap} />, {
     // Careful: It's safe to stringify() this because this data isn't user-generated.
     bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
-    bootstrapScripts: [assets['/main.js']],
+    bootstrapScripts: [assetMap['/main.js']],
   });
   return new Response(stream, {
     headers: { 'content-type': 'text/html' },

beta/src/content/reference/react/legacy.md

@@ -4,7 +4,7 @@ title: "Legacy React APIs"
 
 <Intro>
 
-These APIs are exported from the `react` package, but they are not recommended for use in the newly written code. See the linked individual API pages for the suggested alternatives.
+These APIs are exported from the `react` package, but they are not recommended for use in newly written code. See the linked individual API pages for the suggested alternatives.
 
 </Intro>
 
@@ -31,4 +31,4 @@ These APIs will be removed in a future major version of React.
 
 </Deprecated>
 
-* [`createFactory`](/reference/react/createFactory) lets you create a function that produces React elements of a certain type.
+* [`createFactory`](/reference/react/createFactory) lets you create a function that produces React elements of a certain type.

beta/src/content/reference/react/useContext.md

@@ -1337,7 +1337,7 @@ function MyApp() {
 }
 ```
 
-As a result of this change, even if `MyApp` needs to re-render, the components calling `useContext(AuthProvider)` won't need to re-render unless `currentUser` has changed. Read more about [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) and [`useCallback`.](/reference/react/useCallback#skipping-re-rendering-of-components)
+As a result of this change, even if `MyApp` needs to re-render, the components calling `useContext(AuthContext)` won't need to re-render unless `currentUser` has changed. Read more about [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) and [`useCallback`.](/reference/react/useCallback#skipping-re-rendering-of-components)
 
 ---
 

beta/src/content/reference/react/useLayoutEffect.md

@@ -65,7 +65,7 @@ function Tooltip() {
 
 * Effects **only run on the client.** They don't run during server rendering.
 
-* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this can make your app very slow. When possible, prefer [`useEffect`.](/reference/reac/useEffect)
+* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this can make your app very slow. When possible, prefer [`useEffect`.](/reference/react/useEffect)
 
 ---
 

beta/src/content/reference/react/useReducer.md

@@ -84,7 +84,7 @@ React will set the next state to the result of calling the `reducer` function yo
 
 * If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. React may still need to call your component before ignoring the result, but it shouldn't affect your code.
 
-* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushsync)
+* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync)
 
 ---
 

content/community/conferences.md

@@ -32,6 +32,11 @@ Maio de 2023. Salt Lake City, UT
 
 [Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
 
+### React Norway 2023 {#react-norway-2023}
+June 16th, 2023. Larvik, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
+
 ### ReactNext 2023 {#reactnext}
 27 de junho de 2023. Tel Aviv, Israel
 

content/docs/hello-world.md

@@ -2,7 +2,7 @@
 id: hello-world
 title: Hello World
 permalink: docs/hello-world.html
-prev: cdn-links.html
+prev: release-channels.html
 next: introducing-jsx.html
 ---
 

content/docs/higher-order-components.md

@@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
 
 Enquanto um componente transforma props em UI, um componente de ordem superior transforma um componente em outro componente.
 
-HOCs são comuns em bibliotecas externas ao React, como o [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) do Redux e o [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer) do Relay.
+HOCs são comuns em bibliotecas externas ao React, como o [`connect`](https://react-redux.js.org/api/connect) do Redux e o [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer) do Relay.
 
 Neste documento, nós vamos discutir porque componentes de ordem superior são úteis e como escrever o seu.