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 name | URL path |
|---|---|
src/routes/index.page.jsx | / |
src/routes/about.page.jsx | /about |
src/routes/about/index.page.jsx | also /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:
<Head
charset="utf-8" // <meta charset="utf-8" />
title="About" // <title>About</title>
description="About page" // <meta name="description" content="About page" />
og:image="https://example.com/image.jpg" // <meta property="og:image" content="https://example.com/image.jpg" />
refresh={{ "http-equiv": "refresh", content: "5" }} // <meta http-equiv="refresh" content="5" />
canonical={{ tagName: "link", rel: "canonical", href: "https://example.com/about" }} // <link rel="canonical" href="https://example.com/about" />
>
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.