lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

[Beta] Responsive iframes (#5500) 

* [Beta] Repsonsive iframes

* Fix links
main
dan 2 years ago
committed by GitHub
parent
1fd3538718
commit
e8917a06de
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      beta/src/components/MDX/MDXComponents.tsx
  2. 4
      beta/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
  3. 14
      beta/src/content/blog/2021/12/17/react-conf-2021-recap.md
  4. 28
      beta/src/content/community/videos.md
  5. 2
      beta/src/content/learn/responding-to-events.md
  6. 2
      beta/src/content/learn/writing-markup-with-jsx.md

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']) { function YouTubeIframe(props: any) {
if (href?.startsWith('TODO')) {
return children;
}
return ( return (
<Link href={href} {...props}> <div className="relative h-0 overflow-hidden pt-[56.25%]">
{children} <iframe
</Link> 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, h3: H3,
h4: H4, h4: H4,
hr: Divider, hr: Divider,
a: LinkWithTodo, a: Link,
code: InlineCode, code: InlineCode,
pre: CodeBlock, pre: CodeBlock,
CodeDiagram, CodeDiagram,
@ -420,6 +423,7 @@ export const MDXComponents = {
Hint, Hint,
Solution, Solution,
CodeStep, CodeStep,
YouTubeIframe,
}; };
for (let key in MDXComponents) { 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. 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 /> <YouTubeIframe src="https://www.youtube.com/embed/TQQPAU21ZUw" />
<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>
**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!** **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: 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*/} ## 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: 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*/} ## 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: 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*/} ## 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: 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*/} ## 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: 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*/} ## 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: 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*/} ## 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/): [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*/} ## And more... {/*and-more*/}

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: 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*/} ### 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: 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*/} ### 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: 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*/} ### 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: 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*/} ### 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: 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*/} ### 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: 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*/} ### 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/): [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*/} ### 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*/} ### React Conf 2019 {/*react-conf-2019*/}
A playlist of videos from 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*/} ### React Conf 2018 {/*react-conf-2018*/}
A playlist of videos from 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*/} ### React.js Conf 2017 {/*reactjs-conf-2017*/}
A playlist of videos from React.js 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*/} ### React.js Conf 2016 {/*reactjs-conf-2016*/}
A playlist of videos from React.js 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*/} ### React.js Conf 2015 {/*reactjs-conf-2015*/}
A playlist of videos from React.js 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*/} ### 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). 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*/} ### Introduction to React {/*introduction-to-react*/}
Tom Occhino and Jordan Walke introduce React at Facebook Seattle - (2013 - 1h20m). 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" />

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*/} ### 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. By convention, event handler props should start with `on`, followed by a capital letter.

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> <Pitfall>

Write Preview
Loading…
Cancel
Save