249 lines
5.3 KiB
HTML
249 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>%REACT_APP_NAME%</title>
|
||
<style>
|
||
img {
|
||
width: 1.2em;
|
||
height: 1.2em;
|
||
}
|
||
|
||
svg {
|
||
max-width: 1.2em;
|
||
max-height: 1.2em;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||
<div id="root">
|
||
<h2>React is a JavaScript library for building user interfaces.</h2>
|
||
<h2>Shadow 1</h2>
|
||
<div id="shadow1"></div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<h2>
|
||
React Server Components (or RSC) is a new application architecture
|
||
designed by the React team.
|
||
</h2>
|
||
<iframe
|
||
id="iframe1"
|
||
width="800px"
|
||
height="600px"
|
||
src="http://localhost:3000/index.html"
|
||
></iframe>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<h2>
|
||
We’ve first shared our research on RSC in an introductory talk and an
|
||
RFC.
|
||
</h2>
|
||
<h2>Shadow 2</h2>
|
||
<div id="shadow2"></div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<h2>
|
||
To recap them, we are introducing a new kind of component—Server
|
||
Components—that run ahead of time and are excluded from your JavaScript
|
||
bundle.
|
||
</h2>
|
||
<iframe
|
||
id="iframe2"
|
||
width="800px"
|
||
height="600px"
|
||
src="https://react.dev/"
|
||
></iframe>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<div class="cont cont1">
|
||
<h2>
|
||
Server Components can run during the build, letting you read from the
|
||
filesystem or fetch static content.
|
||
</h2>
|
||
<ul>
|
||
<li>
|
||
They can also run on the server, letting you access your data layer
|
||
without having to build an API. You can pass data by props from
|
||
Server Components to the interactive Client Components in the
|
||
browser.
|
||
</li>
|
||
<li>以声明式编写 UI，可以让你的代码更加可靠，且方便调试。</li>
|
||
</ul>
|
||
</div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<div class="cont cont2">
|
||
<h2>
|
||
Since our last update, we have merged the React Server Components RFC
|
||
to ratify the proposal.
|
||
</h2>
|
||
<ul>
|
||
<li>
|
||
RSC combines the simple “request/response” mental model of
|
||
server-centric Multi-Page Apps with the seamless interactivity of
|
||
client-centric Single-Page Apps, giving you the best of both worlds.
|
||
</li>
|
||
<li>
|
||
React 使创建交互式 UI
|
||
变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React
|
||
能高效更新并渲染合适的组件。
|
||
</li>
|
||
<li>以声明式编写 UI，可以让你的代码更加可靠，且方便调试。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!--
|
||
This HTML file is a template.
|
||
If you open it directly in the browser, you will see an empty page.
|
||
|
||
You can add webfonts, meta tags, or analytics to this file.
|
||
The build step will place the bundled scripts into the <body> tag.
|
||
|
||
To begin the development, run `npm start` or `yarn start`.
|
||
To create a production bundle, use `npm run build` or `yarn build`.
|
||
-->
|
||
<script>
|
||
for (var i = 1; i <= 2; i++) {
|
||
var shadow = document.querySelector("#shadow" + i);
|
||
var cont = document.querySelector(".cont" + i);
|
||
var root = shadow.attachShadow({ mode: "open" });
|
||
// root.appendChild(document.importNode(cont, true));
|
||
root.appendChild(cont.cloneNode(true));
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|