Intro to SolidJS: How to Create Fast, Reactive Web Apps
Tags: javascript, webdev, tooling, solidjs
Published: 2023-01-08 09:37:08


### Intro

[SolidJS](https://www.solidjs.com/) is a lightweight JavaScript library for building web applications with a focus on performance and ease of use. It was designed to provide a smooth and seamless developer experience, with a simple and intuitive API that makes it easy to get started building web apps right away. Whether you're a seasoned developer or just getting started with web development, [SolidJS](https://www.solidjs.com/) is an excellent choice for building fast, scalable, and reliable web applications. In this post, we'll be exploring the various features and capabilities of [SolidJS](https://www.solidjs.com/) in this powerful framework. 


### So let's start
[SolidJS](https://www.solidjs.com/) is a declarative JavaScript framework for building fast UI with maximum control over reactivity.  It was created by [Ryan Carniato](https://dev.to/ryansolid) in 2018 and is loved by developers because it's both pragmatic and extremely performant. On the surface it shares many similarities with react, components are JavaScript functions that return `JSX` for the UI, however unlike react there's no virtual dom, it uses a compiler more like [Svelte](https://svelte.dev/) that converts your code into vanilla JavaScript to brings you as close to the DOM as possible.

![React vs SolidJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gtcwfv2gk06qimo2hgs.png)

But what it's more important here it's that it's truly reactive, a function component is only called once which means you can do unheard things, for example you can set intervals predictably at the top level, and data that changes or state is managed with the create signal primitive which returns a `getter` and `setter`, the framework will observe this data and surgically update its exact location in the DOM when it changes, instead of re-rendering the entire component, again it's truly reactive.

![SolidJS Observe Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iufxvnk6pcgiza8zcy5u.png)

To get started just run the command:
`npx degit solidjs/templates/js my-app`

Uses [Vite](https://vitejs.dev/) as the build tool and should look very familiar if you've ever used react.
![React VS Solid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv294kuit9os299rdzhc.png)

You can define a component as a plain JavaScript function, when defining the UI with `JSX` you get a real DOM element instead of some weird framework abstraction.

To add a reactive state to a component you can use the `createSignal` function that provides a `getter` and `setter`, also notice how the `getter` is a function,  this allows the framework to observe the current value reactively.

![Using createSignal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p616kivatghmppwxo35z.png)

We can easily create a derived state by simply defining another function based on the original signal.

It also provides a function to memonize the return value or expensive computations, in some cases you may want to run code when your data changes, for that `createEffect` allows you to run side effects on any signals referenced in the body of the function, it will automatically be subscribed to re-run the side effect whenever the value changes.

Also provides `onMount` and `onCleanup` functions that tap into the beginning and end of the component lifecycle.

![Full component using SolidJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyscjdc5a64773wsfbf4.png)

The framework also goes out of it's way to make `JSX` more developer friendly here, we have some example with this special components:


- `Show` component to handle conditional logic

![Conditional Rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pfr9jvdixqosq6jaxcl.png)


- `For` component to simplify loops over a collection of items

![For component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z53kyugw5v906ky96tn.png)

- `Directives` it supports custom directives with a `use` keyword which is a highly efficient way to attach custom behaviors to different elements.

![Using directives](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbidm9oqziq1spadjidf.png)

Thank you for joining me, and I hope you enjoy reading about [SolidJS](https://www.solidjs.com/) as much as I enjoyed working with it!

### Resources
- [SolidJS App used in post](https://github.com/OmerHerera/omher-solidjs-app)