amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-24 04:33:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into homepage

Browse Source
This commit is contained in:
dan
2023-02-07 18:23:53 +00:00
committed by GitHub
parent 00d61cd52b fa89af8d9b
commit f0ff7c3e74
18 changed files with 84 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
beta/src/components/MDX/MDXComponents.tsx
View File

@@ -353,15 +353,18 @@ function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
);
}
function LinkWithTodo({href, children, ...props}: JSX.IntrinsicElements['a']) {
if (href?.startsWith('TODO')) {
return children;
}
function YouTubeIframe(props: any) {
return (
<Link href={href} {...props}>
{children}
</Link>
<div className="relative h-0 overflow-hidden pt-[56.25%]">
<iframe
className="absolute inset-0 w-full h-full"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
title="YouTube video player"
{...props}
/>
</div>
);
}
@@ -377,7 +380,7 @@ export const MDXComponents = {
h3: H3,
h4: H4,
hr: Divider,
a: LinkWithTodo,
a: Link,
BlogCard,
code: InlineCode,
pre: CodeBlock,
@@ -420,6 +423,7 @@ export const MDXComponents = {
Hint,
Solution,
CodeStep,
YouTubeIframe,
};
for (let key in MDXComponents) {

4
beta/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
View File

@@ -16,9 +16,7 @@ December 21, 2020 by [Dan Abramov](https://twitter.com/dan_abramov), [Lauren Tan
To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up in the new year.
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/TQQPAU21ZUw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/TQQPAU21ZUw" />
**React Server Components are still in research and development.** We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so **don't feel like you have to catch up right now!**

14
beta/src/content/blog/2021/12/17/react-conf-2021-recap.md
View File

@@ -32,7 +32,7 @@ In the keynote, we also shared our vision for Suspense, Server Components, new R
Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/FZ0cG47msEk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" />
## React 18 for Application Developers {/*react-18-for-application-developers*/}
@@ -59,7 +59,7 @@ root.render(<App/>);
For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/ytudH8je5ko" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" />
## Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/}
@@ -69,7 +69,7 @@ Streaming server rendering lets you generate HTML from React components on the s
For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/pj5N-Khihgc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" />
## The first React working group {/*the-first-react-working-group*/}
@@ -77,7 +77,7 @@ For React 18, we created our first Working Group to collaborate with a panel of
For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/qn7gRClrC9U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" />
## React Developer Tooling {/*react-developer-tooling*/}
@@ -85,19 +85,19 @@ To support the new features in this release, we also announced the newly formed
For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/oxDfrke8rZg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" />
## React without memo {/*react-without-memo*/}
Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/lGEMwh32soc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" />
## React docs keynote {/*react-docs-keynote*/}
[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's [new docs](https://beta.reactjs.org/):
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/mneDaMYOKP8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" />
## And more... {/*and-more*/}

35
beta/src/content/community/conferences.md
View File

@@ -10,21 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
## Upcoming Conferences {/*upcoming-conferences*/}
### React Global Online Summit 22.2 by Geekle {/*react-global-online-summit-222-by-geekle*/}
November 8 - 9, 2022 - Online Summit
[Website](https://events.geekle.us/react3/) - [LinkedIn](https://www.linkedin.com/posts/geekle-us_event-react-reactjs-activity-6964904611207864320-gpDx?utm_source=share&utm_medium=member_desktop)
### Remix Conf Europe 2022 {/*remix-conf-europe-2022*/}
November 18, 2022, 7am PST / 10am EST / 4pm CET - remote event
[Website](https://remixconf.eu/) - [Twitter](https://twitter.com/remixconfeu)
### React Day Berlin 2022 {/*react-day-berlin-2022*/}
December 2, 2022. In-person in Berlin, Germany + remote (hybrid event)
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/c/ReactConferences)
### RemixConf 2023 {/*remixconf-2023*/}
May, 2023. Salt Lake City, UT
@@ -50,8 +35,28 @@ June 27th, 2023. Tel Aviv, Israel
[Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
### React India 2023 {/*react-india-2023*/}
Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - 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*/}
### React Day Berlin 2022 {/*react-day-berlin-2022*/}
December 2, 2022. In-person in Berlin, Germany + remote (hybrid event)
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/c/ReactConferences)
### React Global Online Summit 22.2 by Geekle {/*react-global-online-summit-222-by-geekle*/}
November 8 - 9, 2022 - Online Summit
[Website](https://events.geekle.us/react3/) - [LinkedIn](https://www.linkedin.com/posts/geekle-us_event-react-reactjs-activity-6964904611207864320-gpDx?utm_source=share&utm_medium=member_desktop)
### Remix Conf Europe 2022 {/*remix-conf-europe-2022*/}
November 18, 2022, 7am PST / 10am EST / 4pm CET - remote event
[Website](https://remixconf.eu/) - [Twitter](https://twitter.com/remixconfeu)
### React Advanced 2022 {/*react-advanced-2022*/}
October 21 & 25, 2022. In-person in London, UK + remote (hybrid event)

28
beta/src/content/community/videos.md
View File

@@ -16,13 +16,13 @@ In the keynote, we shared our vision for the future of React starting with React
Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/FZ0cG47msEk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="YouTube video player" />
### React 18 for Application Developers {/*react-18-for-application-developers*/}
For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/ytudH8je5ko" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="YouTube video player" />
### Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/}
@@ -32,7 +32,7 @@ Streaming server rendering lets you generate HTML from React components on the s
For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/pj5N-Khihgc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="YouTube video player" />
### The first React working group {/*the-first-react-working-group*/}
@@ -40,7 +40,7 @@ For React 18, we created our first Working Group to collaborate with a panel of
For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/qn7gRClrC9U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="YouTube video player" />
### React Developer Tooling {/*react-developer-tooling*/}
@@ -48,19 +48,19 @@ To support the new features in this release, we also announced the newly formed
For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/oxDfrke8rZg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="YouTube video player" />
### React without memo {/*react-without-memo*/}
Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype:
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/lGEMwh32soc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="YouTube video player" />
### React docs keynote {/*react-docs-keynote*/}
[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's [new docs](https://beta.reactjs.org/):
<iframe style={{marginTop:10}} width="560" height="315" src="https://www.youtube.com/embed/mneDaMYOKP8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="YouTube video player" />
### And more... {/*and-more*/}
@@ -90,34 +90,34 @@ Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpr
### React Conf 2019 {/*react-conf-2019*/}
A playlist of videos from React Conf 2019.
<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>
<YouTubeIframe title="React Conf 2019" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" />
### React Conf 2018 {/*react-conf-2018*/}
A playlist of videos from React Conf 2018.
<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>
<YouTubeIframe title="React Conf 2018" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" />
### React.js Conf 2017 {/*reactjs-conf-2017*/}
A playlist of videos from React.js Conf 2017.
<iframe title="React.js Conf 2017" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0" frameborder="0" allowfullscreen></iframe>
<YouTubeIframe title="React.js Conf 2017" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0" />
### React.js Conf 2016 {/*reactjs-conf-2016*/}
A playlist of videos from React.js Conf 2016.
<iframe title="React.js Conf 2016" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY" frameborder="0" allowfullscreen></iframe>
<YouTubeIframe title="React.js Conf 2016" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY" />
### React.js Conf 2015 {/*reactjs-conf-2015*/}
A playlist of videos from React.js Conf 2015.
<iframe title="React.js Conf 2015" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
<YouTubeIframe title="React.js Conf 2015" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" />
### Rethinking Best Practices {/*rethinking-best-practices*/}
Pete Hunt's talk at JSConf EU 2013 covers three topics: throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events - (2013 - 0h30m).
<iframe title="Pete Hunt: React: Rethinking Best Practices - JSConf EU 2013" width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
<YouTubeIframe title="Pete Hunt: React: Rethinking Best Practices - JSConf EU 2013" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" />
### Introduction to React {/*introduction-to-react*/}
Tom Occhino and Jordan Walke introduce React at Facebook Seattle - (2013 - 1h20m).
<iframe title="Tom Occhino and Jordan Walke introduce React at Facebook Seattle" width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
<YouTubeIframe title="Tom Occhino and Jordan Walke introduce React at Facebook Seattle" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" />

4
beta/src/content/learn/add-react-to-a-website.md
View File

@@ -196,7 +196,7 @@ Adding JSX to a project doesn't require complicated tools like a [bundler](/lear
Go to your project folder in the terminal, and paste these two commands (**Be sure you have [Node.js](https://nodejs.org/) installed!**):
1. `npm init -y` (if it fails, [here's a fix](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
2. `npm install babel-cli@6 babel-preset-react-app@3`
2. `npm install @babel/cli@7 babel-preset-react-app@10`
You only need npm to install the JSX preprocessor. You won't need it for anything else. Both React and the application code can stay as `<script>` tags with no changes.
@@ -207,7 +207,7 @@ Congratulations! You just added a **production-ready JSX setup** to your project
You can preprocess JSX so that every time you save a file with JSX in it, the transform will be re-run, converting the JSX file into a new, plain JavaScript file that the browser can understand. Here's how to set this up:
1. Create a folder called **`src`.**
2. In your terminal, run this command: `npx babel --watch src --out-dir . --presets react-app/prod ` (Don't wait for it to finish! This command starts an automated watcher for edits to JSX inside `src`.)
2. In your terminal, run this command: `npx babel --watch src --out-dir . --presets babel-preset-react-app/prod ` (Don't wait for it to finish! This command starts an automated watcher for edits to JSX inside `src`.)
3. Move your JSX-ified **`like-button.js`** ([it should look like this!](https://gist.githubusercontent.com/gaearon/be5ae0fbf563d6c5fe5c1563907b13d2/raw/4c0d0b8c7f4fcb341720424c28c72059f8174c62/like-button.js)) to the new **`src`** folder.
The watcher will create a preprocessed **`like-button.js`** with the plain JavaScript code suitable for the browser.

4
beta/src/content/learn/removing-effect-dependencies.md
View File

@@ -1507,7 +1507,7 @@ Effect Events like `onAppear` are not reactive, so you can read `duration` insid
#### Fix a reconnecting chat {/*fix-a-reconnecting-chat*/}
In this example, every time you press "Toggle theme", the chat re-connects. Why does this happen? Fix the mistake so that the chat re-connects only when you edit Server URL or choose a different the chat room.
In this example, every time you press "Toggle theme", the chat re-connects. Why does this happen? Fix the mistake so that the chat re-connects only when you edit the Server URL or choose a different chat room.
Treat `chat.js` as an external third-party library: you can consult it to check its API, but don't edit it.
@@ -2027,7 +2027,7 @@ label, button { display: block; margin-bottom: 5px; }
<Solution>
There's more than one correct way to solve this, but the here is one possible solution.
There's more than one correct way to solve this, but here is one possible solution.
In the original example, toggling the theme caused different `onMessage` and `createConnection` functions to be created and passed down. Since the Effect depended on these functions, the chat would re-connect every time you toggle the theme.

2
beta/src/content/learn/responding-to-events.md
View File

@@ -231,7 +231,7 @@ If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-abo
### Naming event handler props {/*naming-event-handler-props*/}
Built-in components like `<button>` and `<div>` only support [browser event names](TODO:/apis/react-dom/events) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
Built-in components like `<button>` and `<div>` only support [browser event names](/reference/react-dom/components/common#common-props) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
By convention, event handler props should start with `on`, followed by a capital letter.

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

@@ -589,7 +589,7 @@ function Square({ value }) {
}
```
For now, you should see a empty board:
For now, you should see an empty board:
![empty board](../images/tutorial/empty-board.png)
@@ -982,11 +982,11 @@ function Square({value}) {
}
```
At this point you should see a empty tic-tac-toe board:
At this point you should see an empty tic-tac-toe board:
![empty board](../images/tutorial/empty-board.png)
And you code should look like this:
And your code should look like this:
<Sandpack>
@@ -1195,7 +1195,7 @@ export default function Board() {
Notice the new `() =>` syntax. Here, `() => handleClick(0)` is an *arrow function,* which is a shorter way to define functions. When the square is clicked, the code after the `=>` "arrow" will run, calling `handleClick(0)`.
Now you need to update the other eight squares to call `handleClick` from the arrow functions you pass. Make sure that the argument for each call the `handleClick` corresponds to the index of the correct square:
Now you need to update the other eight squares to call `handleClick` from the arrow functions you pass. Make sure that the argument for each call of the `handleClick` corresponds to the index of the correct square:
```js {6-8,11-13,16-18}
export default function Board() {
@@ -2247,7 +2247,7 @@ body {
As you iterate through `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but in this case you don't use `squares` to render a list of moves.)
For each move in the tic-tac-toe game's history, you create a list item `<li>` which contains a button `<button>`. The button has a `onClick` handler which calls a function called `jumpTo` (that you haven't implemented yet).
For each move in the tic-tac-toe game's history, you create a list item `<li>` which contains a button `<button>`. The button has an `onClick` handler which calls a function called `jumpTo` (that you haven't implemented yet).
For now, you should see a list of the moves that occurred in the game and an error in the developer tools console.

5
beta/src/content/learn/updating-objects-in-state.md
View File

@@ -672,9 +672,8 @@ The `draft` provided by Immer is a special type of object, called a [Proxy](http
To try Immer:
1. Add `use-immer` to your `package.json` as a dependency
2. Run `npm install`
3. Then replace `import { useState } from 'react'` with `import { useImmer } from 'use-immer'`
1. Run `npm install use-immer` to add Immer as a dependency
2. Then replace `import { useState } from 'react'` with `import { useImmer } from 'use-immer'`
Here is the above example converted to Immer:

2
beta/src/content/learn/writing-markup-with-jsx.md
View File

@@ -214,7 +214,7 @@ This is why, in React, many HTML and SVG attributes are written in camelCase. Fo
/>
```
You can [find all these attributes in the React DOM Elements.](TODO) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
<Pitfall>

2
beta/src/content/learn/your-first-component.md
View File

@@ -296,7 +296,7 @@ Something isn't right about this `return` statement. Can you fix it?
<Hint>
You may get an "Unexpected token" error while trying to fix this. In that case, check the that semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
</Hint>

2
beta/src/content/reference/react-dom/components/select.md
View File

@@ -223,7 +223,7 @@ select { display: block; margin-top: 10px; width: 200px; }
### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your select box with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
<Sandpack>
```js

2
beta/src/content/reference/react-dom/hydrate.md
View File

@@ -64,7 +64,7 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
```js [[1, 3, "document.getElementById('root')"], [2, 3, "<App />"]]
```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
import {hydrate} from 'react-dom';
hydrate(<App />, document.getElementById('root'));

2
beta/src/content/reference/react/Profiler.md
View File

@@ -54,7 +54,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
#### Parameters {/*onrender-parameters*/}
* `id`: The string `id` prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
* `phase`: Either `"mount"` or `"update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
* `actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
* `startTime`: A numeric timestamp for when React began rendering the current update.

2
beta/src/content/reference/react/useMemo.md
View File

@@ -633,7 +633,7 @@ A JSX node like `<List items={visibleTodos} />` is an object like `{ type: List,
However, if React sees the same exact JSX as during the previous render, it won't try to re-render your component. This is because JSX nodes are [immutable.](https://en.wikipedia.org/wiki/Immutable_object) A JSX node object could not have changed over time, so React knows it's safe to skip a re-render. However, for this to work, the node has to *actually be the same object*, not merely look the same in code. This is what `useMemo` does in this example.
Manually wrapping JSX nodes into `useMemo` is not convenient. For example, you can't do this conditionally. This is usually you would wrap components with [`memo`](/reference/react/memo) instead of wrapping JSX nodes.
Manually wrapping JSX nodes into `useMemo` is not convenient. For example, you can't do this conditionally. This is usually why you would wrap components with [`memo`](/reference/react/memo) instead of wrapping JSX nodes.
</DeepDive>

2
beta/src/content/reference/react/useSyncExternalStore.md
View File

@@ -149,7 +149,7 @@ function emitChange() {
<Note>
When possible, we recommend to use the built-in React state with [`useState`](/reference/react/useState) and [`useReducer`](/reference/react/useReducer) instead. The `useExternalSyncStore` API is mostly useful if you need to integrate with existing non-React code.
When possible, we recommend to use the built-in React state with [`useState`](/reference/react/useState) and [`useReducer`](/reference/react/useReducer) instead. The `useSyncExternalStore` API is mostly useful if you need to integrate with existing non-React code.
</Note>

10
content/community/conferences.md
View File

@@ -52,6 +52,16 @@ June 27th, 2023. Tel Aviv, Israel
[Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
### React Nexus 2023 {#react-nexus-2023}
July 07 & 08, 2023. In-person in Bangalore, India
[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
### React India 2023 {#react-india-2023}
Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - 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}
### React Advanced 2022 {#react-advanced-2022}