Let's take a look at some of the new frameworks. SolidJS looks very much like Hooks-style React, but apparently it abandons virtual DOM.
I never used it before, so let's start with a hello world app, and over the next few episodes I'll try to build something a bit more substantive.
Getting started
We can start it with degit, which seems to be the most popular tool for a lot of frameworks these days:
$ npx degit solidjs/templates/js episode-43
Then we do the usual steps to start the app:
$ npm i
$ npm run dev
index.html
We can start with cleaned up index.html, it's pretty much what you'd expect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Solid App</title>
</head>
<body>
<div id="root"></div>
<script src="/src/index.jsx" type="module"></script>
</body>
</html>
index.jsx
This comes from the template as well. I'm not sure what /* @refresh reload */ is for, most likely something related to HMR.
/* @refresh reload */
import { render } from "solid-js/web"
import "./index.css"
import App from "./App"
render(() => <App />, document.getElementById("root"))
index.css
SolidJS has both global and (awkward coming from Svelte) module-scoped CSS. For this app I'll just use global CSS:
body {
margin: 0;
min-height: 100vh;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
App.jsx
It looks very close to React with useState. It's not quite the same, as semantics are very different, and you access current value of count with count() not just count. But for simple cases, it should be easy transition for React developers.
import { createSignal } from "solid-js"
function App() {
let [count, setCount] = createSignal(0)
return (
<div>
<div>{ count() }</div>
<button onClick={() => setCount(count() + 1)}>Click me!</button>
</div>
)
}
export default App
Building the app
To build the app, use npm run build, and it will be created in dist... And once again it will not work for GitHub Pages as it uses absolute paths. I have no idea why so many frameworks have this awful default.
We need to modify vite.config.js to use relative paths. Fortunately that's just one line change base: "./":
import { defineConfig } from "vite"
import solidPlugin from "vite-plugin-solid"
export default defineConfig({
base: "./",
plugins: [solidPlugin()],
build: {
target: "esnext",
polyfillDynamicImport: false,
},
})
Story so far
And here's the result:
I deployed this on GitHub Pages, you can see it here.
Coming next
In the next few episodes, we'll try to build some less trivial things with SolidJS.
Top comments (0)