WildflowerJS Logo WildflowerJS

Migrating from React

A practical guide for React developers moving to WildflowerJS. This page maps React concepts to their WildflowerJS equivalents, compares the two approaches side by side, and covers each pattern you will need to convert.

Who this is for: Developers with React experience who want to understand how WildflowerJS achieves the same results with less tooling, less boilerplate, and a different reactivity model.

Mental Model Shift

React and WildflowerJS solve the same problem, keeping the UI in sync with application state, and their approaches differ at every level. Understanding these differences is more important than memorizing syntax.

Concern React WildflowerJS
DOM strategy Virtual DOM + reconciliation. React builds a virtual tree, diffs it against the previous tree, and patches the real DOM with the minimum set of changes. Direct DOM updates. When state changes, WildflowerJS updates only the specific DOM elements that are bound to the changed property, with no diffing step and no virtual tree.
Markup JSX, JavaScript-embedded markup. HTML lives inside JavaScript functions and is compiled by Babel or SWC before the browser sees it. Standard HTML with data-* attributes. Markup stays as HTML in .html files, with no compilation or transpilation step.
State mutation Immutable. You must call setState or a setter from useState, typically with spread operators to create new objects/arrays. Direct mutation. this.count++, this.items.push(item), this.user.name = 'Alice'. The reactive proxy detects the change and triggers updates.
Update granularity Component re-rendering. When state changes, the entire component function re-runs, producing a new virtual tree to diff. Element-level updates. Only the DOM elements bound to the changed property are updated. Other elements in the component are untouched.
Derived values Hooks with dependency arrays. useMemo(() => ..., [dep1, dep2]). You must manually list dependencies; stale closures occur if you forget one. Declarative computed properties. computed: { fullName() { return this.first + ' ' + this.last; } }. Dependencies are auto-tracked, with no array to maintain.
The core difference: In React, you tell the framework what the UI should look like and it figures out what changed. In WildflowerJS, you tell the framework what data each element displays and it updates that element when the data changes. This eliminates the need for a virtual DOM, memoization, and dependency arrays.

Concept Mapping

Quick reference for translating React patterns to WildflowerJS equivalents:

Concept React WildflowerJS
Component function MyComp() { return <div>...</div>; } <div data-component="my-comp">...</div> + wildflower.component('my-comp', { ... })
State const [count, setCount] = useState(0) state: { count: 0 } then this.count++
Computed / Memo useMemo(() => items.filter(...), [items]) computed: { filtered() { return this.items.filter(...); } }
Side Effects useEffect(() => { ... return cleanup; }, [deps]) init() { ... } and destroy() { ... }
Events <button onClick={handleClick}> <button data-action="handleClick">
Conditional {show && <div>...</div>} or ternary <div data-show="show"> or <div data-render="show">
List {items.map(item => <li key={item.id}>...</li>)} <ul data-list="items" data-key="id"><template>...</template></ul>
Two-way binding <input value={val} onChange={e => setVal(e.target.value)} /> <input data-model="val" />
Global state createContext + useContext, or Redux / Zustand wildflower.store('name', { ... }) + subscribe: { storeName: [...] }
Lifecycle useEffect(() => { ... }, []) for mount, return for unmount init() for mount, destroy() for unmount
Routing React Router: <Route path="/about" element={<About />} /> wildflower.routes({ '/about': { component: 'about-page' } })
Styling CSS modules, styled-components, or inline style={{ }} Standard CSS, data-bind-class, data-bind-style

Side-by-Side: Todo App

Here is the same Todo application built in both frameworks.

React (functional component with hooks)

