The avatar for @keller-mark
Mark Keller
Public
Edited
May 2, 2023
2 stars
Insert cell
Insert cell
<div id="root" style="width: 200px; height: 200px">
Loading...
</div>
Insert cell
{
function Demo(props) {
return React.createElement(
Smile, { style: { width: 100, height: 100 }}
);
}
root.render(React.createElement(Demo));
}
Insert cell
root = {
const container = document.getElementById('root');
return createRoot(container);
}
Insert cell
Smile = (await importWithMap("react-feather", importMap)).Smile
Insert cell
createRoot = (await importWithMap("react-dom/client", importMap)).createRoot
Insert cell
ReactDOM = await importWithMap("react-dom", importMap)
Insert cell
React = await importWithMap("react", importMap)
Insert cell
importMap = ({
imports: {
"react": "https://esm.sh/react@18.2.0?dev",
"react-dom": "https://esm.sh/react-dom@18.2.0?dev",
"react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
"prop-types": "https://esm.sh/prop-types@15.8.1?dev",
"react-feather": "https://unpkg.com/react-feather@2.0.10/dist/index.js"
},
});
Insert cell
importWithMap = (await import('https://unpkg.com/dynamic-importmap@0.0.1')).importWithMap
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more