# rnxJS
[](https://www.npmjs.com/package/@arnelirobles/rnxjs)
[](https://www.npmjs.com/package/@arnelirobles/rnxjs)
[](https://bundlephobia.com/package/@arnelirobles/rnxjs)
[](https://github.com/BaryoDev/rnxjs/blob/main/LICENSE)
[](https://github.com/BaryoDev/rnxjs)
**The Bootstrap-Native Framework for Production Apps.**
> Build Reactive Bootstrap Apps without a Build Step.
> Designed for Backend Developers (Django, Rails, Laravel) and Internal Tools.
---
## ๐ Documentation
| Guide | Description |
| -------------------------------------------------------------- | ----------------------------------------------------------------- |
| [**๐ฐ v1.0.0 Release Post**](./docs/BLOG-V1.0.0.md) | Complete overview of v1.0.0 features, benchmarks, and comparisons |
| [**โ Release Status Report**](./docs/V1.0.0-RELEASE-STATUS.md) | Verification status for all packages and publication readiness |
| [**Quick Start**](./docs/QUICK-START.md) | Get started in 5 minutes |
| [**Component Library**](./docs/COMPONENTS.md) | Complete reference for all 46 components with examples |
| [**API Reference**](./docs/API.md) | Complete API documentation with stability guarantees |
| [**Migration Guide**](./docs/MIGRATION.md) | Migrate from jQuery to rnxJS |
| [**Benchmarks**](./docs/BENCHMARKS.md) | Performance comparisons with jQuery, Vue, React |
| [**Publication Checklist**](./docs/PUBLICATION-CHECKLIST.md) | v1.0.0 publication guide for all package registries |
---
## ๐ก๏ธ Production Readiness
rnxJS is tested and production-ready for v1.0.0.
- **Test Coverage**: 600+ tests covering core reactivity, 34 components, plugins, and edge cases.
- **Stability**: Verified against rapid state updates, race conditions, and memory leaks.
- **Browser Support**: Compatible with all modern browsers (Chrome, Firefox, Safari, Edge).
- **Zero Dependencies**: CDN version only requires Bootstrap CSS.
- **Bundle Size**: ~10KB gzipped with all 34 components included.
> **Note**: rnxJS is designed as a lightweight, no-build alternative to React/Vue for backend-driven apps and internal tools. For massive, complex Single Page Applications, consider a full framework.
---
## โก Quick Start (CLI)
The fastest way to start is using our CLI tool:
[https://www.npmjs.com/package/@arnelirobles/create-rnxjs-app](https://www.npmjs.com/package/@arnelirobles/create-rnxjs-app)
```bash
npx @arnelirobles/create-rnxjs-app@latest
```
## ๐ Samples
You can find working examples and samples here:
[https://github.com/BaryoDev/rnxJS_samples](https://github.com/BaryoDev/rnxJS_samples)
---
## ๐ Zero to Hero: Build Your First App
Welcome to rnxJS! In this 5-minute tutorial, we'll build a reactive **Employee Directory** with a search filter. No Webpack, no Bundlers, just HTML and JS.
### Step 1: The Setup (`index.html`)
Create an `index.html` file and include Bootstrap + rnxJS.
```html
rnxJS App
```
### Step 2: The Logic (`app.js`)
Create `app.js`. We'll initialize our **Reactive State**.
```javascript
// app.js
const { createReactiveState, autoRegisterComponents, loadComponents } = rnx;
// 1. Define your data model
const state = createReactiveState({
searchQuery: '',
employees: [
{ id: 1, name: 'Alice Johnson', role: 'Engineer', dept: 'Tech' },
{ id: 2, name: 'Bob Smith', role: 'Designer', dept: 'Creative' },
{ id: 3, name: 'Charlie Kim', role: 'Manager', dept: 'Sales' },
],
// Computed property (derived state works by manually updating or logical getters)
// For simplicity in rnxJS v0, we handle filtering in the view or listeners
});
// 2. Register Bootstrap Components
autoRegisterComponents();
// 3. Hydrate the DOM
loadComponents(document.body, state);
```
### Step 3: The UI
Update the `` in `index.html`. We use `data-bind` to sync inputs and text.
```html
Employee Directory
Searching for:
```
### Step 4: Making it Dynamic
rnxJS works great with vanilla JS logic. Let's add a listener to filter the list.
```javascript
// Add this to app.js
function renderList() {
const listContainer = document.getElementById('employee-list');
const query = state.searchQuery.toLowerCase();
// Filter logic
const filtered = state.employees.filter(emp =>
emp.name.toLowerCase().includes(query) ||
emp.role.toLowerCase().includes(query)
);
// Vanilla JS rendering (fast and simple)
listContainer.innerHTML = filtered.map(emp => `
${emp.name}
${emp.dept}
${emp.role}
`).join('');
}
// Subscribe to search changes to re-render
state.subscribe('searchQuery', renderList);
// Initial render
renderList();
```
๐ **That's it!** You have a reactive app with search, Bootstrap styling, and Material components.
---
## ๐ Core Concepts & API
### 1. Reactive State
The heart of rnxJS is the `createReactiveState` function. It wraps your object in a Proxy to detect changes.
```javascript
const state = rnx.createReactiveState({
user: { name: 'Arnel', points: 100 },
items: ['Apple', 'Banana']
});
```
**Key Features:**
- **Deeply Nested**: Works on `state.user.name`.
- **Arrays**: `push`, `pop`, `splice` trigger updates automatically.
- **`state.subscribe(path, callback)`**: Listen for changes.
- Path examples: `'user.name'`, `'items'`, `'items.0'`.
- **`state.$unsubscribeAll()`**: Cleanup all listeners (useful for Single Page Apps).
### 2. Data Binding (`data-bind`)
Connect your DOM to State without event listeners.
| Element | Binding Type | Behavior |
| :----------------------- | :----------- | :------------------------------------------------------ |
| ``, `