function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');
    const remaining = useMemo(() =>
        todos.filter(t => !t.done).length, [todos]);

    function addTodo() {
        if (!newTodo.trim()) return;
        setTodos([...todos, {
            id: Date.now(),
            text: newTodo,
            done: false
        }]);
        setNewTodo('');
    }

    function toggleTodo(id) {
        setTodos(todos.map(t =>
            t.id === id
                ? { ...t, done: !t.done }
                : t
        ));
    }

    function removeTodo(id) {
        setTodos(todos.filter(t =>
            t.id !== id));
    }

    return (
        <div>
            <h3>Todos ({remaining} remaining)</h3>
            <input
                value={newTodo}
                onChange={e =>
                    setNewTodo(e.target.value)}
                onKeyDown={e =>
                    e.key === 'Enter' && addTodo()}
            />
            <button onClick={addTodo}>Add</button>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        <input
                            type="checkbox"
                            checked={todo.done}
                            onChange={() =>
                                toggleTodo(todo.id)}
                        />
                        <span style={{
                            textDecoration: todo.done
                                ? 'line-through'
                                : 'none'
                        }}>
                            {todo.text}
                        </span>
                        <button onClick={() =>
                            removeTodo(todo.id)}>
                            &times;
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

WildflowerJS (HTML + JS)

<div data-component="todo-app">
    <h3>Todos (<span data-bind="remaining">0</span>
        remaining)</h3>
    <input data-model="newTodo"
           data-action="keydown.enter:addTodo" />
    <button data-action="addTodo">Add</button>
    <ul data-list="todos" data-key="id">
        <template>
            <li>
                <input type="checkbox"
                       data-model="done" />
                <span data-bind="text"
                      data-bind-style="{ textDecoration: done ? 'line-through' : 'none' }"></span>
                <button data-action="removeTodo">
                    &times;
                </button>
            </li>
        </template>
    </ul>
</div>
wildflower.component('todo-app', {
    state: { todos: [], newTodo: '' },
    computed: {
        remaining() {
            return this.todos.filter(
                t => !t.done
            ).length;
        }
    },
    addTodo() {
        if (!this.newTodo.trim()) return;
        this.todos.push({
            id: Date.now(),
            text: this.newTodo,
            done: false
        });
        this.newTodo = '';
    },
    removeTodo(event, element, details) {
        this.todos.splice(details.index, 1);
    }
});
What to notice:
  • No immutable spreads: this.todos.push() replaces setTodos([...todos, item])
  • No toggle function: data-model="done" on the checkbox handles two-way binding automatically
  • No dependency array: the remaining computed property auto-tracks its dependency on this.todos
  • No event wiring: data-action="removeTodo" replaces onClick={() => removeTodo(todo.id)}; the list index arrives in details.index
  • No build step: the HTML is valid as-is; no JSX compilation needed

Pattern-by-Pattern Migration

Component Definition

React components are JavaScript functions that return JSX. WildflowerJS components are HTML elements paired with a JavaScript definition object.

React
function Greeting({ name }) {
    return <h1>Hello, {name}!</h1>;
}

// Usage:
<Greeting name="Alice" />
WildflowerJS
<div data-component="greeting">
    <h1>Hello, <span data-bind="name"></span>!</h1>
</div>
wildflower.component('greeting', {
    props: { name: { type: String, default: '' } }
});
<!-- Usage: -->
<div data-component="greeting"
     data-prop-name="Alice"></div>
Key difference: React components define their markup in JavaScript. WildflowerJS components define their markup in HTML and their behavior in JavaScript.

State Management

React requires setter functions and immutable updates. WildflowerJS uses direct property mutation on a reactive proxy.

React
function Counter() {
    const [count, setCount] = useState(0);
    const [user, setUser] = useState({
        name: 'Alice',
        score: 0
    });

    function increment() {
        setCount(c => c + 1);
    }

    function updateScore() {
        // Must spread to create new object
        setUser({ ...user, score: user.score + 10 });
    }

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>+1</button>
            <p>{user.name}: {user.score}</p>
            <button onClick={updateScore}>
                +10 points
            </button>
        </div>
    );
}
WildflowerJS
<div data-component="counter">
    <p>Count: <span data-bind="count"></span></p>
    <button data-action="increment">+1</button>
    <p><span data-bind="user.name"></span>:
       <span data-bind="user.score"></span></p>
    <button data-action="updateScore">
        +10 points
    </button>
