Pages and basics

In Rakkas, a page is a React component default exported from a module in the src/routes directory with a name that matches *.page.jsx (or tsx).

Rakkas has a file system-based router. The file name determines the URL path. The rules are as you would expect:

Module nameURL path
src/routes/about/ /about

This specific naming convention (<name>.page.{extension}) allows you to have your helper libraries and components next to your page components without accidentally exposing them as routes.

A very simple Rakkas page would look like this:

Head component

Rakkas provides a Head component for managing the title, meta, and link tags in the document head:

	charset="utf-8" // <meta charset="utf-8" />
	title="About" // <title>About</title>
	description="About page" // <meta name="description" content="About page" />
	og:image="" // <meta property="og:image" content="" />
	refresh={{ "http-equiv": "refresh", content: "5" }} // <meta http-equiv="refresh" content="5" />
	canonical={{ tagName: "link", rel: "canonical", href: "" }} // <link rel="canonical" href="" />

The format is inspired by Remix meta function.

Fast refresh

Rakkas supports Fast Refresh which allows you to edit your components and get immediate feedback for your changes without having to reload the page. Function components will be updated without losing their state (class components will lose their state). If you open one of the examples above and edit a file, the changes will be instantly reflected in the preview.

Fast Refresh only works on files that only export React components. Exporting any other value will fall back to a full reload. Exporting types is OK.