react playground
1.0.0
これは、Reactオンラインコードエディターであり、Reactコードをリアルタイムで実行し、カスタムファイルとサードパーティの依存関係パッケージの動的導入をサポートし、TS、TSXをサポートし、プロジェクトに組み込むことができます。
基本的な例
Ahooksの例
Ant-Design-Chartsの例
ANTDの例
バージョン1.0の前に、いくつかのAPIの変更と新機能がある場合があります。できるだけ早く修正して安定させます。興味があれば注意を払うことができます。
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ハッシュはデフォルトで変更されます。SaveOnurlsaveOnUrl={false}プロパティを構成することにより、URLへの変更をキャンセルできます）。
PlaygroundSandboxは、完全に一貫した機能と構成アイテムを備えたサンドボックスのPlaygroundを備えたコンポーネントであり、ホスト環境から完全に分離されています。
ドキュメントやプロジェクトでのみ使用されている場合は、 PlaygroundSandboxコンポーネントを使用することをお勧めします。
QUOTEコマンド： import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'
PlaygroundSandbox 、gzipの後にわずか10kb+、2kb+の音量でCDNからパッケージをダウンロードします
将来的には完全なパッケージが追加されます。これは、外部ネットワーク環境なしで使用でき、ボリュームがはるかに大きくなります。
サンプルコード：
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 | Booleanは未定義です | 真実 | 頭を表示するかどうか |
| 国境 | Booleanは未定義です | 間違い | 境界線を表示するかどうか |
| showfileselector | Booleanは未定義です | 真実 | [ファイル]タブを表示するかどうか |
| fileselectorreadonly | Booleanは未定義です | 間違い | ファイルタブは読み取りのみですか？ |
| showcompileoutput | Booleanは未定義です | 真実 | コンパイルされたコードを表示するかどうか |
| defaultsizes | number []は定義されていません | [100,100] | エディターおよびプレビューエリア幅スケール |
| オプション | {linenumbers？：boolean; fontsize？：number; tabsize？：number}丨未定義 | 未定義 | エディター構成 |
| ファイル | ファイル | 物体 | 初期化コード |
| ImportMap | {Imports：Record <String、String>} | defaultimportmap | ImportMapを初期化します |
| SaveOnurl | ブール | 真実 | コードはURLに保存されています |
| onfilesschange | （ハッシュ：文字列）=> void | 未定義 | コードが変更された後のコールバック、コールバックパラメーターはファイルハッシュ値です |
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コードを実行できるオンラインエディター
