SolidJS: The Complete Guide

A comprehensive guide to reactive web development with SolidJS and TypeScript

This repository is dedicated to tracking and addressing any issues, feedback, or suggestions related to the book. Your insights are invaluable, whether it's to report errors, share thoughts on the book, or suggest ways to improve the content.

Please feel free to open an issue if:

• You’ve found an error in the text or examples.
• You have questions or would like further clarification on any topic.
• You have suggestions on improving the book’s structure, examples, or depth.

Your feedback not only helps improve the book for all readers but also contributes to building a better learning resource for the SolidJS community.

The book is available for purchase:

• https://solid.courses/p/solidjs-the-complete-guide/
• https://leanpub.com/solid-js

About the Book

Solid may seem simple on the surface, but its internal workings involve complex interactions that can sometimes be tricky to explain.

It is a comprehensive book that aims to teach you the ins and outs of Solid, covering its core principles, the inner workings, and the API. By the end of this book, you will have a thorough understanding of SolidJS to write efficient applications.

The book goes beyond just showing you how to use SolidJS; it explains the reasoning and underlying principles behind the library, helping you understand why certain approaches or features work the way they do. With this deeper comprehension, you’ll be well-equipped to build your own projects confidently.

I did my best to organize the topics in a way not to overwhelm the readers and to enhance progressive learning, with examples that focus on the subject matter without introducing unnecessary complexity.

I would love to hear your feedback on how the book has helped you understand SolidJS better, or any questions you might have!

Thank you for your interest and contributions.

Available Formats:

• PDF
• Epub
• Azw3 (on solid.courses only)

Table of Contents

1. Chapter 01: Introduction
   1. The Solid Version Used
   2. Contact and Feedback
   3. Requirements
   4. Trying Solid via Online Playground
   5. Creating a Project From a Template
   6. Note For React Developers
2. Chapter 02: Setting Up a Development Environment
3. Chapter 03: On SolidJS
   1. The Problem Solid Solves
   2. How Solid Works?
      1. Reactive Data
      2. Composable UI
   3. The Advantages of Solid Over Its Alternatives
4. Chapter 04: How Solid’s Reactive System Works
   1. Observer Pattern
   2. The Essence of Reactive Core
   3. The Uses of Computations
5. Chapter 05: Tracking State With Signals
   1. Overwriting the comparison logic
   2. Updating Signals
   3. Transforming Signals
   4. Destructuring Signals
   5. Batching Updates
6. Chapter 06: Running Side-Effects with Effects
   1. Effects Can Be Nested
   2. Explicit Tracking
   3. Opting Out of Tracking
   4. Handling External Dependencies
7. Chapter 07: Caching Values with Memos
8. Chapter 08: Rules of JSX
   1. Elements Should Be Closed
   2. JSX Elements Can Be Nested
   3. Expressions Can Be Used Inside JSX Elements
   4. Elements Can Have Attributes
   5. Missing Attribute Values Default to true
   6. Comments
   7. Whitespaces Are Trimmed
9. Chapter 09: Composing User Interfaces
   1. Components Should Return A Single Root Element
   2. Components Accept Data Through Their props
   3. Adding Static Types To Components
   4. Components Can Have Children
   5. How Components Are Rendered
   6. Solid runs fine-grained updates
   7. Conditional Rendering
   8. Reactive props
   9. Props should be treated as read-only
   10. Destructuring Props Changes The Rendering Order
   11. Best Practices
10. Chapter 10: Working With Props
    1. Passing Data From Parent To Child
       1. Providing Controlled Access To Parent’s Data
    2. Passing Data From Child To Parent
    3. Sharing State Between Children
    4. Destructuring And Spreading Props
    5. Forwarding Multiple Props At Once
    6. Validating Props
11. Chapter 11: Sharing Data Through the Context API
    1. How Context API Works
    2. Best Practices
12. Chapter 12: Component Lifecycle
    1. onMount
    2. onCleanup
    3. Best Practices
13. Chapter 13: Accessing DOM Nodes With ref
    1. Forwarding Refs
    2. Using refs with external libraries
    3. Best Practices
14. Chapter 14: Working with Computations
    1. createComputed
    2. createRenderEffect
    3. createEffect
    4. createMemo
    5. createDeferred
    6. createReaction
15. Chapter 15: Handling Errors
    1. ErrorBoundary
    2. catchError
    3. Handling Asynchronous Errors
    4. Handling Event Handling Errors
16. Chapter 16: Working with Owners
    1. Running functions with a given owner
    2. Running effects in asynchronous context
17. Chapter 17: Styling Elements
    1. Using Inline Styles
    2. Applying Style Definitions
    3. Applying classes based on a condition
    4. Using The Imperative API
18. Chapter 18: Reactive Utilities
    1. batch
    2. untrack
    3. on
    4. createRoot
    5. mergeProps
    6. splitProps
    7. mapArray and indexArray
    8. observable
    9. from
    10. startTransition and useTransition
19. Chapter 19: A Better Conditional Rendering
    1. Switch and Match
20. Chapter 20: Working with Lists
    1. For
    2. mapArray
    3. Index
    4. indexArray
    5. Selecting Items with Selectors
21. Chapter 21: Rendering Components Outside Component Hierarchy
22. Chapter 22: Managing Complex States with Stores
    1. Accessing Data
    2. Updating Stores
    3. Limitations Related to Reactivity
    4. Store Utilities
       1. produce
       2. reconcile
       3. unwrap
       4. createMutable
23. Chapter 23: Abstracting Behavior With Custom Directives
    1. Extending JSX Type With Custom Directives
    2. Using Imported Directives
24. Chapter 24: Working with Asynchronous Data
    1. Decoupling Fetching From Rendering
25. Chapter 25: Using Resource API for Data Fetching
    1. Info Object
    2. Resource Actions
    3. Handling Errors
26. Chapter 26: Managing Loading States with Suspense
27. Chapter 27: Achieving Better Consistency with Transitions
28. Chapter 28: Coordinating Loading States
29. Chapter 29: Code Splitting and Lazy Loading
30. Chapter 30: Handling Events
    1. Using the on namespace
    2. Using the on: Namespace
    3. Using the oncapture: Namespace
    4. Using Custom Properties
    5. Using Refs
    6. Using Custom Directives
    7. Passing Data to the Event Handlers
31. Chapter 31: Dynamically Rendering Components
32. Chapter 32: Server Side Rendering
    1. Targeting The Server Context
    2. Targeting the Development Build
    3. Rendering A Solid App
33. Chapter 33: Solid Without JSX
    1. Solid with Tagged Template Literals
    2. Solid with Hyperscript
    3. Drawbacks
34. A1: Setting Development Environment Using Webpack
35. Index
36. About the Author