</div>
wildflower.component('counter', {
    state: {
        count: 0,
        user: { name: 'Alice', score: 0 }
    },

    increment() {
        this.count++;
    },

    updateScore() {
        // Direct mutation: no spread needed
        this.user.score += 10;
    }
});

Computed Values

React's useMemo requires an explicit dependency array. WildflowerJS computed properties auto-track dependencies.

React
function ProductList({ products }) {
    const [filter, setFilter] = useState('');

    // Must list dependencies manually
    const filtered = useMemo(() =>
        products.filter(p =>
            p.name.toLowerCase()
             .includes(filter.toLowerCase())
        ),
        [products, filter] // forget one = stale data
    );

    const total = useMemo(() =>
        filtered.reduce((sum, p) =>
            sum + p.price, 0),
        [filtered]
    );

    return (
        <div>
            <input value={filter}
                onChange={e => setFilter(e.target.value)}
                placeholder="Search..." />
            <p>{filtered.length} items, ${total}</p>
        </div>
    );
}
WildflowerJS
<div data-component="product-list">
    <input data-model="filter"
           placeholder="Search..." />
    <p><span data-bind="filtered.length"></span>
       items, $<span data-bind="total"></span></p>
</div>
wildflower.component('product-list', {
    state: {
        products: [],
        filter: ''
    },

    computed: {
        // Dependencies auto-tracked
        filtered() {
            return this.products.filter(p =>
                p.name.toLowerCase()
                 .includes(this.filter.toLowerCase())
            );
        },

        total() {
            return this.filtered.reduce(
                (sum, p) => sum + p.price, 0
            );
        }
    }
});
Chained computed properties: Notice that total depends on filtered, which depends on products and filter. WildflowerJS tracks the entire chain automatically. In React, you would need to list the correct dependency for each useMemo call.

Side Effects

React uses useEffect for mount/unmount logic and for responding to state changes. WildflowerJS splits these into init()/destroy() lifecycle methods and watch handlers.

React
function Timer() {
    const [seconds, setSeconds] = useState(0);

    // Mount + cleanup
    useEffect(() => {
        const id = setInterval(() => {
            setSeconds(s => s + 1);
        }, 1000);
        return () => clearInterval(id);
    }, []);

    // Respond to state change
    useEffect(() => {
        document.title = `${seconds}s elapsed`;
    }, [seconds]);

    return <p>{seconds} seconds</p>;
}
WildflowerJS
<div data-component="timer">
    <p><span data-bind="seconds"></span> seconds</p>
</div>
wildflower.component('timer', {
    state: { seconds: 0 },

    // watch must be a top-level definition key
    // (not assigned inside init)
    watch: {
        seconds() {
            document.title =
                `${this.seconds}s elapsed`;
        }
    },

    init() {
        this._interval = setInterval(() => {
            this.seconds++;
        }, 1000);
    },

    destroy() {
        clearInterval(this._interval);
    }
});

Event Handling

React passes inline functions or references. WildflowerJS uses data-action to bind events to method names.

React
function Form() {
    const [name, setName] = useState('');

    function handleSubmit(e) {
        e.preventDefault();
        console.log('Submitted:', name);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                value={name}
                onChange={e =>
                    setName(e.target.value)}
            />
            <button type="submit">Go</button>
        </form>
    );
}
WildflowerJS
<div data-component="my-form">
    <form data-action="submit.prevent:handleSubmit">
        <input data-model="name" />
        <button type="submit">Go</button>
    </form>
</div>
wildflower.component('my-form', {
    state: { name: '' },

    handleSubmit() {
        console.log('Submitted:', this.name);
    }
});
Event modifiers: WildflowerJS supports modifiers like .prevent, .stop, .enter, .escape directly in the data-action attribute, replacing the need for e.preventDefault() or e.stopPropagation() calls in your methods.

Conditional Rendering

React uses JavaScript expressions inside JSX. WildflowerJS uses data-show (toggles visibility) and data-render (adds/removes from DOM).

