> Canonical URL: https://codingcat.dev/course/intro-to-solid-js/lesson/basics

# Solid Basics | Intro to SolidJS | CodingCat.dev Course

[🧶 Intro to SolidJS](/course/intro-to-solid-js)Section 2.1 · Lesson 2 of 4[![](/logos/tags/solidjs-symbol-light.svg)![](/logos/tags/solidjs-symbol-dark.svg)SolidJS](/topic/solidjs)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[← Prev Lesson](/course/intro-to-solid-js/lesson/fundamentals)[Next Lesson →](/course/intro-to-solid-js/lesson/deployment)

# Solid Basics

![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/38b76873abcd247fe531b55fc2914e7257a302b0-1920x1080.png?w=1920&q=82&fit=max&auto=format)

## File System Based Routing

File System Based Routing is a popular approach for managing routes in modern JavaScript frameworks, including SolidJS. It simplifies the process of defining routes by mapping URL paths to files in your project's directory structure.

The framework auto-generates routes based on the file and directory naming/structure. Something like a `pages` or `routes` folder is usually used and each page will be a file inside of the directory. For example, `routes/about.js` would correspond to the `"/about"` route.

Copied! 🐾

```
mkdir src/routes
echo > src/routes/index.jsx
```

The `@solidjs/router` library is available to handle routing in your SolidJS applications. This library allows you to explicitly define routes and associate them with components that should be rendered when those routes are matched.

This example is currently showing how to install and create your routing setup from scratch. Later in the tutorial we will use SolidStart which has `@solidjs/router` included by default.

Create and export an `App` component that displays a header and link to the SolidJS GitHub repository.

Copied! 🐾

```
// src/routes/index.jsx

export default function App() {
	return (

# A First Look at Solid

				[Learn Solid](https://github.com/solidjs)

	);
}
```

## Styling

