Browse Source

[Beta] Responsive iframes (#5500)

* [Beta] Repsonsive iframes

* Fix links
main
dan 2 years ago
committed by GitHub
parent
commit
e8917a06de
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  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

@ -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,
code: InlineCode,
pre: CodeBlock,
CodeDiagram,
@ -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

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

@ -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*/}

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

@ -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" />

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

@ -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.

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

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

Loading…
Cancel
Save