SolidJS - Zero To Pro: The Complete Guide to SolidJS

Install node js and npm to set up your development environment, ensuring a minimum of node 18 so you can scaffold and bundle SolidJS apps with templates.

Install node.js and npm, then install vite to scaffold a solid js project with fast bundling and out-of-the-box support for typescript, jsx, and css modules.

Scaffold your first SolidJS project using Digit with Vit as the bundler, choose JavaScript or TypeScript templates, install dependencies, and run the dev server to preview in browser.

Scaffold a new SolidJS project in TypeScript using the Dag tool and the SolidJS template for TypeScript, install dependencies, and run the dev server to view tsx-based app.

Learn to use environment variables in a SolidJS app powered by Vit. Create a dot env file, prefix variables with an all-caps prefix, and access them via import.meta.env in App.jsx.

Create your first SolidJS component using bootstrap styling, install and import bootstrap CSS, build a reusable alert component in a components folder, and render it in App.jsx.

Create a TypeScript based SolidJS component, import Bootstrap for styling, export a TSX alert in a components folder, and render it in app.tsx using the SolidJS component type.

Learn to use props in SolidJS components to customize messages, colors, and sizes by passing a single props object, and keep reactivity by accessing props.message.

Implement props in a SolidJS TypeScript project by typing the message prop inline or via a dedicated type, and apply them to a reusable alert component.

Explore setting default props in SolidJS using inline defaults and mergeProps to merge defaults with provided props; see how overrides work and prevent errors.

Learn how to pass multiple props by creating a props object and spreading it into a card component. Match object keys to title, body, and button label props.

Master using children props to separate content from components in SolidJS, enabling flexible composition of shells like modals and alerts by passing content between opening and closing tags.

Explore SolidJS signals by creating signal primitives with createSignal, using getters and setters to drive component reactivity, enabling fine-grained, portable state updates and derived values.

Create derived signals from existing signals to compute new reactive values, such as doubling a count with a derived signal, which remains read-only and updates automatically as the source changes.

Learn how SolidJS effects automatically run code in response to reactive signal changes, log updates, and control UI behavior like disabling a decrement button to avoid negative counts.

learn to implement conditional rendering in SolidJS using the built-in show component, signals, and fallbacks, including toggling a progress bar with show/hide buttons.

Explore conditional rendering in SolidJS by using show, switch, and match with when and fallback, refactoring progress and alerts demos to handle multiple conditions and defaults.

Discover how SolidJS uses the For primitive to loop over collections of primitives and objects, rendering list items with the item and index, and styling with bootstrap examples.

Compare SolidJS for and index when looping collections: index preserves the index and remains static while values are signals; use for with primitive arrays and index for object arrays.

Learn SolidJS event handling with the on prefix and camelCase names; bind native and custom events, pass data via array syntax, and bind once while handlers react to state.

Learn to style SolidJS components using inline styles with the native style attribute and object syntax. Apply dynamic values, explicit units, and dash-case keys for reliable, CSS-compatible styling.

Explore styling in SolidJS by using the class and class list attributes, creating styles.css, and applying dynamic, conditional, and static classes with real examples.

Learn to use CSS modules in SolidJS by importing styles from a CSS module file, applying classes with the class attribute, and using class lists for conditional styling.

Master refs in solid by hooking into the native dom api with the ref keyword, enabling focus, dimension measurements, and third-party library integration, including callback-style usage.

Forwarding refs in SolidJS lets a parent interact with a DOM element inside a child input component by passing a ref through props.

Explore onMount to run tasks when a component mounts, such as focusing an input or fetching data with fetch from jsonplaceholder into a signal.

Learn to use onCleanup in Solid JS to run cleanup tasks when a component unmounts, such as clearing intervals and avoiding memory leaks by clearing timers and resources.

Install and configure the Solid Router to enable declarative, dynamic routes with nested and lazy-loaded pages in a SolidJS app, wrapping the app with the router and defining routes.

Master dynamic navigation in SolidJS by adding routes, creating new page components like about and services, and wiring them in index.jsx to load different pages.

Learn to lazy load routes in SolidJS by dynamically importing route components only when the path is accessed, reducing initial load time for large apps.

Add navigation links with SolidJS's A component from the solid router to enable client-side routing, highlight the active link with an active class, and use end for exact matches.

Explore dynamic navigation in SolidJS using useNavigate and the Navigate component to redirect based on authentication state, and create a protected login flow.

Discover how to create dynamic routes in SolidJS with colon parameters and the use params hook, enabling URL-based data loading, and how optional parameters work via a search example.

Learn to use wildcard routes with asterisks to handle not found pages and catch-all patterns, and map multiple paths to one component using an array in SolidJS.

Organize your SolidJS app with nested routes by creating a users namespace, with /users for all users and /users/:userId for a single user, adhering to a RESTful pattern.

Learn to use nested routes to create a persistent page layout in SolidJS, wrapping child routes with a wrapper layout that renders props.children inside a shell.

Define routes using a JavaScript object with config based routing, and split routes into a separate file for cleaner routing, including support for lazy loading and nested routes in SolidJS.

Explore SolidJS stores for managing complex nested state with reactive updates, and learn when to use stores vs signals for large lists and dynamic forms.

Create and display a SolidJS store with createStore, define an initial object with count and user profile, and import the store from another file to mutate and render its values.

Master mutating SolidJS stores with setters using direct assignment, merge syntax, and callback methods to update the count and other store properties.

Learn to mutate nested objects in SolidJS stores by using merge updates and the path syntax to update username, level, and age inside a user profile, while keeping immutability.

Learn to mutate arrays inside SolidJS stores: add cars, update items with map and path syntax, toggle electric, and delete cars using immutable updates.

Explore how the SolidJS produce helper enables seamless store mutations by writing mutable code that translates to immutable updates. Update counts, usernames, and arrays like cars with ease.

Learn to fetch a single user from the Jsonplaceholder API using SolidJS createResource, returning a data signal with loading and error handling, and render the user's name and email.

Learn how suspense in Solid uses createResource to manage loading states, wrapping asynchronous components and providing a fallback UI. Explore nested suspense for per-component loading indicators during data fetches.

Explore how to mutate remote server data with SolidJS using the mutate function, provide loading indicators and placeholder content, and immutably update the signal with transformed responses.

Learn how to use refetch in SolidJS to poll remote data at set intervals by triggering the fetcher from createResource, refreshing data for real-time dashboards.