PiterWeb / ReactiveUI

🔥 React Like Library (No VDOM) 📦

ReactiveUI (React-like Library)

Experimental ⚠️

🔥 Similar to React 👀

🔑 TS Native 🔐

❌ No Virtual DOM 📦

Current functionality:

• JSX Elements (html & js evaluated)
• useState ♻
• useEffect (state changes & mounted)
• Fragments (<> </>)
• Conditional Rendering (ternary operator) ❓
• List Rendering (array.map) 📜
• Event Handling (all events in lowercase) Click Key ...
• TailwindCSS ✨
• Reusable Components on JSX (But cannot be stateful) 📦
• Same Statefull Component on the same parent
• Selective(Smart) Re-rendering 🧠

The project is built on top of Vite

This are the features that Vite provides:

• JSX Parser (Configurable)
• Typescript config
• Bundler
• HMR (Hot Module Replacement)
• Support for CSS Preprocessors

Try it yourself:

Steps:

• Clone the repository: git clone https://github.com/PiterWeb/ReactiveUI.git
• Open the folder & install the dependencies: npm install
• Run the development enviroment: npm run dev

Examples:

• useState:

  import { useState } from "@UIFunctions";
  
  export default function StateFullApp() {
      const mySignal = useSignal("initValue");
  
      return <div>...</div>;
  }

• useEffect:

  import { useEffect } from "@UIFunctions";
  
  export default function StateFullApp() {
      useEffect(() => {
          console.log("Mounted");
      });
  
      const counter = useSignal(0);
  
      useEffect(() => {
          console.log("Counter value changed to " + counter.value);
      }, [counter]);
  
      return <div>...</div>;
  }

• Example Counter Component:

  import { useSignal, useEffect } from "@UIFunctions";
  
  export default function StateFullApp() {
      // UseEffect with no dependencies before useState will be called only on mount
      useEffect(() => {
          console.log("Mounted");
      });
  
      const counter = useSignal(0);
      // const signal = useSignal(initialValue);
  
      // UseEffect with dependencies will be called only when the dependencies change
      useEffect(() => {
          console.log("Counter value changed to " + counter.value);
      }, [counter]);
  
      return (
          <div>
              <h1>Stateful Component</h1>
              <p>
                  {" "}
                  Counter: {counter.value === 0
                      ? "You didn't click"
                      : counter.value}{" "}
              </p>
              <button onclick={() => counter.value++}>Increment</button>
          </div>
      );
  }