Getting Started with Solid
SolidJS, or Solid, is a declarative and reactive UI library that does not use a Virtual DOM. In this tutorial, you will learn more about Solid, how to get started with a basic app, and learn about the basics of how it works.
Why Solid?
While the front-end library landscape is extremely saturated, Solid stands out thanks to its blazing-fast performance, declarative nature, feature set, and its small bundle size.
While being tiny, it doesn't sacrifice in features as developers, especially React developers, will feel right at home using Solid, given that it already supports most major features found in React.
SolidJS logo and pitch
Prerequisites
- Basics of using a command line interface.
- Node and NPM installed. If you don't have them installed, follow our how to install Node guide.
Installing Yarn
We will be using Yarn to manage our dependencies. This step is technically optional because you can just stick to npm
if you prefer. To install Yarn, run this:
BASHnpm install -g yarn
To test if you've installed Yarn, check the version:
BASHyarn -v
If you see a version number, you're good to go.
Installing Solid
With Yarn installed, we can move on to installing Solid. For this, we will use the npx
command, which allows us to run Node commands that other people have written.
We will use the npx
command to use degit, a command that will clone our Solid app using a pre-defined template.
Run this command to create a new Solid app into a folder called app
:
BASHnpx degit solidjs/templates/js app
Change directories into the app
folder:
BASHcd app
Now, run the following command to install Solid's dependencies, found in the package.json
file:
BASHyarn install
Or using NPM:
BASHnpm install
Looking at the package.json
file, you can see how few dependencies this project has. Other than the dependency on Solid, it is only using vite, a fast build tool for front-end projects, and vite-plugin-solid, the plugin that allows vite
to build Solid apps.
Running Solid
Now that we have installed our dependencies, we can now run our app in development mode. This will start a server that will automatically rebuild the app whenever you make a change.
Run Solid in development mode:
BASHyarn dev
Or with NPM:
BASHnpm run dev
If successful, you should see a message similar to this one:
BASHvite v2.7.10 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 100ms.
The vite
server will automatically rebuild the app whenever you make a change. To see your app, open the browser to http://localhost:3000
.
This is what you should see:
Solid app in development mode.
Solid Basics
Let's go over some of the files in our Solid app.
Being a Node app, you will have your package.json
and yarn.lock
files (if using yarn).
The index.html
file is the main file served to the browser. The app gets mounted onto the element with the ID root
. As this is a modern app, it loads the code as a module, by specifying the type
attribute in the script
tag as module
. The module index.jsx
serves as the entry point for Solid.
Open your src/index.jsx
file:
JAVASCRIPTimport { render } from "solid-js/web";
import App from "./App";
import "./index.css";
render(App, document.getElementById("root"));
You can see how simple this really is. It is simply importing the App
component and index.css
file for styles, and mounting it onto the root
element by calling the render
function from solid/js-web
.
Finally, src/App.jsx
:
JAVASCRIPTimport styles from "./App.module.css";
import logo from "./logo.svg";
function App() {
return (
<div class={styles.App}>
<header class={styles.header}>
<img src={logo} class={styles.logo} alt="logo" />
<p>
Edit <code>src/App.jsx</code> and save to reload.
</p>
<a
class={styles.link}
href="https://github.com/solidjs/solid"
target="_blank"
rel="noopener noreferrer"
>
Learn Solid
</a>
</header>
</div>
);
}
export default App;
Here, you can see the JSX file that powers basically the entire app. In here you can see basic examples of how to create a component, including using variables just like any other JSX file.
Conclusion
Solid is a reactive and declarative front-end library that you can use to build user interfaces without a virtual DOM. With fast performance, small bundle size, and feature set, Solid is a great choice for new projects if you want to work with bleeding-edge technologies.
While still new, Solid shows a lot of potential and definitely worth giving a try and learning more about it using their docs.
Either way, we hope you enjoy Solid. Thanks for reading!
Resources
- Managing PHP Dependencies with Composer
- Getting Started with Svelte
- How to Serve Static Files with Nginx and Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a Deno app using Docker
- How to deploy an Express app using Docker
- Getting Started with Sass
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Using Push.js to Display Web Browser Notifications
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up a Local Web Server using Node.js