update titles and reactivity basics page

Author: LadyBluenotes

src/routes/components/data.json

@@ -1,4 +1,4 @@
 {
 	"title": "Components",
-	"pages": []
+	"pages": ["intro.md"]
 }

src/routes/components/intro.mdx

@@ -0,0 +1,10 @@
+---
+title: "Intro to Components"
+order: 1
+---
+
+[TODO]
+
+## Component lifecycle
+
+[TODO]

src/routes/reactivity/basics.mdx

@@ -0,0 +1,88 @@
+---
+title: "Reactivity Basics"
+order: 1
+---
+
+
+Reactivity is the foundation of Solid.  
+It’s the programming model where **changes in data automatically update the parts of your app that depend on it**.  
+
+Solid’s approach is **fine-grained**: instead of re-rendering entire components, only the exact parts of the DOM that depend on a value update. This makes applications efficient and responsive, even as they grow.
+
+## Core Principles of Reactivity
+	
+Solid’s reactivity is built on three key ideas: **signals, subscribers, and tracking scopes**.  
+Together, these create a system where updates are precise, automatic, and efficient.
+
+### Signals: Reactive Values
+
+A **signal** is a reactive value container.
+They consist of 2 parts:
+- **Getter** → reads the current value.  
+- **Setter** → updates the value and notifies dependents.  
+
+```tsx
+const [count, setCount] = createSignal(0);
+
+console.log(count()); // 0
+setCount(1);
+console.log(count()); // 1
+```
+
+Signals can hold any type of value:
+- primitives (string, number, boolean)
+- objects and arrays
+- application state (user, theme, current page)
+
+Learn more in the [Signals page](/reactivity/signals).
+
+### Subscribers: Reactive Consumers
+
+If signals are the **source of truth**, subscribers are the **reactive consumers**.
+
+A subscriber is any function or construct that reads a signal inside a tracking scope and automatically re-runs whenever it changes.
+This is what makes Solid’s reactivity *fine-grained*: only the subscribers that depend on a signal update, not the entire component.
+
+How subscribers work:
+1. **Observation** → subscriber runs and reads signals.
+2. **Dependency tracking** → those signals register the subscriber.
+3. **Response** → when a signal changes, the subscriber re-runs.
+
+### Tracking Scopes: Connecting Signals & Subscribers
+
+A **tracking scope** is the environment where Solid records which signals are being used.
+When a signal is read within a tracking scope, it registers the current subscriber as a dependency.
+Once that signal changes, it will notify the subscriber to re-run and update accordingly.
+
+Tracking scopes within Solid include:
+- Component render functions (JSX return values)
+- Reactive computations (e.g., `createMemo`)
+- Effects (e.g., `createEffect`)
+
+Example of a tracking vs non-tracking scope:
+
+```tsx
+import { createSignal } from "solid-js";
+
+function Counter() {
+  const [count, setCount] = createSignal(0);
+
+  console.log(count()) // ❌ Not tracked — runs once
+
+  return (
+    <div>
+      <p>Count: {count()}</p> {/* ✅ tracked automatically - re-runs on update */}
+      <button onClick={() => setCount(count() + 1)}>Increment</button>
+    </div>
+  );
+}
+```
+
+Tracking scopes are what enable **precise DOM updates**: only parts of the UI that depend on signals re-run, not the entire component.
+You can learn more about [component lifecycles in the Intro to Components page](/components/intro).
+
+
+## Related pages
+- [Signals](/reactivity/signals)
+- [Reactive Side Effects](/reactivity/effects)
+- [Introduction to Components](/components/intro)

src/routes/reactivity/data.json

@@ -1,7 +1,7 @@
 {
 	"title": "Reactivity",
 	"pages": [
-		"overview.mdx",
+		"basics.mdx",
 		"signals.mdx",
 		"memos.mdx",
 		"effects.mdx",

src/routes/reactivity/effects.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Effects"
+title: "Derived Reactive Values"
 order: 4
 ---
 

src/routes/reactivity/memos.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Memos"
+title: "Memoized Computations"
 order: 3
 ---
 

src/routes/reactivity/overview.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Resources"
+title: "Handling Async Data"
 order: 6
 ---
 

src/routes/reactivity/resources.mdx

@@ -3,8 +3,74 @@ title: "Signals"
 order: 2
 ---
 
-[TODO: 
-Concept page on signals
-- Any complex parts should be moved to reference section
-- Move any concept bits from reference section into here
-]
+Signals are the **primary way to manage state** in a Solid application.  
+They store values, notify dependents when those values change, and form the [foundation of reactivity](/reactivity/overview).
+
+You can use signals for any kind of state:  
+- simple values (strings, numbers)  
+- complex values (objects, arrays)  
+- application state (current user, theme, page, etc.)
+
+## What is a Signal?
+
+A **signal** is a reactive value container.  
+- It holds a value.  
+- It provides a **getter** to read the value.  
+- It provides a **setter** to update the value.  
+- When the value changes, any reactive computations that depend on it are updated automatically.  
+
+They can be thought of as a **reactive variable**.
+
+## Create a Signal
+
+
+Use [`createSignal`](/reference/basic-reactivity/create-signal) from `solid-js`:
+
+```tsx
+import { createSignal } from "solid-js";
+
+const [count, setCount] = createSignal(0);
+//       ^ getter  ^ setter
+```
+
+:::note
+The [getter, setter] syntax uses [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)().
+:::
+
+
+## Read a Signal's Value
+
+To read the current value of a signal, simply call the getter function:
+
+```tsx
+console.log(count()); // 0
+```
+
+## Update a Signal's Value
+
+To update the value of a signal, call the setter function with the new value:
+
+```tsx
+setCount(1);
+console.log(count()); // 1
+```
+
+## Reactivity in Action
+
+Signals are **reactive**: when used inside a tracking scope, they automatically notify dependents when updated.
+
+```tsx
+function Counter() {
+  const [count, setCount] = createSignal(0);
+  const increment = () => setCount(prev => prev + 1);
+
+  return (
+    <div>
+      <span>Count: {count()}</span> {/* Updates when `count` changes */}
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+```
+
+:::

src/routes/reactivity/signals.mdx

@@ -1,4 +1,4 @@
 ---
-title: "Stores"
+title: "Reactive State Management"
 order: 5
 ---