# 🚀 MiniReact - A Custom Renderer

MiniReact is a lightweight JavaScript function that mimics React’s rendering process. It converts JavaScript objects (similar to JSX) into real DOM elements.

## 📌 Features
- ✅ Create DOM elements dynamically using JavaScript objects.  
- ✅ Supports **nested elements** (e.g., `<a>` inside `<p>`).  
- ✅ Allows adding **attributes** like `href`, `style`, `target`, etc.  
- ✅ **Lightweight** – No external library required.  

## 🔧 Usage

### 1️⃣ Clone the repository  
```sh
git clone https://github.com/your-username/MiniReact.git

2️⃣ Navigate to the project folder

cd MiniReact

3️⃣ Open index.html in a browser

• Directly open the file in Chrome, Firefox, or any browser.
• Or use Live Server in VS Code.

📂 Project Structure

MiniReact/
│── index.html    # Root file with <div id="root"></div>
│── script.js     # Custom render function

🚀 How It Works

1. The script.js file contains a custom rendering function that converts a JavaScript object into real DOM elements.
2. The function supports attributes (like href, style, target).
3. The rendered HTML is dynamically inserted into the <div id="root"></div>.

🌟 Running the Project Locally

✅ Option 1: Open Directly

• Open index.html in your browser.

✅ Option 2: Use Live Server (Recommended)

1. Install Live Server extension in VS Code.
2. Right-click index.html → Click "Open with Live Server".
3. The page will open in your browser.

🛠 Future Improvements

• Add support for multiple children inside a parent element.
• Implement event listeners like onClick, onMouseOver, etc.
• Improve error handling and add console warnings.

💡 Contribute

Feel free to fork this repo and improve the rendering function! 🎉
You can submit pull requests with bug fixes or enhancements.

📜 License

This project is open-source under the MIT License.