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