↑ ↓ navigate↵ selectesc close

Intro to SolidJS

CodingCat.dev tutorial cover image

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.

✏️ Visual Architecture Diagram

how this course connects together.

Follow AJ from first principles to production-ready architecture.

✏️ Visual Diagram: Intro to SolidJS
✓ Good PatternVISUAL DIAGRAM
Visual Diagram: Intro to SolidJSVisual architectural diagram showing: Step 1: Getting Started (Mental model & why it matters) -> Step 2: Basics (Under the hood & live code) -> Step 3: Ship It Purrfectly (✓ Production trade-offs). Step-by-step diagram breakdown for Intro to SolidJS: start with Getting Started, implement Basics, and ship to production.✓Step 01Getting StartedMental model & why it matters✓Step 02BasicsUnder the hood & live code✓Step 03Ship It Purrfectly✓ Production trade-offsunroll the yarn✓ production ready
[Diagram Walkthrough]Step-by-step diagram breakdown for Intro to SolidJS: start with Getting Started, implement Basics, and ship to production.
AAA Contrast Verified