React
function Alert({ type, message }) {
    return (
        <div>
            {type === 'error' && (
                <div className="alert-error">
                    {message}
                </div>
            )}
            {type === 'success' && (
                <div className="alert-success">
                    {message}
                </div>
            )}
            {!message && (
                <p>No messages</p>
            )}
        </div>
    );
}
WildflowerJS
<div data-component="alert-box">
    <div class="alert-error"
         data-show="type === 'error'">
        <span data-bind="message"></span>
    </div>
    <div class="alert-success"
         data-show="type === 'success'">
        <span data-bind="message"></span>
    </div>
    <p data-show="!message">No messages</p>
</div>
wildflower.component('alert-box', {
    state: {
        type: '',
        message: ''
    }
});
data-show vs data-render: Use data-show when elements toggle frequently (it sets display: none). Use data-render when elements are rarely shown or contain heavy sub-components (it removes them from the DOM entirely, like React's conditional {cond && <Component />}).

List Rendering

React uses .map() inside JSX with a key prop. WildflowerJS uses data-list with a <template>.

React
function UserList({ users }) {
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>
                    <strong>{user.name}</strong>
                    <span>{user.email}</span>
                    <button onClick={() =>
                        deleteUser(user.id)}>
                        Delete
                    </button>
                </li>
            ))}
        </ul>
    );
}
WildflowerJS
<ul data-list="users" data-key="id">
    <template>
        <li>
            <strong data-bind="name"></strong>
            <span data-bind="email"></span>
            <button data-action="deleteUser">
                Delete
            </button>
        </li>
    </template>
</ul>
Inside templates: Within a data-list template, data-bind references properties of the current item, not the parent component. So data-bind="name" means item.name. The action method receives the item index in details.index.
Large collections? For hundreds of items or more, consider data-pool, WildflowerJS's pull-reactive rendering mode. It uses the same template syntax with no proxy overhead, and you control updates explicitly with markDirty(). There is no virtualization library to add.

Forms and Two-Way Binding

React requires controlled components with value + onChange. WildflowerJS uses data-model for two-way binding.

React
function SignupForm() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [agree, setAgree] = useState(false);
    const [role, setRole] = useState('user');

    return (
        <form>
            <input type="email"
                value={email}
                onChange={e =>
                    setEmail(e.target.value)} />
            <input type="password"
                value={password}
                onChange={e =>
                    setPassword(e.target.value)} />
            <input type="checkbox"
                checked={agree}
                onChange={e =>
                    setAgree(e.target.checked)} />
            <select value={role}
                onChange={e =>
                    setRole(e.target.value)}>
                <option value="user">User</option>
                <option value="admin">Admin</option>
            </select>
        </form>
    );
}
WildflowerJS
<div data-component="signup-form">
    <form>
        <input type="email"
               data-model="email" />
        <input type="password"
               data-model="password" />
        <input type="checkbox"
               data-model="agree" />
        <select data-model="role">
            <option value="user">User</option>
            <option value="admin">Admin</option>
        </select>
    </form>
</div>
wildflower.component('signup-form', {
    state: {
        email: '',
        password: '',
        agree: false,
        role: 'user'
    }
});
No controlled component boilerplate: React requires a separate useState and onChange handler for every form field. WildflowerJS's data-model handles read and write in a single attribute. For a form with 10 fields, that eliminates 20 lines of React boilerplate.

Global State

React uses Context/useContext or external libraries (Redux, Zustand). WildflowerJS has a built-in store system.

React (Context + useContext)
// Define context
const ThemeContext = createContext();

