# React_Playground

**Repository Path**: i_zzh/react_-playground

## Basic Information

- **Project Name**: React_Playground
- **Description**: 轻量、现代的 React 在线编译与预览平台，基于 Monaco Editor 与浏览器端 Babel 实现 TSX 实时编译，支持多文件编辑、智能提示与一键导出。 功能核心：TSX/JSX 实时编译、iframe 实时预览、多语言智能提示；技术亮点：Vite 极速构建、CSS Modules 样式隔离、拖拽式布局、防抖优化；
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-13
- **Last Updated**: 2026-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# React Playground

React Playground 是一个用于在线编写和预览 React 代码的编辑器应用。

## 功能特性

- **TSX 编译为 JS**：使用 Babel 将 TypeScript/TSX 代码实时编译为 JavaScript
- **代码提示器**：集成 Monaco Editor 提供强大的代码补全和语法高亮
- **实时预览**：即时显示代码运行结果
- **拖拽组件**：使用 allotment 实现可调节的面板布局
- **样式隔离**：确保预览区域的样式与编辑器隔离
- **React 支持**：开箱即用的 React 开发环境

## 技术栈

- **构建工具**：Vite
- **语言**：TypeScript + React
- **代码编辑器**：@monaco-editor/react
- **编译器**：Babel (通过 @babel/standalone)
- **样式**：SCSS

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

## 项目结构

```
React_Playground/
├── src/
│   ├── components/
│   │   ├── CodeEditor/      # 代码编辑器组件
│   │   ├── Header/          # 头部导航组件
│   │   └── Preview/          # 预览组件
│   ├── ReactPlaygroun/       # 核心 playground 组件
│   ├── App.tsx               # 主应用组件
│   ├── main.tsx              # 入口文件
│   └── app.scss              # 全局样式
├── public/
│   ├── test.html
│   └── test2.html
└── index.html
```

## 使用方法

1. 在左侧编辑器中编写 React 代码（支持 TSX 语法）
2. 右侧实时显示编译后的运行结果
3. 可以通过拖拽调整编辑器和预览区域的大小
4. 代码编写完成后会自动编译并运行

## 许可证

MIT