+ Welcome to the Dinosaur app
+ Click on a dinosaur below to learn more.
+
+ {(dinosaur) => (
+
+ {dinosaur.name}
+
+ )}
+
+
+ );
+}
+```
+
+When using SolidJS, there are a few key differences to React to be aware of:
+
+1. We use SolidJS-specific primitives:
+ - `createSignal` instead of `useState`
+ - `createEffect` instead of `useEffect`
+ - `For` component instead of `map`
+ - `A` component instead of `Link`
+2. SolidJS components use fine-grained reactivity, so we call signals as
+ functions, e.g. `dinosaur()` instead of just `dinosaur`
+3. The routing is handled by `@solidjs/router` instead of `react-router-dom`
+4. Component imports use Solid's
+ [`lazy`](https://docs.solidjs.com/reference/component-apis/lazy) for code
+ splitting
+
+The `Index` page uses SolidJS's `createSignal` to manage the list of dinosaurs
+and `onMount` to fetch the data when the component loads. We use the `For`
+component, which is SolidJS's efficient way of rendering lists, rather than
+using JavaScript's map function. The `A` component from `@solidjs/router`
+creates client-side navigation links to individual dinosaur pages, preventing
+full page reloads.
+
+Now the individual dinosaur data page at `src/pages/Dinosaur.tsx`:
+
+```tsx
+// src/pages/Dinosaur.tsx
+
+import { createSignal, onMount } from "solid-js";
+import { A, useParams } from "@solidjs/router";
+import type { Dino } from "../types.ts";
+
+export default function Dinosaur() {
+ const params = useParams();
+ const [dinosaur, setDinosaur] = createSignal