README.en.md

ReactScript

🇺🇸 English | 🇧🇷 Português

A JSX-alternative syntax that cuts React hook boilerplate, transpiled to React/JavaScript via ANTLR4 + Babel, with a live web playground.

Overview

ReactScript is a transpiler that converts a simplified syntax into valid React/JavaScript code. The goal is to remove the boilerplate of the most common hooks (useState, useEffect, useRef) with dedicated keywords, while keeping JSX intact. It runs in a web playground with a Monaco editor and live preview (transpile → Babel → render in an iframe with Tailwind CSS).

The syntax

ReactScript adds 4 constructs on top of JavaScript/React:

ReactScript	Transpiles to
component App() { ... }	function App() { ... }
state counter = 0;	const [counter, setCounter] = React.useState(0);
effect [counter] { ... }	React.useEffect(() => { ... }, [counter]);
ref inputRef = null;	const inputRef = React.useRef(null);

The setter is generated automatically by capitalizing the name (counter → setCounter). JSX stays the same as in React — only the state/effect/ref declarations are transformed.

Example

component Counter() {
  state counter = 0;

  effect [counter] {
    console.log("Counter updated:", counter);
  }

  return (
    <button onClick={() => setCounter(counter + 1)}>
      Counter: {counter}
    </button>
  );
}

component App() {
  return <Counter />;
}

How it works

ReactScript code
   ↓  ANTLR4 Lexer + Parser (custom grammar → AST)
   ↓  ReactScriptTranspiler (Visitor pattern → JavaScript/React)
   ↓  Babel (es2015 + react presets; JSX → React.createElement)
   ↓  Render in an iframe (React + Tailwind via CDN)

The ReactScriptTranspiler class extends JavaScriptParserVisitor and implements visitors for componentDeclaration, stateDeclaration, effectStatement, and refDeclaration, preserving the original JSX.

Running

npm install
npm start          # opens the playground at http://localhost:3000

In the playground: pick an example (Counter, Todo List, Stopwatch, Notes), edit on the left, and see the live preview on the right. The "📘 Show Guide" button shows the documentation.

The root component must be named App — it is the rendered entry point.

Status and limitations

Functional / educational prototype. The ANTLR4 parser and the transpiler work, and the examples run with hot-reload. Known limitations:

• Only useState, useEffect, useRef — no useContext, useReducer, useMemo, etc.
• No module system (import/export) — everything in a single file.
• All logic must live inside a component.
• The ++/-- transformation on state is simple and may fail on complex expressions.
• Runs only in the playground context (iframe + Babel), not as a CLI/build tool.

License

This project does not yet declare a license. Until one is added, all rights are reserved by the author.