react playground
1.0.0
هذا محرر React Online Code الذي يمكنه تشغيل رمز React في الوقت الفعلي ، ويدعم الإدخال الديناميكي للملفات المخصصة وحزم الاعتماد على الطرف الثالث ، ويدعم TS ، TSX ، ويمكن تضمينه في المشاريع.
أمثلة أساسية
مثال آهوكس
مثال على تصميم النمل
مثال antd
قد يكون هناك بعض التغييرات API والميزات الجديدة قبل الإصدار 1.0. سأصلحها وأثبتها في أقرب وقت ممكن. إذا كنت مهتمًا ، فيمكنك الانتباه.
npm install react-exercise-playground --save
# or
pnpm install react-exercise-playground --save import { Playground } from 'react-exercise-playground'
export const Demo1 = ( ) => {
return < Playground />
}
Playgroundهو مكون صفحة ، وهو غازي لبيئة المضيف عند استخدامه (سيتم تحميل بعض JS و CSS ديناميكيًا وسيتم تغيير علامة تجزئة عنوان URL افتراضيًا. يمكنك إلغاء التغيير إلى عنوان URL عن طريق تكوين خاصيةsaveOnUrl={false}).
PlaygroundSandbox هو مكون يحتوي على Playground رمل ، مع وظائف ثابتة تمامًا وعناصر التكوين ، وهي معزولة تمامًا عن البيئة المضيفة.
إذا كنت تستخدم فقط في المستندات أو المشاريع ، فمن المستحسن استخدام مكون PlaygroundSandbox .
أمر اقتباس: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
سيتم تنزيل PlaygroundSandbox من حزم من CDN ، مع حجم 10 كيلو بايت+ فقط ، و 2 كيلو بايت+ بعد GZIP
سيتم إضافة حزمة كاملة في المستقبل ، والتي يمكن استخدامها بدون بيئات شبكة خارجية ، وسيكون مستوى الصوت أكبر بكثير.
نموذج الرمز:
import { PlaygroundSandbox } from 'react-exercise-playground'
// import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
export const Demo2 = ( ) => {
const files = {
'App.tsx' : `import {title} from './const'
function App() {
return <h1>this is {title}</h1>
}
export default App
` ,
'const.ts' : {
code : 'export const title = "demo2"' ,
} ,
}
return (
< >
< h1 >作为组件使用： </ h1 >
< PlaygroundSandbox
showHeader = { false }
showCompileOutput = { false }
fileSelectorReadOnly
width = { 700 }
height = { 400 }
files = { files }
border
theme = 'dark'
options = { {
lineNumbers : false ,
} }
/>
< div style = { { height : '60vh' } } > </ div >
< div >滚动到可视范围内才会加载</ div >
< PlaygroundSandbox
showHeader = { false }
showCompileOutput = { false }
fileSelectorReadOnly
width = { 700 }
height = { 400 }
files = { files }
border
theme = 'dark'
options = { {
lineNumbers : false ,
} }
/>
</ >
)
}| اسم | يكتب | تقصير | وصف |
|---|---|---|---|
| عرض | سلسلة 丨 الرقم 丨 غير محدد | 100VW | عرض |
| ارتفاع | سلسلة 丨 الرقم 丨 غير محدد | 100VH | عالي |
| سمة | "الظلام" "الضوء" "غير محدد | 'ضوء' | سمة |
| Showheader | منطقية 丨 غير محددة | حقيقي | ما إذا كنت تعرض الرأس |
| حدود | منطقية 丨 غير محددة | خطأ شنيع | ما إذا كنت تعرض الحدود |
| showfileselector | منطقية 丨 غير محددة | حقيقي | ما إذا كنت تريد عرض علامة تبويب الملف |
| fileselectorreadonly | منطقية 丨 غير محددة | خطأ شنيع | هل تابية الملف تقرأ فقط؟ |
| ShowCompileOutput | منطقية 丨 غير محددة | حقيقي | ما إذا كنت تريد عرض الرمز المترجم |
| الافتراضات | رقم [] 丨 غير محدد | [100،100] | مقياس عرض المحرر والمعاينة |
| خيارات | {linenumbers؟: boolean ؛ fontsize؟: number ؛ tabsize؟: number} 丨 丨 | غير محدد | تكوين المحرر |
| الملفات | ملف | هدف | رمز التهيئة |
| importMap | {الواردات: سجل <string ، string>} | DefaultImportMap | تهيئة importMap |
| SaveOnurl | منطقية | حقيقي | هل الرمز المخزن على عنوان URL |
| onfileschange | (التجزئة: سلسلة) => باطلة | غير محدد | رد الاتصال بعد تغيير الرمز ، معلمة رد الاتصال هي قيمة تجزئة الملف |
interface File {
[ key : string ] :
| string
| {
code : string
active ?: boolean
hidden ?: boolean
}
}{
"imports" : {
"react" : " https://esm.sh/[email protected] " ,
"react-dom/client" : " https://esm.sh/[email protected] "
}
}كتبت مقالة حول مبادئ التنفيذ وعمليات هذا المكون. إذا كنت مهتمًا ، فيمكنك إلقاء نظرة على React أخيرًا على ملعب: محرر عبر الإنترنت يمكنه تشغيل رمز React في الوقت الفعلي
