Building a Task Tracker with Solid

Solid is a relatively new JavaScript framework that’s been gaining attention in the web development community. With its straightforward state management, fine-grained reactivity, and high performance, Solid has put itself on a pedestal for other JavaScript frameworks. In this article, we’ll walk you through building a task tracker with Solid.

Why Solid?

If you’ve worked with React before, Solid will look very familiar. When React Hooks was first announced, it was expected to solve the state management crisis. However, global state management remained complex, and numerous libraries showed up to try and solve the problem, adding unnecessary complexity to our codebase. With Solid, things are different. Global state management is as easy as creating state and exporting it.

Setting up a Solid App with TypeScript

To set up a Solid app on your local machine, you’ll need to install Node.js. Once installed, create a new Solid app by running the following command:

npx degit solidjs/templates/ts my-app

This generates a Solid/TypeScript app. For JavaScript, change the command to solidjs/templates/js.

Understanding the App Structure

The generated app uses Vite as its default build tool and pnpm as the default package manager. The app component lives inside the ./src/App.tsx file:
“`tsx
import { Component } from ‘solid-js’;

const App: Component = () => {
return

;
};

export default App;
“`
Using JSX to Structure Our Task Tracker

Let’s use JSX to structure our task tracker. Inside the ./src/App.tsx file, replace what you currently have with this:
“`tsx
import { Component, createSignal } from ‘solid-js’;

const App: Component = () => {
const [taskList, setTaskList] = createSignal([
{ id: 1, text: ‘Push code to GitHub’, completed: false },
]);

return (

);
};

export default App;
“`
Creating and Updating State in Solid

Solid has a createSignal Hook to create state. Let’s create a taskList state to house our tasks. Inside the ./src/App.tsx file, we’ll start by creating a type for each task:
typescript
interface Task {
id: number;
text: string;
completed: boolean;
}

Next, we’ll create our taskList state:
tsx
const [taskList, setTaskList] = createSignal<Task[]>([]);

Adding Tasks to Our State

Let’s create a function for adding tasks to our state. We’ll name it addTask:
tsx
const addTask = (e: Event) => {
e.preventDefault();
const taskInput = document.getElementById('taskInput') as HTMLInputElement;
const newTask: Task = {
id: Math.random(),
text: taskInput.value,
completed: false,
};
setTaskList([...taskList(), newTask]);
taskInput.value = '';
};

Using the createStore Hook for Nested Reactivity

Solid has a createStore Hook for creating and managing nested states. Let’s use it to update our task tracker:
“`tsx
import { createStore } from ‘solid-js/store’;

const [taskList, setTaskList] = createStore({
tasks: [],
});

const addTask = (e: Event) => {
e.preventDefault();
const taskInput = document.getElementById(‘taskInput’) as HTMLInputElement;
const newTask: Task = {
id: Math.random(),
text: taskInput.value,
completed: false,
};
setTaskList(‘tasks’, […taskList.tasks, newTask]);
taskInput.value = ”;
};
“`
Conclusion

In this article, we’ve covered the basics of Solid by building a task tracker. Solid’s approach to building web applications is quite impressive and relatively straightforward when compared to other frontend frameworks. With direct compilation to real DOM nodes and without the need for a virtual DOM, web applications built with Solid have the uncommon advantage of being fast.