![\"Join](\"./public/discord.png\")
\n\n\n\n[](https://github.com/Rezact/Rezact/actions/workflows/main.yml)\n[](https://github.com/Rezact/Rezact/actions/workflows/publish.yml)\n \n\n## Intuitive Reactivity, Simplified State.\n\nEmbrace a modern UI framework that encourages direct data mutations, offers module-level reactivity, and simplifies component design. With Rezact, you get the power of reactivity without the boilerplate. Dive into a seamless development experience tailored for today's web.\n\n```jsx\nexport default function App() {\n let $counter = 0;\n\n return (\n <>\n {$counter}
\n\n \n \n \n );\n}\n```\n\n---\n\n# Table of Contents\n\n- [Intro](#reactivity-without-the-hooks-powered-by-jsx-and-function-components)\n - [Key Features](#key-features)\n - [Why Choose Rezact](#why-choose-rezact)\n- [Getting Started](#getting-start-with-rezact)\n- [Understanding Rezact's Reactivity System](#understanding-rezacts-reactivity-system)\n - [1. Reactive Variables](#1-reactive-variables)\n - [2. Direct Data Mutation](#2-direct-data-mutation)\n - [3. Module Level Reactivity](#3-module-level-reactivity)\n - [4. Automatic List Handling](#4-automatic-list-handling-in-rezact)\n - [5. Two-Way Data Binding](#5-two-way-data-binding)\n - [6. Reactive Computations](#6-reactive-computations)\n - [7. Reactive Statements](#7-reactive-statements-like-svelte)\n- [Rezact \"Stores\": Simplified State Management](#rezact-stores-simplified-state-management)\n - [Creating a Store](#creating-a-store)\n - [Using the Store](#using-the-store)\n - [Modifying the Store](#modifying-the-store)\n - [Benefits of Rezact Stores](#benefits-of-rezact-stores)\n- [Uncontrolled Components](#rezacts-uncontrolled-components)\n - [What are Uncontrolled Components?](#what-are-uncontrolled-components)\n - [Rezact's Approach to Uncontrolled Components](#rezacts-approach-to-uncontrolled-components)\n- [Form Validation](https://github.com/Rezact/Rezact/blob/main/FormValidation.md)\n- [Understanding the Rezact Compiler](https://github.com/Rezact/Rezact/blob/main/COMPILER.md)\n- [Performance Benchmarks](#performance)\n- [More Examples](#more-examples)\n- [FAQ](#faq)\n - [Why the name Rezact?](#why-the-name-rezact)\n - [Does it work with Tailwind?](#does-it-work-with-tailwind)\n- [Contributing](#getting-started-with-contributing-to-this-package)\n\n---\n\n## Reactivity Without the Hooks, Powered by JSX and Function Components\n\nRezact redefines web development by offering unparalleled reactivity without the intricacies of hooks, all while harnessing the expressive power of JSX and function components. Designed for the modern web, Rezact bridges the gap between simplicity and power, allowing developers to craft dynamic user interfaces with ease and precision.\n\n### Key Features:\n\n- **Familiar JSX Syntax:** Start coding with the widely-adopted JSX syntax. If you're acquainted with React or similar frameworks, Rezact's syntax will feel like second nature, ensuring rapid onboarding and development.\n- **Reactivity Without the Hooks:** Experience the magic of reactivity without wrestling with hooks. With Rezact, state management is intuitive and direct, eliminating the learning curve often associated with hook-based systems.\n- **Reactive Variables:** With a simple $ prefix, declare variables that automatically synchronize with the UI. This direct approach to reactivity streamlines development and reduces boilerplate.\n- **Direct Data Mutation:** Modify data directly and let Rezact handle the rest. This approach ensures optimal performance and reactivity, making state updates feel natural and efficient.\n- **Module-Level State:** Declare state variables outside components for global accessibility. This modular approach to state ensures a clean and organized codebase.\n- **Automatic List Handling:** Render lists without the hassle of manual key management. Rezact's smart list handling ensures efficient updates and rendering, every time.\n- **Reactive Statements:** Link logic to data changes effortlessly. From logging to side effects, Rezact's reactive statements offer a clear and concise way to respond to data mutations.\n- **Simplified Stores:** Manage your app's state with ease using Rezact's straightforward store system. Export an object with reactive properties, and you've got a centralized store ready to go.\n\n### Why Choose Rezact?\n\nRezact is more than just a frontend frameworkâit's a paradigm shift in web development. By combining the familiarity of JSX with a hook-free reactivity model, Rezact empowers developers to focus on creativity and innovation. Whether you're building a small web app or a complex platform, Rezact provides the tools and simplicity to turn your ideas into reality.\n\n---\n\n## Getting Start with Rezact\n\nQuick Start Single Bare Minimum:\n\n```bash\nnpm create @rezact/app@latest my-rezact-project\ncd my-rezact-project\nnpm install\nnpm run dev\n```\n\n---\n\n# Understanding Rezact's Reactivity System\n\nRezact offers a unique approach to reactivity, simplifying state management and component updates. This section will delve into the core principles of Rezact's reactivity system.\n\n## 1. Reactive Variables\n\nIn Rezact, reactive variables are prefixed with a `$` sign. These variables are special because any changes to them will automatically trigger updates in the UI.\n\n```jsx\nlet $count = 0;\n\nlet $todos = [\n { $text: \"Learn Rezact\", $completed: false },\n { $text: \"Build an app\", $completed: true },\n];\n```\n\nUnlike traditional state management systems where state changes are explicitly triggered, in Rezact, simply modifying the value of a reactive variable is enough. Also notice that a reactive variable can be an array of objects with reactive properties as shown above.\n\n## 2. Direct Data Mutation\n\nOne of the standout features of Rezact is its encouragement of direct data mutations. While many modern frameworks advocate for immutability, Rezact takes a different approach.\n\n```jsx\n// These will trigger a UI update\n\n$count++;\n\n$todos.push({ $text: \"This is awesome!\", $completed: false });\n```\n\n## 3. Module-Level Reactivity\n\nRezact allows you to declare reactive variables outside of components, making them module-level. This means you can share state across multiple components without resorting to props drilling or context providers.\n\n```jsx\nlet $moduleLevelState = \"I Love Rezact Modules\";\nconst updateModState = () => ($moduleLevelState = \"Some New Module Value\");\n\nfunction SomeComponent() {\n let $componentLevelState = \"I Love Rezact Components\";\n const updateState = () => ($componentLevelState = \"Some New Component Value\");\n\n return (\n <>\n{$moduleLevelState}
\n{$componentLevelState}
\n \n \n \n );\n}\n```\n\nThis feature simplifies state management, especially for global states like themes, user data, or configurations (see [Rezact Stores](#rezact-stores-simplified-state-management)).\n\n## 4. Automatic List Handling in Rezact\n\nRezact manages lists behind the scenes without requiring explicit keys via a key prop. When you map over an array to render a list of components, Rezact automatically keeps track of each item's identity, ensuring efficient updates.\n\n```jsx\n{\n $filteredTodos.map(($todo, $idx) =>Username: {userData.$userName}
\nStatus: {userData.$isLoggedIn ? \"Logged In\" : \"Logged Out\"}
\n