For SolidJS fans, here is a way to use it directly in a browser (although you loose some performances benefits)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module" src="./src/index.js"></script>
</body>
</html>
solid.js
import {
createSignal,
onCleanup,
} from "https://cdn.skypack.dev/solid-js";
import { render } from "https://cdn.skypack.dev/solid-js/web";
import html from "https://cdn.skypack.dev/solid-js/html";
export {createSignal, onCleanup, render, html};
index.js
import { createSignal, onCleanup, render, html } from "./libs/solid.js";
const [count, setCount] = createSignal(0),
timer = setInterval(() => setCount(count() + 1), 1000);
function Titre() {
return html`<span style="margin: 0 10px">COUNTER</span>`;
}
const App = () => {
onCleanup(() => clearInterval(timer));
return html`
<div style="font-weight:bold">
${Titre}
<span>${count}</span>
</div>
`;
};
render(App, document.body);
Top comments (3)
What are the "performances benefits" that you lose?
Look here : FAQ
Explicit reactivity avoids all of the pitfalls of React's update model (which I'd call it a "leaky abstraction") ... the Vue developers already knew this, libs like Solid and others take it a step further :)
(stuff like
useMemo, which React fans enthusiastically promote, looks to me like the nail in the coffin of React's "auto magically" update model)