Getting Started with Solid

Updated on by Alan Morel @AlanMorelDev
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
SolidJS logo and pitch

Prerequisites

  1. Basics of using a command line interface.
  2. 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:

	npm install -g yarn

To test if you've installed Yarn, check the version:

	yarn -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:

	npx degit solidjs/templates/js app

Change directories into the app folder:

	cd app

Now, run the following command to install Solid's dependencies, found in the package.json file:

	yarn install

Or using NPM:

	npm 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:

	yarn dev

Or with NPM:

	npm run dev

If successful, you should see a message similar to this one:

	   vite 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 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:

	import { 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:

	import 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

Recommended Tutorial »