Published
Edited
Sep 23, 2019
2 stars
Insert cell
md`# lol react`
Insert cell
{
const rootDiv = DOM.element("div");
ReactDOM.render(h(App), rootDiv);
return rootDiv;
}
Insert cell
App = () => {
return h(React.Fragment, null, h(Rainbow), h(Test));
}
Insert cell
Test = () => {
return h(
"div",
{ className: emotion.css`font-family: sans-serif; color: green;` },
"TODO: Render Svelte"
);
}
Insert cell
Rainbow = () => {
const [counter, setCounter] = React.useState(0);
React.useEffect(() => {
const loop = () => {
setCounter(c => c + 1);
setTimeout(loop, 100);
};
loop();
}, []);
const greeting = "lol @ react";
const rainbow = [
"#FF0000",
"#FF7F00",
"#FFFF00",
"#00FF00",
"#0000FF",
"#7A00E5",
"#D300C9"
];
const rainbowGreeting = greeting.split("").map((letter, index) => {
const color = rainbow[(index + counter) & rainbow.length];
return h("span", { style: { color }, key: index }, letter);
});
return h("h1", null, rainbowGreeting);
}
Insert cell
h = React.createElement
Insert cell
emotion = r("emotion")
Insert cell
React = r("react")
Insert cell
ReactDOM = r("react-dom")
Insert cell
r = require.alias({
emotion: "emotion@10.0.14/dist/emotion.umd.min.js",
react: "react@16/umd/react.development.js",
"react-dom": "react-dom@16/umd/react-dom.development.js"
})
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