Reactivity from Scratch

Build a Vue-inspired reactivity system from scratch!

This repository contains the code examples and demonstrations for the free "Reactivity from Scratch" course, which explores the fundamental concepts of reactivity in modern JavaScript frameworks.

If you want a more structured and in-depth learning experience, I highly recommend checking out my free email course that goes through these concepts:

Get instant access here.

Course Overview

In this course, we dive deep into the inner workings of Vue inspired reactivity systems. Through a series of hands-on examples, we build a simple reactivity system from the ground up, covering key concepts such as:

• Day 1: Build a basic reactivity system inspired by Vue 2, including ref() and dependency tracking
• Day 2: Implement reactive() using Vue 3's powerful proxy-based system for deep reactivity
• Day 3: Create watchEffect() with advanced features like scheduling, cleanup, and manual stopping
• Day 4: Develop computed refs for creating derived reactive values
• Day 5: Master ref manipulation with isRef(), unref(), and toRefs()
• Day 6: Implement readonly and shallow reactivity for fine-grained control
• Day 7: Build a reactive store, combining all concepts into a powerful state management solution

Each day's lesson builds upon the previous, gradually introducing more advanced concepts and techniques.

Repository Structure and Demos

The repository is organized into daily lessons, each containing an index.html file and an app.js file. You can also check out the live demos for each day:

• day-1: Basic Reactivity Demo - Live Demo
• day-2: Deep Reactivity Demo - Live Demo
• day-3: watchEffect Demo - Live Demo
• day-4: computed refs Demo - Live Demo
• day-5: Ref Manipulation Demo - Live Demo
• day-6: Readonly and Shallow Reactivity - Live Demo
• day-7: Simple Reactive Store Demo - Live Demo

Additionally, there's a global folder containing shared styles.

Getting Started

To explore the examples:

1. Clone this repository
2. Navigate to each day's folder
3. Open the index.html file in your browser to see the demo in action
4. Study the corresponding app.js file to understand the implementation

Alternatively, you can check out the live demos linked above to see the code in action without downloading the repository.

Want to Learn More?

If you want a more structured and in-depth learning experience, I highly recommend checking out my free email course that goes through these concepts:

Get instant access here.

The email course offers:

• Detailed explanations of each concept
• Step-by-step guidance
• Additional insights

Don't miss this opportunity to deepen your understanding of reactivity and level up your Javascript and Vue skills!

Contributing

While this repository primarily serves as a companion to the email course, we welcome bug fixes and improvements. Feel free to open an issue or submit a pull request.