function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    return (
        <ThemeContext.Provider
            value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

// Consume in any child
function ThemedButton() {
    const { theme, setTheme } = useContext(
        ThemeContext
    );
    return (
        <button
            className={theme}
            onClick={() =>
                setTheme(theme === 'light'
                    ? 'dark' : 'light')
            }>
            Toggle ({theme})
        </button>
    );
}
WildflowerJS (Store)
// Define store (once, anywhere)
wildflower.store('theme', {
    state: { mode: 'light' },

    toggle() {
        this.mode = this.mode === 'light'
            ? 'dark' : 'light';
    }
});
<!-- Consume in any component -->
<!-- Use $storeName.property to bind directly to store state -->
<div data-component="themed-button">
    <button data-action="toggle"
            data-bind-class="$theme.mode">
        Toggle (<span data-bind="$theme.mode"></span>)
    </button>
</div>
wildflower.component('themed-button', {
    subscribe: ['theme'],

    toggle() {
        wildflower.getStore('theme').toggle();
    }
});
No provider wrapping: React's Context requires wrapping your component tree in a <Provider>. WildflowerJS stores are globally accessible. Any component can subscribe to any store without changing the component hierarchy.

Common Gotchas for React Developers

These are the most frequent stumbling blocks when coming from React.

Don't spread state.

You may write this.items = [...this.items, newItem] out of habit. It works, but this.items.push(newItem) is simpler and triggers fine-grained updates: only the new list item is rendered, rather than replacing the entire list.

No dependency arrays.

Computed properties auto-track every reactive property accessed during execution. There is no [deps] argument to write or keep up to date.

Methods are not recreated.

In React, functions defined inside a component are new references on every render, which is why useCallback exists. WildflowerJS methods are defined once on the component definition and are stable references. There is no equivalent of useCallback because there is no problem to solve.

No component re-render.

When this.count changes, WildflowerJS does not re-run your component definition or re-evaluate your template. It updates only the DOM elements that have data-bind="count". Everything else is untouched.

Don't look for React.memo.

React.memo prevents unnecessary re-renders of child components. In WildflowerJS, there are no re-renders to prevent. Each binding updates independently, so the problem React.memo solves does not exist.

Actions, not inline handlers.

data-action="doSomething" calls a method by string name. You cannot write data-action="() => doSomething(42)". If you need to pass context, use data-* attributes on the element and read them from the element parameter in your method: doSomething(event, element) { const id = element.dataset.id; }.

Migration Checklist

Follow these steps when converting a React application to WildflowerJS. Tackle one component at a time.

  1. Remove build tooling for JSX. Webpack/Vite/Babel configurations for JSX transpilation are no longer needed. WildflowerJS uses standard HTML and vanilla JavaScript. No compile step required. You can still use a bundler for other purposes if you choose.
  2. Replace JSX with HTML + data-* attributes. Convert each component's return statement from JSX to an HTML element with data-component. Replace {variable} expressions with data-bind="variable" on <span> elements.
  3. Convert useState to state object properties. Gather all useState calls into a single state: { ... } object in the component definition. Replace setter calls (setCount(c => c + 1)) with direct mutation (this.count++).
  4. Convert useMemo and useCallback to computed properties. Move memoized values into computed: { ... }. Remove the dependency arrays entirely. Remove all useCallback wrappers. They have no equivalent because methods are already stable.
  5. Convert useEffect to init() / destroy() lifecycle. Mount effects (useEffect(..., [])) go in init(). Cleanup functions become the destroy() method. State-watching effects become a top-level watch: { propName(newVal, oldVal) { ... } } block in the component definition.
  6. Replace Context / Redux with wildflower.store. Define stores with wildflower.store('name', { state: {...}, methodName() {...} }). Methods go at the top level, not inside a methods block. In components, use subscribe: ['storeName'] and bind with $storeName.property. Remove all <Provider> wrapper components.
  7. Replace React Router with WildflowerJS RouteManager. Convert <Route> definitions to wildflower.routes({ '/path': { component: 'name' } }). Replace <Link to="..."> with <a href="..." data-route>.
  8. Remove performance optimizations that are no longer needed. Delete React.memo() wrappers, useCallback() calls, and manual shouldComponentUpdate logic. These solve React-specific problems that do not exist in WildflowerJS's binding-level update model.
  9. Test each component individually. After converting a component, verify it works in isolation before moving on. WildflowerJS components are self-contained, so you can migrate incrementally.
Incremental migration is possible. Because WildflowerJS works with standard HTML, you can convert one page or section at a time. React components and WildflowerJS components can coexist on the same page during the transition (they operate on different parts of the DOM).
Previous Web Component Libraries
Next From Vue