Quick Start

Let's jump into using QuantaJS with simple examples for both core and React usage.

Core Package Example

Here's how to create a reactive counter using createStore from the core package:

import { createStore } from '@quantajs/core';

const counter = createStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

// Access state
console.log(counter.count); // 0
console.log(counter.doubleCount); // 0

// Update state
counter.increment();
console.log(counter.count); // 1
console.log(counter.doubleCount); // 2

counter.decrement();
console.log(counter.count); // 0
console.log(counter.doubleCount); // 0

React Package Example

For React applications, use the React package with hooks and components:

import { createStore, QuantaProvider, useStore } from '@quantajs/react';

const counterStore = createStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

function Counter() {
  const store = useStore('counter');
  
  return (
    <div>
      <p>Count: {store.count}</p>
      <p>Double: {store.doubleCount}</p>
      <button onClick={() => store.increment()}>+</button>
      <button onClick={() => store.decrement()}>-</button>
    </div>
  );
}

function App() {
  return (
    <QuantaProvider stores={{ counter: counterStore }}>
      <Counter />
    </QuantaProvider>
  );
}

What's Happening?

Core Package

  • createStore creates a reactive store with a unique name, state function, getters, and actions
  • The state function returns the initial state object
  • getters are computed values that automatically update when dependencies change
  • Actions like increment and decrement modify the state directly using this
  • All state changes trigger automatic reactivity

React Package

  • Same store creation API as core package
  • QuantaProvider wraps your app to provide stores to all child components via the stores prop (object)
  • useStore(name) hook accesses a store by name from context and triggers re-renders when state changes
  • Components automatically re-render when store state updates

Performance Optimization

For React applications, you can use selectors to prevent unnecessary re-renders:

import { useStore, useQuantaStore } from '@quantajs/react';

function CounterDisplay() {
  // Using useStore with selector (only re-render when count changes)
  const count = useStore('counter', store => store.count);
  
  return <p>Count: {count}</p>;
}

// Or using useQuantaStore with a direct store reference
function CounterDisplayAlt() {
  const count = useQuantaStore(counterStore, store => store.count);
  
  return <p>Count: {count}</p>;
}

Adding DevTools

To debug your stores in development, add DevTools:

import { mountDevTools } from '@quantajs/devtools';

// Mount DevTools (auto-detects dev environment)
mountDevTools();

Or in React:

import { QuantaDevTools } from '@quantajs/react';

function App() {
  return (
    <QuantaProvider stores={{ counter: counterStore }}>
      <Counter />
      <QuantaDevTools />
    </QuantaProvider>
  );
}

DevTools provide real-time store inspection, action logging, and persistence management. See the DevTools Guide for more information.

Next Steps

Explore more features: