brainrotscript/website/react-quiz/README.md

🧠 A brainrot programming language that compiles to JavaScript - because why write normal code when you can write code that's absolutely sending you? 💀

# 🧠 BrainrotScript React Quiz App

This is a React app written entirely in BrainrotScript!

## How BrainrotScript React Works

### 1. **BrainrotScript Keywords in React**

```brainrot
// Instead of: import React from 'react';
yoink React from 'react';

// Instead of: function Component() { }
job_application Component() { }

// Instead of: const [state, setState] = useState();
lock_in [state, setState] = useState();

// Instead of: if/else
vibe_check (condition) { } big_yikes { }

// Instead of: return
its_giving <JSX />

// Instead of: export default
drop mid Component;
```

### 2. **Compilation Process**

BrainrotScript React code goes through this process:
```
.brainrot files → BrainrotScript Compiler → .jsx files → React Build → Browser
```

## Setup Instructions

### Method 1: Using BrainrotScript React CLI

```bash
# From the main project root
cd website/react-quiz

# Compile all .brainrot files to .jsx
npx brainrot-react compile QuizApp.brainrot
npx brainrot-react compile App.brainrot  
npx brainrot-react compile index.brainrot

# Or compile entire directory
npx brainrot-react build . -o ./src
```

### Method 2: Create React App + BrainrotScript

```bash
# Create a new React app
npx create-react-app brainrot-quiz
cd brainrot-quiz

# Copy your .brainrot files to src/
# Then compile them
npx brainrot-react build ./src

# Run the React app
npm start
```

### Method 3: Watch Mode (Development)

```bash
# Auto-compile on file changes
npx brainrot-react watch . -o ./src

# In another terminal, run React
npm start
```

## Project Structure

```
react-quiz/
├── QuizApp.brainrot    # Main quiz component
├── App.brainrot        # App wrapper
├── index.brainrot      # Entry point
├── QuizApp.css         # Styles (regular CSS)
├── App.css            
└── index.css
```

## Running the App

1. **Compile BrainrotScript to JSX**:
   ```bash
   npx brainrot-react build . -o ./build
   ```

2. **Create React project structure**:
   ```bash
   npx create-react-app my-quiz --template minimal
   cd my-quiz
   ```

3. **Copy compiled files**:
   ```bash
   cp -r ../build/* ./src/
   ```

4. **Start the app**:
   ```bash
   npm start
   ```

## Key Differences from Vanilla JS

- **State Management**: React's `useState` instead of global variables
- **Rendering**: React re-renders automatically when state changes
- **JSX**: Write HTML-like syntax directly in BrainrotScript
- **Components**: Everything is a reusable component

## Example Component Structure

```brainrot
job_application MyComponent() {
    // State
    lock_in [vibes, setVibes] = useState(0);
    
    // Event handler
    lock_in handleClick = () => {
        setVibes(vibes + 1);
    };
    
    // Render
    its_giving (
        <div>
            <h1>Vibes: {vibes}</h1>
            <button onClick={handleClick}>Add Vibe</button>
        </div>
    );
}

drop mid MyComponent;
```

## Advantages of React + BrainrotScript

1. **Component-based**: Easier to manage complex UIs
2. **Automatic re-rendering**: No manual DOM updates
3. **Better state management**: React hooks handle state elegantly
4. **Modern tooling**: Hot reload, dev tools, etc.
5. **Brainrot syntax**: Write React with Gen-Z slang!

## Troubleshooting

- **"yoink is not defined"**: Make sure to compile .brainrot files first
- **JSX errors**: The compiler converts BrainrotScript JSX to React JSX
- **Build errors**: Ensure all .brainrot files are compiled before building

Happy coding! 🧠🔥