> Canonical URL: https://codingcat.dev/course/intro-to-solid-js

# Intro to SolidJS | CodingCat.dev Course

🧶 CodingCat.dev Course4 Lessons[![](/logos/tags/solidjs-symbol-light.svg)![](/logos/tags/solidjs-symbol-dark.svg)SolidJS](/topic/solidjs)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[▶ Watch Course Playlist on YouTube ↗](https://www.youtube.com/@codingcatdev/playlists?sub_confirmation=1)[Start Course →](/course/intro-to-solid-js/lesson/fundamentals)

# Intro to SolidJS

![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e229da54c6839b8d967125167ef9108ecd6fb935-1920x1080.png?w=1920&q=82&fit=max&auto=format)[![Anthony Campolo](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/fd761ba9c31650f505efc96d02664fdd6cb7fdf2-460x460.jpg?w=96&h=96&q=82&fit=max&auto=format)Anthony Campolo](/author/anthony-campolo)

## What is Solid?

SolidJS is a modern JavaScript library for building user interfaces. It was created by Ryan Carniato in 2018 and has gained a strong following in the open source JavaScript and web development community. SolidJS is based on the idea of reactive state, which means that components are only updated when their state changes.

### What are the Benefits of Solid?

It is designed to be efficient, flexible, and easy to use. SolidJS's reactivity gives SolidJS an advantage when it comes to performance, even for large applications. With support for a wide range of features including custom hooks, SSR, and Suspense, SolidJS is a great choice for building a wide variety of web apps.

The framework aims to have a simple API that is similar to React and easy to learn. If you are already familiar with React, you will be able to pick up SolidJS fairly quickly after learning a few quirks in their differences.

In this course, you will learn everything you need to know to build user interfaces with SolidJS. You will learn the basics of SolidJS's syntax and router along with more advanced topics, such as custom hooks, state management, SSR, and Suspense. By the end of this course, you will be able to build performant, flexible, and intuitive user interfaces with SolidJS.

**What you will learn:**

- The basics of SolidJS
- State management
- Routing
- Custom hooks
- Server-side rendering
- Suspense

**Who is this course for?**

This course is for web developers who want to learn how to build user interfaces with SolidJS. If you are already familiar with React, you will be able to pick up SolidJS quickly.

**What you will need:**

- A basic understanding of JavaScript
- A text editor or IDE (preferably VSCode)
- A Node.js environment

**Go Pro and start learning SolidJS today!**

## course lessons.

1

### Getting Started

- [1.1FundamentalsFundamentals of SolidJS![](/logos/tags/solidjs-symbol-light.svg)![](/logos/tags/solidjs-symbol-dark.svg)SolidJS📖 Written LessonStart Lesson →](/course/intro-to-solid-js/lesson/fundamentals)

2

### Basics

- [2.1Solid BasicsSolidJS Basics![](/logos/tags/solidjs-symbol-light.svg)![](/logos/tags/solidjs-symbol-dark.svg)SolidJS📖 Written LessonStart Lesson →](/course/intro-to-solid-js/lesson/basics)
- [2.2DeploymentSolidJS Deployment![](/logos/tags/solidjs-symbol-light.svg)![](/logos/tags/solidjs-symbol-dark.svg)SolidJS📖 Written LessonStart Lesson →](/course/intro-to-solid-js/lesson/deployment)

3

### SolidStart

- [3.1SolidStartSolidStart![](/logos/tags/solidjs-symbol-light.svg)![](/logos/tags/solidjs-symbol-dark.svg)SolidJS📖 Written LessonStart Lesson →](/course/intro-to-solid-js/lesson/solidstart)

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Intro to SolidJS✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Intro to SolidJS: start with Getting Started, implement Basics, and ship to production.AAA Contrast Verified

## related deep dives.

[View All→](/blog)[![The Odin Project 6: Modern React 19, State Architecture & TypeScript](https://cdn.sanity.io/images/hfh83o0w/production/638109d3eb8a895902f71dbb25851fa9c1ddbc69-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-modern-react-and-typescript)November 4, 2026[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [The Odin Project 6: Modern React 19, State Architecture & TypeScript](/course/odin-modern-react-and-typescript)

Master React 19 components, strict TypeScript props, derived state vs. useEffect traps, Server Actions, and island hydration in Astro.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 4: JavaScript Deep Dive (Closures, Event Loop, Async & TDD)](https://cdn.sanity.io/images/hfh83o0w/production/be8af9a324ba5ea08256e88406a7de11fbe6af69-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-javascript-deep-dive)November 4, 2026[![](/logos/tags/vite-symbol-light.svg)![](/logos/tags/vite-symbol-dark.svg)Vite](/topic/vite)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)

### [The Odin Project 4: JavaScript Deep Dive (Closures, Event Loop, Async & TDD)](/course/odin-javascript-deep-dive)

Master lexical closures, ES Modules, the V8 Event Loop (microtasks vs. macrotasks), Promise concurrency, and Test-Driven Development with Vitest.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)