react playground
1.0.0
이것은 React Code를 실시간으로 실행할 수있는 React Online Code 편집기이며, 사용자 정의 파일 및 타사 종속성 패키지의 동적 소개를 지원하고 TS, TSX를 지원하며 프로젝트에 포함시킬 수 있습니다.
기본 예
ahooks 예
개미 디자인 차트 예
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 해시가 기본적으로 변경됩니다.saveOnUrl={false}속성을 구성하여 URL 변경을 취소 할 수 있습니다).
PlaygroundSandbox 는 완전히 일관된 기능과 구성 항목을 갖춘 샌드 박스 Playground 있는 구성 요소이며 호스트 환경에서 완전히 분리되어 있습니다.
문서 나 프로젝트에만 사용되는 경우 PlaygroundSandbox 구성 요소를 사용하는 것이 좋습니다.
견적 명령 : 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 ,
} }
/>
</ >
)
}| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| 너비 | 문자열 ef 숫자 丨 정의되지 않았습니다 | 100VW | 너비 |
| 키 | 문자열 ef 숫자 丨 정의되지 않았습니다 | 100VH | 높은 |
| 주제 | 'Dark'light 'light'丨 정의되지 않았습니다 | '빛' | 주제 |
| 쇼 헤더 | 부울 ef 정의되지 않았습니다 | 진실 | 머리를 표시할지 여부 |
| 국경 | 부울 ef 정의되지 않았습니다 | 거짓 | 경계를 표시할지 여부 |
| showfileselector | 부울 ef 정의되지 않았습니다 | 진실 | 파일 탭을 표시할지 여부 |
| fileselectorReadOnly | 부울 ef 정의되지 않았습니다 | 거짓 | 파일 탭 만 읽습니까? |
| showcompileoutput | 부울 ef 정의되지 않았습니다 | 진실 | 컴파일 된 코드를 표시할지 여부 |
| 기본값 | 숫자 [] ef 정의되지 않았습니다 | [100,100] | 편집기 및 미리보기 영역 너비 스케일 |
| 옵션 | {linenumbers? : boolean; fontsize? : number; tabsize? : number} 丨 정의되지 않았습니다 | 한정되지 않은 | 편집기 구성 |
| 파일 | 파일 | 물체 | 초기화 코드 |
| importMap | {가져 오기 : 레코드 <문자열, 문자열>} | DefaultImportMap | importMap을 초기화합니다 |
| SaveOnurl | 부울 | 진실 | 코드는 URL에 저장된 것입니다 |
| onfileschange | (해시 : 문자열) => 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를 살펴볼 수 있습니다. 마지막으로 Playground : React Code를 실시간으로 실행할 수있는 온라인 편집기가 있습니다.
