@ -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.
**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!**
@ -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:
<iframestyle={{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>
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:
<iframestyle={{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>
[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/):
<iframestyle={{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>
@ -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:
<iframestyle={{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>
<YouTubeIframesrc="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:
<iframestyle={{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>
<YouTubeIframesrc="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:
<iframestyle={{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>
<YouTubeIframesrc="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:
<iframestyle={{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>
<YouTubeIframesrc="https://www.youtube.com/embed/qn7gRClrC9U"title="YouTube video player"/>
@ -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:
<iframestyle={{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>
<YouTubeIframesrc="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:
<iframestyle={{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>
<YouTubeIframesrc="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/):
<iframestyle={{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>
<YouTubeIframesrc="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
### 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).
<iframetitle="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>
<YouTubeIframetitle="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).
<iframetitle="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>
<YouTubeIframetitle="Tom Occhino and Jordan Walke introduce React at Facebook Seattle"src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms"/>
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.
@ -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)
dan
2 years ago
GitHub