reactxpy 0.3.2

ReactXPy compiler for web applications.

🚀 ReactXPy (Python Syntax for React)

Welcome to ReactXPy, a revolutionary framework that bridges the elegance of Python with the raw power of the React component ecosystem. ReactXPy is an ultra-fast, C++ based transpiler that allows developers to write feature-rich, interactive web applications using clean and readable Python syntax, entirely eliminating the configuration hell of modern JavaScript bundles.

If you love Python's indentation-based readability but need the dynamic, component-driven architecture of React, ReactXPy gives you both without needing Webpack, Vite, Babel, or Node.js running on your machine.

---

✨ Core Features (v0.2.1)

• Native Python Indentation (v0.2.0+): Write logic with standard Python PEP-8 indentation without worrying about Javascript brackets {}.
• Native ES6 Modules (v0.2.0+): The compiler outputs independent, scalable .js modules cleanly wired together using import and export default, eliminating giant monolith bundles!
• Pure Python Syntax for Components: Define your UI components using standard def ComponentName(props): definitions, free of brackets and JavaScript boilerplate.
• Native Inline JSX: Seamlessly blend standard HTML/JSX tags directly inside your Python functions. The C++ parser intelligently distinguishes Python control flow from DOM declarations.
• State & Hooks Engine: ReactXPy natively supports React Hooks! Utilize useState and useEffect with standard Python assignments and lambdas.
• Advanced AST Lexical Engine: The C++ parser natively processes single quotes ('), Javascript backticks (`), and pythonic multiline triple quotes ("""). It actively converts multiline text elements into native ES6 Template literals!
• Dynamic Props & Interpolation: Pass data across components naturally using {props.value} syntax. Evaluate complex math or logic inside interpolations instantly.
• Native Event Handling: Bind Python functions directly to DOM events like onClick={triggerFunc} without dealing with this binding or context scoping.
• Powerful Conditional Rendering: Drive UI states with intuitive boolean logic such as {isActive && <div Class="badge">Online</div>} right inside the tree.
• Zero-Dependency CLI Scaffold: Get started in zero seconds. The built-in create-reactxpy-app generator instantly architectures a complete project for you.
• Cross-Platform C++ Core: The transpiler is compiled natively onto your machine (Windows .exe, macOS, or Linux) enabling lightning-fast, concurrent build times.
• Local Dev Server Hook: ReactXPy ships with a multi-threaded, hot-reloading native Python watcher (dev.py), replacing the need for NPM servers.

---

📦 Installation

ReactXPy is distributed globally via standard Python pip packages. Before beginning, ensure you are running Python 3.7+.

To install the framework globally onto your machine:

pip install reactxpy

Verify your installation was successful and the native C++ binary was compiled by checking the CLI tool:

reactxpy --version
# Output: reactxpy version 0.1.0

---

🛠️ Quick Start

ReactXPy ships with a state-of-the-art interactive CLI to generate standalone applications mimicking the best practices of modern frontend development.

1. Scaffold a Project Run the project generator from anywhere in your terminal:

   create-reactxpy-app my-awesome-app
   

2. Launch the Live Server Navigate into your new application and execute the pure-Python hot reloader:

   cd my-awesome-app
   python3 dev.py
   

That's it! The dev.py script automatically watches your src/ directory for filesystem changes. It instantly hot-recompiles your .pysx components into deeply-linked browser-safe Javascript ES6 Modules and serves them live at http://localhost:3000.

---

📖 Comprehensive Syntax Guide

1. Components & Standard JSX

ReactXPy treats components naturally. You declare them identically to standard Python functions. When you return HTML DOM tags, the compiler natively intercepts it and translates the structure into optimized React.createElement syntax trees.

# Greet.pysx
def Greet(name):
    return <div Class="greeting-card">
        <h3>Hello {name}!</h3>
        <p>Welcome to the ReactXPy ecosystem.</p>
    </div>

2. State Hooks (useState & useEffect)

ReactXPy v2 fully embraces the React runtime. You can manage encapsulated component states easily by destructuring useState tuples, and orchestrate browser lifecycle features like API calls or Local Storage using useEffect.

# CounterApp.pysx
def CounterApp():
    # Native Python Tuple Destructuring
    count, setCount = useState(0)

    # Persist the count to the browser's storage whenever the `count` dependency updates
    useEffect(lambda: localStorage.setItem("clicks", JSON.stringify(count)), [count])

    def triggerIncrement():
        setCount(count + 1)

    return <div Class="counter-panel">
        <p>Total Clicks: {count}</p>
        <button onClick={triggerIncrement}>Increment Value</button>
    </div>

3. Conditional UI & Component Composition

ReactXPy supports infinitely nested component architectures. You can import modules seamlessly without Node syntax. It also securely translates HTML attributes (like class) into DOM-safe syntax (className) automatically.

# App.pysx
import CounterApp

def App():
    isAdmin = True

    return <main Class="dashboard-wrapper">
        <h1>Admin Control Panel</h1>

        {isAdmin && <div Class="secure-badge">Verified Session</div>}

        <div Class="widgets">
            <CounterApp />
        </div>
    </main>

---

⚙️ How the Architecture Works

1. Native OS Compilation: When you pip install reactxpy, your computer leverages its local g++ compiler to build a hyper-optimized .exe (Windows) or binary (Unix) of the ReactXPy transpiler directly within your Python packages folder.
2. Lexical Analysis Engine: The C++ compiler scans your .pysx files. It fundamentally understands the boundary between Python variable assignments, indentations, scopes, and HTML tag delimiters.
3. AST Transpilation: The framework safely merges Javascript operators (like || and &&), mathematical calculations, and JSX scopes into raw, standalone Javascript mappings.
4. Native ES6 Architecture: The compiler bridges your states via a lightweight runtime.js hook memory wrapper. It leverages modern browser <script type="module"> loading, bypassing Webpack entirely!

---

🔮 Development Roadmap

ReactXPy is an actively maintained open-source framework. The current horizon features include:

• Transpilation of Standard JSX directly to React API calls.
• Interactive State Management (useState Hooks).
• Application Lifecycle Memory (useEffect Hooks).
• Zero-Dependency Build Pipelines (build.py & dev.py).
• Native Microsoft Windows (.exe) Subprocess Compilation.
• List Comprehension Syntax (e.g., <item for item in array>).
• Asynchronous API Fetching (async/await components).
• Deep Integrated Server-Side Python Routing.

---

License

MIT License - Have fun building!