Learn

A theme is a small app you own; the engine supplies its pages, data loading and the connection to Salla.

The same product card built with DOM calls and with JSX, side by side, and the few rules JSX adds.

A component is a function that returns JSX, props are its arguments, and the engine's ProductCard works the same way.

Functions whose name starts with use: what they give a component, and the two rules for calling them.

Why React runs your component again, how to watch it happen, and how engine hooks follow data that changes outside React.

Every page runs twice, on the server then in the browser: what exists where, and how to avoid "window is not defined".

Context shares values without passing props; TwilightProvider shares the store, theme and language, and useTwilight reads them.

Build a small store header one hook at a time with useStore, useTheme, useAsset and useTranslation.

Format prices, dates and digits the way the store and the page language expect, with useMoney, useDate and useNumber.

Show text in the page language with t(), and build layouts that flip correctly between Arabic and English.

How an address becomes a page, how a component tells which page it is on, and how to add routes of your own.

Fetch store data before a page renders with a loader, or from a component with useQuery, sharing one cache.

Add to cart and other actions go through window.Salla in the browser; listen to its events and clean up after yourself.

Engine pages leave named slots; register a function for a name and what it returns appears on every page with that slot.

Replace the engine's product card everywhere by registering your own component under product:card.

Set the title, description and share tags in a page's head, with a route's head function and withHead.

Combine a theme setting, money formatting, translations, cart events and a hook slot into one feature.