console.log(add(2, 3));`;constscript=document.createElement('script');script.type="module";script.textContent=code2;document.body.appendChild(script);</script></body></html> 浏览器访问下: 这里用的就是 blob url: 我们可以把一
我们可以把一段 JS 代码,用 URL.createObjectURL 和 new Blob 的方式变为一个 url: URL.createObjectURL(new Blob([code], { type: 'application/javascript' })) 1. 那接下来的问题就简单了,左侧写的所有代码都是有文件名的。 我们只需要根据文件名替换下 import 的 url 就好了。 比如App.tsx 引入了 ./...
我们可以把一段 JS 代码,用 URL.createObjectURL 和 new Blob 的方式变为一个 url: URL.createObjectURL(newBlob([code],{type:'application/javascript'})) 那接下来的问题就简单了,左侧写的所有代码都是有文件名的。 我们只需要根据文件名替换下 import 的 url 就好了。 比如App.tsx 引入了 ./Aaa.tsx imp...
xxxxxxxxxx 6 1 /* 2 Write JavaScript/React code here and press Ctrl+Enter to execute. 3 4 Try: mountNode.innerHTML = 'Hello World!'; 5 Or: root.render(<h2>Hello React!</h2>); 6 */
Now, import this Counter component into your App.js file and check the Browser Preview for updates. function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.jsx</code> and save to...
Before you test the app, make sure to kill the server with Ctrl-C (if you have it running), and start it again with node server.js so that the latest changes are applied.##ConclusionYou have now learned how easy it is to create a code playground with realtime collaboration features ...
import{Playground}from'react-exercise-playground'exportconstDemo1=()=>{return<Playground/>} Playground是页面组件,使用时对宿主环境有侵入性(会动态加载一些js和css且默认会改变url hash,可以通过配置saveOnUrl={false}属性取消对url的改变)。 PlaygroundSandbox是对Playground做了沙盒封装,功能和配置项完全一致,且...
To try this setup, take a look at theNext 13 Live Editing Playgroundin this repo. Next.js using Pages Router In this section, we'll see how to use the React SDK with thepagesdirectory approach. The initalization remains the same when you work with Next.js. You can intialze the SDK ...
This is a React.js project bootstrapped with Vite integrating Wanda Getting Started First, run the development server: npm i npm run dev Open http://localhost:5173 with your browser to see the result. You can start editing the page by modifying src/App.tsx. Learn More To learn more about...
Quokka.js 不需要手动运行,行内显示变量结果 REST Client 发送REST风格的HTTP请求 React Native Storybooks storybook预览插件,支持react React Playground 为编辑器提供一个react组件运行环境,方便调试 React Standard Style code snippets react standar风格代码块 Sass sass插件 Settings Sync VSCode设置同步到Gist Sort ...