SolidJS is a declarative JavaScript framework used for building UIs and web applications pragmatically and performatively. Even though it's relatively new, its similarity with other JavaScript frameworks like React and Svelte has made it more adoptable for the developer community.
\nSo in this tutorial, I'll give you a complete walkthrough of SolidJS and help you understand the essentials. You'll also build a simple web application with SolidJS to get a better hang of the basics. Finally, I'll compare and contrast it with the most popular framework in town — React.
\nSolidJS takes the syntax and developer experience of React and combines it with the performance of Svelte to give you the best of both worlds.
\nJust like React, Solid uses JSX to render HTML in the browser. It also uses similar syntax for reactivity to update DOM in real-time. However, unlike React, it uses a compiled DOM instead of virtual DOM.
\nThis means you get a smaller size pure JavaScript bundle, much like the production bundle of your Svelte or Vanilla JS application. This makes it blazingly fast and highly performant.
\nLet's now understand the fundamentals of SolidJS using some code examples. To follow along, you can directly run these snippets in the SolidJS playground.
\nSolid follows the component architecture for modularity and reusability. Let's see how you can create an entry component and render it to the DOM.
\nHere's a component HelloWorld that is injected into the DOM inside an HTML element that has an id app:
import { render } from "solid-js/web";\n\nfunction HelloWorld() {\n \n\n return (\n <h1>Hello World</h1>\n );\n}\n\nrender(() => <HelloWorld />, document.getElementById("app")!);From the above code, it's also clear that components are functions that return the HTML template using JSX.
\nSolid components allow only a single JSX element at the top level. To combat this, you can use special JSX elements called fragments:
\n <>\n <h1>Hello World </h1>\n <p>This is my first solid app </p>\n </>Components can be nested inside one another. For instance, here you have a <Header/>component:
function Header() {\n return (\n <h1>\n Header\n </h1>\n );\n}\n\nexport default Header;That is rendered inside the main <App/>component:
import { render } from "solid-js/web";\nimport Header from './header';\n\nfunction App() {\n \n\n return (\n <>\n <Header/>\n <h1>\n Hello World\n </h1>\n </>\n );\n}\n\nrender(() => <App />, document.getElementById("app")!);That should give you both the components on the DOM like this:
\nProps are data and functions you can pass from one component to another to share data and features between the two components. In the previous example, you can pass a title prop to the <Header/> component:
...\n <Header title="Header"/>\n...Then consequently consume this prop inside the child component:
\nfunction Header({title}) {\n return (\n <h1>\n {title}\n </h1>\n );\n}\n\nexport default Header;Reactivity allows you to create variables that dynamically trigger a DOM update when changed.
\nSolidJS allows you to create reactive variables called signals using the createSignal function. This function takes in the initial value of the variable as a parameter. And it returns an array where the first element is the variable itself and the second element is a function used to mutate that variable.
Here's an example that changes the reactive variable called name:
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction DisplayName() {\n const [name, setName] = createSignal('fuzzysid');\n const changeName = () => setName('siddhant')\n\n return (\n <>\n <h1> {name} </h1>\n <button onClick={changeName}> Change Name </button>\n </>\n );\n}\n\nrender(() => <DisplayName />, document.getElementById("app")!);Initially, the name outputs the string 'fuzzysid':
\nWhat a You can take the current value of a signal inside the signal's mutation's callback function. The above code used the present value of Effects are triggers or watchers that can help you fire a function when a signal updates. Let's say, in the previous example, you want to throw an alert when the count becomes greater than 5. To do so, you can create an effect using the So now, if you click on the Increment button, you should get an alert when it becomes greater than 5: Solid provides special components called Once the For instance, consider the following example that uses the It renders a list of posts fetched from a dummy API: Here's an example that does that: When you enter the red box, the Let's combine all that knowledge to build a small todo application with Solid. To get started, you'll create a new SolidJS project configured with Vite by running: That should create a new Solid project for you. Navigate inside this project and open it in a code editor (like VS Code): Next, install the dependencies by running: And finally, kickstart the app by running: That should open the project for you at Your initial project structure gives the Notice that you also have an Now let's create some boilerplate files. Here's what the architecture of our Todo app would look like: You'll have your top-most parent First, the Second, the Create a JSX file for each of the above components. The To store the Now let's add the template inside the component's JSX: You bind the input field to the You also need to create the Here's how the entire You also need to render this inside the Once you do that, you should see an input field with a submit button rendered by the Now let's work on two simple components responsible for rendering the todos. First is the You use the When you click on an item, you invoke the Finally, render the Great! Let's complete the todo app by writing the logic for adding and deleting a todo. To add a new todo, you only need to complete the logic inside the You'll add the It looks like you're able to add todos now. Awesome! To delete the todo when they're clicked, populate your First, make a copy of the current todos array. Then, filter through this copy to remove the todo you wish to delete. Finally, update your original You can delete todos as well; fantastic! Functionally your app is complete, but it surely misses some aesthetics. Let's add some simple yet neat-looking styles. You can directly update the styles in our And that should give us a much better-looking todo app now: Using effects, refs and events are also much similar to React in Solid. So it's safe to say that Solid provides almost the same if not slightly different syntactic sugar as React. Then why do we need another React-like framework for building web applications? Solid differs from React in terms of performance, developer experience, rendering algorithm, and reactivity. Let's skim through the key differences: At the beginning of this tutorial, we discussed how Solid doesn't use a virtual DOM. Instead, it uses a compiled DOM. This gives it a significant edge over React and any other framework in terms of run-time performance. It generates a blazingly fast production bundle that is aimed to provide a more rich user experience for your users. Reactivity lies at the heart of SolidJS, which is why you'll never find any unnecessary renders of your Solid components. Only the part of a template that needs to update will re-render. With React, however, change in a state leads to re-rendering the entire component. There are ways to combat this, but it needs additional efforts to learn and incorporate these concepts into your applications. Even though Solid has excellent and extensive documentation, the React community is much larger since it has been around for longer. That can be a deal-breaker if you want to build scalable web applications quickly. Even third-party libraries are short in number for Solid in comparison to React. Solid has an exciting future and is worth a side-project or an MVP for your startup. If you wish to explore Solid in-depth, you can check out an official tutorial by the Solid team here that walks you through every concept in Solid. You can also explore the entire code for the demo in this tutorial here. Until next time!state is to React components, a signal is to Solid components. Here's another useful and typical example of reactive variables:
\nimport { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);count to increment and decrement it accordingly. Effects
\ncreateEffect function. It takes a callback function as a parameter. This callback function is fired whenever a signal invoked inside it changes.
\ncreateEffect(()=>{\n if(count()>5) alert('Count is greater than five')\n})Conditionals
\n<Show> to render a template based on a condition or the value of a signal. Here's an example of that:
\nimport { render } from "solid-js/web";\nimport { createSignal,Show } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n <Show when={count()>5}>\n <p>Count is greater than five </p>\n </Show>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);count becomes greater than 5, the <p> will start showing on the DOM:onMount method to fetch and render some data:
\nimport { render } from "solid-js/web";\nimport { createSignal, onMount, For } from "solid-js";\n\nfunction App() {\n const [posts, setPosts] = createSignal([]);\n\n onMount(async () => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);\n setPosts(await res.json());\n });\n\n return <>\n <h1>Effects: onMount</h1>\n\n <div>\n <For each={posts()}>{ post =>\n <p>\n {post.body}\n </p>\n }</For>\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));onCleanup
\nonCleanup is the exact opposite of onMount. It's fired whenever a component unmounts from the DOM completely. Ideally, you can use this method to clear any event listeners you may have added to your DOM elements.
\nimport { render } from "solid-js/web";\nimport { onMount, onCleanup } from "solid-js";\n\nfunction App() {\n\n const handleMouseEnter=()=>{\n console.log('Entered the box')\n }\n\n onCleanup(()=>{\n const box=document.querySelector('#box');\n box.removeEventListener('mouseenter',handleMouseEnter)\n })\n\n onMount(async () => {\n const box=document.querySelector('#box');\n const onMouseEnter=box.addEventListener('mouseenter',handleMouseEnter)\n });\n\n return <>\n <h1>Effects</h1>\n\n <div id="box" style={{height:'200px',width:'200px',border:'1px solid red'}}>\n\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));mouseenter event fires, and you get a message on the console. As a cleanup, when the component unmounts, we remove this event listener from that <div>. Build a Todo App with SolidJS
\nSetup
\n
\nnpx degit solidjs/templates/js my-app
\ncd my-app && code .
\nnpm i
\nnpm run starthttp://localhost:3000. Awesome!Architecture & Boilerplate Code
\n<App/> component by default. This is going to be your entry point component. For starters, clean everything that's inside it:
\nimport styles from './App.module.css';\n\n\nfunction App() {\n \n return (\n <div class={styles.App}>\n \n </div>\n );\n}\n\nexport default App;App.module.css file being imported here. It's then referenced inside the <div> container. You'll add all our styles inside this App.module.css file and reference it the same way. <App/> component that would store all the todos and the functions to manipulate these todos. This <App/> component will have two child components. <AddTodo> component will be responsible for adding a new todo.<Todos/> component will be responsible for rendering the list of todos via its own child — <TodoItem/> component. The
\n<AddTodo/> component will render an input field and a button. The input field is where the user types a new todo. The button will be used to send this new todo back to a function in the parent <App/> component to add this todo to the todos list. This function will be taken as props inside the <AddTodo/> component.newTodo, create a signal since you want this property to be reactive based on what the user enters in the input.
\n const [newTodo,setNewTodo]=createSignal('')
\nimport {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;newTodo signal. You now need to create the handleChange function that updates the newTodo signal based on the onChange event. handleClick function that passes the newTodo signal to the addTodo function prop and clears the input state.
\n const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }<AddTodo/> component looks like:
\nimport {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;<App/> component:
\nimport styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport AddTodo from './AddTodo';\n\nfunction App() {\n\n const addTodo=(newTodo)=>{\n \n }\n\n const deleteTodo=(todo)=>{\n\n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n </div>\n );\n}\n\nexport default App;<AddTodo/> component on the screen:Rendering Todos
\n<Todos/> component. As you already know, this component takes in two props — a list of todos called the todos signal and the deleteTodo method.
\nimport { For } from 'solid-js';\nimport TodoItem from './TodoItem';\n\nfunction Todos({todos,deleteTodo}){\n console.log(todos())\n return(\n <For each={todos()}>{(todo,ind)=>\n \n }\n </For>\n )\n\n}\n\nexport default Todos;<For/> component to loop through the list of todos. Now, you need to pass each todo item and the deleteTodo method further down to your <TodoItem/> component. This component is responsible for rendering each list item.
\nfunction TodoItem({todo,deleteTodo}){\n const handleDelete=()=>deleteTodo(todo);\n return(\n <p onClick={handleDelete}>{todo}</p>\n )\n}\n\nexport default TodoItem;deleteTodo function and pass the clicked todo item as a parameter. <Todos/> component inside the root <App/> component.
\nimport styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport Todos from './Todos';\nimport AddTodo from './AddTodo';\n\nfunction App() {\n const [todos,setTodos]=createSignal([])\n\n const addTodo=(newTodo)=>{\n }\n\n const deleteTodo=(todo)=>{\n \n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n <Todos deleteTodo={deleteTodo} todos={todos}/>\n </div>\n );\n}\n\nexport default App;Adding and Deleting Todos
\naddTodo function in the <App/> component. This function already takes a newTodo parameter, the new todo item you need to add.
\nconst addTodo=(newTodo)=>{\n setTodos([newTodo(),...todos()]);\n}newTodo in the todos signal that is an array using its setter function setTodos. Use JavaScript array destructuring here to ensure to keep the previous todos intact. Let's give this a whirl now:deleteTodo function:
\n const deleteTodo=(todo)=>{\n let newTodos=todos;\n newTodos=newTodos().filter(_todo=>_todo!=todo);\n setTodos(newTodos)\n }todos signal with this copy using the setTodos setter. Let's test it out now:Styling the App
\nApp.module.css file:
\n*{\n margin: 0;\n padding: 0;\n}\n\n.App {\n text-align: center;\n height: 100vh;\n background: #F8F8F8;\n padding: 100px;\n display:flex;\n flex-direction: column;\n align-items: center;\n}\n\n.heading{\n font-size: 96px;\n margin-bottom: 20px;\n}\n\ninput{\n border-radius: 12px;\n outline: none;\n border: none;\n padding: 5px 20px;\n margin-right: 20px;\n height: 60px;\n width: 400px;\n font-size: 24px; \n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\nbutton{\n height: 65px;\n width: 150px;\n border: none;\n outline: none;\n border-radius: 12px;\n font-size: 24px;\n padding: 5px 15px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n cursor: pointer;\n font-weight: 600;\n background:#2e3136;\n color:#fff;\n}\n\np{\n height: 60px;\n background: white;\n width: 600px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n font-size: 24px;\n margin: 20px 0px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\np:hover{\n background: rgb(232, 169, 146);\n color:#fff;\n cursor: pointer;\n}\n\n\n.header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}Performance
\nSolid is Truly Reactive
\nCommunity Support, Documentation, and Resources
\nConclusion
\n