Contents
Solid
A UI library with fine-grained reactivity: signals, components, resources and routing.
1.Getting started
- What Solid isThe SolidJS library, fine-grained reactivity and the main differences from React.
- Creating a projectHow to create a Solid project on Vite from the official template and what its folders contain.
- Components and JSXHow to write a Solid component, render it inside another one, and how JSX in Solid differs from JSX in React.
- SignalsComponent state in Solid: createSignal, reading by calling a function and updating through the setter.
- EventsHandling clicks and input in Solid: onClick, onInput, passing data to a handler and native events with on:.
- PropsHow to pass data into a component, why Solid props must not be destructured, and what mergeProps and splitProps are for.
2.Reactivity
3.Rendering
- Conditions: ShowHow to show or hide part of the markup by a condition with the Show component and a fallback.
- Lists: For and IndexHow to render an array with the For and Index components and how they differ.
- Several options: Switch and MatchHow to choose one of several branches of markup with the Switch and Match components.
- StylingHow to style Solid components: plain CSS, the class and classList attributes, style and CSS modules.
4.State and forms
- Stores: createStoreHow to keep lists and objects in createStore and change them by path or with produce.
- ContextHow to pass data deep into the component tree without props: createContext, Provider and useContext.
- Element refs: refHow to get a real DOM element in Solid with the ref attribute and when to use it.
- Forms and inputsHow to bind form fields to signals, handle submission and validate the input.
5.Server data
6.Routing
- Solid Router: setup and routesHow to add Solid Router, describe pages as routes, build a shared layout and links.
- Route parameters and navigationHow to build a post page with a parameter in the address, read it with useParams and navigate from code.
- Loading data for routesHow to load page data with query and createAsync from Solid Router and start loading early with preload.