Polat Sinan. SolidJS: The Complete Guide: A comprehensive Guide to reactive web development with SolidJS and TypeScript

Sinan Polat, 2024. — 330 p.Learn SolidJS inside out. This book is designed to teach you the ins and outs of Solid — from its core principles and inner workings to its complete API. With a balanced approach that captures the complexities without overwhelming, you’ll gain a thorough understanding of SolidJS. Learn the ‘why’ behind the framework, giving you the knowledge and confidence to build efficient applications. If you’ve ever wanted to go beyond surface-level understanding, this comprehensive guide will show you how to master SolidJS.Solid may seem simple on the surface, but its internal workings involve complex interactions that can sometimes be tricky to explain. I rewrote the book twice to find the right balance — enough depth to capture the complexities without overwhelming readers.This book is the fruit of two years of arduous work. 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.I’m not comfortable using tools without understanding their inner workings and intricacies. This 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 projects confidently.Table of Contents.
Introduction
The Solid Version Used.
Contact and Feedback.
Requirements.
Trying Solid via Online Playground.
Creating a Project From a Template.
Note For React Developers.
Setting Up a Development Environment.
On SolidJS
The Problem Solid Solves.
How Solid Works?
Reactive Data.
Composable UI.
The Advantages of Solid Over Its Alternatives.
How Solid’s Reactive System Works
Observer Pattern.
The Essence of Reactive Core.
The Uses of Computations.
Tracking State With Signals
Overwriting the comparison logic.
Updating Signals.
Transforming Signals.
Destructuring Signals.
Batching Updates.
Running Side-Effects with Effects
Effects Can Be Nested.
Explicit Tracking.
Opting Out of Tracking.
Handling External Dependencies.
Caching Values with Memos.
Rules of JSX
Elements Should Be Closed.
JSX Elements Can Be Nested.
Expressions Can Be Used Inside JSX Elements.
Elements Can Have Attributes.
Missing Attribute Values Default to true.
Comments.
Whitespaces Are Trimmed.
Composing User Interfaces
Components Should Return A Single Root Element.
Components Accept Data Through Their Props.
Adding Static Types To Components.
Components Can Have Children.
How Components Are Rendered.
Solid runs fine-grained updates.
Conditional Rendering.
Reactive props.
Props should be treated as read-only.
Destructuring Props change the Rendering Order.
Best Practices.
Working With Props
Passing Data From Parent To Child.
Providing Controlled Access To Parent’s Data.
Passing Data From Child To Parent.
Sharing State Between Children.
Destructuring And Spreading Props.
Forwarding Multiple Props At Once.
Validating Props.
Sharing Data Through the Context API
How Context API Works.
Best Practices.
Component Lifecycle
onMount.
cleanup.
Best Practices.
Accessing DOM Nodes With ref
Forwarding Refs.
Using refs with external libraries.
Best Practices.
Working with Computations
createComputed.
createRenderEffect.
createEffect.
createMemo.
createDeferred.
createReaction.
Handling Errors
ErrorBoundary.
catchError.
Handling Asynchronous Errors.
Handling Event Handling Errors.
Working with Owners
Running functions with a given owner.
Running effects in asynchronous context.
Styling Elements
Using Inline Styles.
Applying Style Definitions.
Applying classes based on a condition.
Using The Imperative API.
Reactive Utilities
batch.
soundtrack.
On.
createRoot.
mergeProps.
splitProps.
mapArray and indexArray.
Observable.
From.
startTransition and useTransition.
A Better Conditional Rendering
Switch and Match.
Working with Lists
For.
mapArray.indexArray.
Selecting Items with Selectors.
Rendering Components Outside Component Hierarchy.
Managing Complex States with Stores
Accessing Data.
Updating Stores.
Limitations Related to Reactivity.
Store Utilities.
Produce.
Reconcile.
Unwrap.
createMutable.
Abstracting Behavior With Custom Directives
Extending JSX Type With Custom Directives.
Using Imported Directives.
Working with Asynchronous Data
Decoupling Fetching From Rendering.
Using Resource API for Data Fetching
Info Object.
Resource Actions.
Handling Errors.
Managing Loading States with Suspense.
Achieving Better Consistency with Transitions.
Coordinating Loading States.
Code Splitting and Lazy Loading.
Handling Events
Using the on namespace.
Using the on Namespace.
Using the ocapture Namespace.
Using Custom Properties.
Using Refs.
Using Custom Directives.
Passing Data to the Event Handlers.
Dynamically Rendering Components.
Server Side Rendering
Targeting The Server Context.
Targeting the Development Build.
Rendering A Solid App.
Solid Without JSX
Solid with Tagged Template Literals.
Solid with Hyperscript.
Drawbacks.
A1: Setting Development Environment Using Webpack.
Index.
About the Author