While Solid can be used with popular styling libraries or framework like [Tailwind](https://tailwindcss.com/docs/guides/solidjs), this example will only use vanilla CSS. Create a file called `root.css` in `src` to hold all global styles.

Copied! 🐾

```
echo > src/root.css
```

Include the following styling in that file:

Copied! 🐾

```
/* src/root.css */

body {
	margin: 0;
	font-family: system-ui;
	-moz-osx-font-smoothing: grayscale;
}

.App {
	text-align: center;
}

.header {
	background-color: #282c34;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: calc(10px + 2vmin);
	color: white;
}

.link {
	color: #b318f0;
}
```

Import the `App` component into `root.jsx` file.

Copied! 🐾

```
// src/root.jsx

/* @refresh reload */
import { render } from 'solid-js/web';
import App from './routes/index';
import './root.css';

render(() => , document.getElementById('root'));
```

## Components and Reactive Primitives

When building applications with Solid, there are two foundational concepts that form the building blocks at the core of the framework. These are **Components**  and the **Reactive Primitives**  which include Signals, Effects, and Memos. Before diving into the first Reactive Primitive, let's cover components briefly.

Copied! 🐾

```
mkdir src/components
echo > src/components/Counter.jsx
```

A Component is a function that accepts a `props` object and returns JSX elements. It is a lightweight factory function that does not hold state itself. Adding an `input` tag after `BasicComponent` in the following example lets you change the value being passed as `props`.

Copied! 🐾

```
// src/components/Counter.jsx

const BasicComponent = (props) => {
	const value = () => props.value || 'default';
	return {value};
};

export default function Counter() {
	return (

			 setValue(e.currentTarget.value)} />

	);
}
```

But where is the value coming from in the first place and where it is being stored and modified when state changes in your application?

### Create Signal

[**Signals**](https://www.solidjs.com/tutorial/introduction_signals) are the most basic reactive primitive and all reactivity in Solid is based around them. So what are Signals exactly? Signals contain values that change over time. The framework tracks these changing values and broadcasts them to the rest of interface.

A signal automatically updates anything tracking it every time the signal's value is changed. This ensures the changing values are reflected in real time. The value being tracked can be any JavaScript object. These trackable signals require observers that can be updated by those trackable values.

The `createSignal` function takes an `initialValue` as its first argument and returns a getter and a setter. Together, these form a pair of functions as a two-element array, which in this example contain `getValue` and `setValue`.

Copied! 🐾

```
// src/components/Counter.jsx

import { createSignal } from 'solid-js';

const initialValue = 0;

export default function Counter() {
	const [getValue, setValue] = createSignal(initialValue);
	console.log(getValue());
	// getValue() == 0

	return Value: {getValue()};
}
```

Import the `Counter` component to `src/routes/index.jsx` and return `` underneath the heading and link tag.

Copied! 🐾

```
// src/routes/index.jsx

import Counter from '../components/Counter';

export default function App() {
	return (

# A First Look at Solid

				[Learn Solid](https://github.com/solidjs)

	);
}
```

This modifies the state directly by running `getValue` as a function. But your component will only display a value of 0 right now and there is no way to change it. To do this, we have to change the `Counter` component so the value will be set with `setValue`.

Copied! 🐾

```
// src/components/Counter.jsx

import { createSignal } from 'solid-js';

const initialValue = 0;
const newValue = 1;

export default function Counter() {
	const [getValue, setValue] = createSignal(initialValue);
	setValue(newValue);
	console.log(getValue()); // getValue() == 1

	return <>Value: {getValue()};
}
```

### Create Effect

An [**Effect**](https://www.solidjs.com/tutorial/introduction_effects) is an example of an observer that runs a side effect depending on a signal. Effects are a way to make general, arbitrary code (also known as side effects) run whenever dependencies change.

[createEffect](https://www.solidjs.com/docs/latest#createeffect) creates a new computation (for example to modify the DOM manually) and runs the given function in a tracking scope.

Copied! 🐾

			The count is now: {count()}

	);
}
" aria-label="Copy code" title="Copy code to clipboard">

```
// src/components/Counter.jsx

import { createSignal, createEffect } from 'solid-js';

export default function Counter() {
	const [count, setCount] = createSignal(0);
	createEffect(() => count());

	return (
		<>
			 setCount(count() + 1)}>Click Me

			The count is now: {count()}

	);
}
```

This automatically tracks the dependencies and reruns the function whenever the dependencies update.

### Create Resource

The `createResource` function is designed for asynchronous data handling in your application. It is invoked with an asynchronous fetcher function and returns a signal that updates with the fetched data when the operation completes. The fetcher function can be anything that returns a promise, such as a function to fetch data from a server. Create a component file called `Users.jsx` that will fetch users from the `jsonplaceholder.typicode.com` API.

Copied! 🐾

```
echo > src/components/Users.jsx
```

`createResource` can be used in two different ways:

- You can pass only the fetcher function as an argument. In this scenario, the fetcher function will be invoked only once when the resource is created.
- You can pass a source signal as the first argument, followed by the fetcher function. In this case, whenever the source signal changes, it will trigger the fetcher function again. The source signal's value will be passed as an argument to the fetcher function.

Copied! 🐾

```
// src/components/Users.jsx

import { createResource } from 'solid-js';

const fetchUser = async () =>
	(await fetch(`https://jsonplaceholder.typicode.com/users?_limit=5`)).json();

export default function Users() {
	const [user] = createResource(fetchUser);

	return (

			{user.loading && 'Loading...'}

{JSON.stringify(user(), null, 2)}

	);
}
```

This demonstrates the first way of using `createResource` since it involves passing the fetcher function (`fetchUser` in this case) as the sole argument to `createResource`. The fetcher function is only invoked once when the resource is created and does not re-run based on changes to any signals. To run the fetcher function, import the `Users` component in the `App` component.

Copied! 🐾

```
// src/routes/index.jsx

import Counter from '../components/Counter';
import Users from '../components/Users';

export default function App() {
	return (

# A First Look at Solid

				[Learn Solid](https://github.com/solidjs)

	);
}
```

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Intro to SolidJS: Solid Basics✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Intro to SolidJS: Solid Basics: start with Basics, implement Intro to SolidJS, and ship to production.AAA Contrast Verified

## related deep dives.

[View All&rarr;](/blog)[![The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](https://cdn.sanity.io/images/hfh83o0w/production/1a16c3a9f7f59d535bef1ab5ee4058e573b80043-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-web-development-foundations)November 4, 2026[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations)

Master the complete Odin Project Foundations path modernized for 2026: how the web works, semantic HTML5, CSS Box Model & Flexbox, and JavaScript DOM fundamentals.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 6: Modern React 19, State Architecture & TypeScript](https://cdn.sanity.io/images/hfh83o0w/production/638109d3eb8a895902f71dbb25851fa9c1ddbc69-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-modern-react-and-typescript)November 4, 2026[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [The Odin Project 6: Modern React 19, State Architecture & TypeScript](/course/odin-modern-react-and-typescript)

Master React 19 components, strict TypeScript props, derived state vs. useEffect traps, Server Actions, and island hydration in Astro.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/intro-to-solid-js)

## Intro to SolidJS

2/41

### Getting Started

- [1.1Fundamentals](/course/intro-to-solid-js/lesson/fundamentals)

2

### Basics

- [2.1Solid Basics▶](/course/intro-to-solid-js/lesson/basics)
- [2.2Deployment](/course/intro-to-solid-js/lesson/deployment)

3

### SolidStart

- [3.1SolidStart](/course/intro-to-solid-js/lesson/solidstart)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)