Cipta Taman Permainan Kod Dinamik dengan SandPack React!

Dalam artikel ini, kami akan meneroka SandPack, rangka kerja taman permainan yang popular oleh CodeSandbox, dan membincangkan cara anda boleh menggunakannya untuk mencipta persekitaran yang lebih dinamik dan interaktif untuk pengguna anda.

Artikel ini merangkumi hampir semua perkara asas yang perlu anda ketahui tentang SandPack. Walau bagaimanapun, ciri yang lebih maju seperti cangkuk dan komponen tersuai serta pilihan penyesuaian yang hebat dibincangkan secara terperinci di blog saya.

Lihat versi terperinci artikel ini

Apakah SandPack

SandPack ialah kit alat komponen untuk membina editor kod langsung untuk blog dan dokumen teknikal anda. Dalam artikel ini, kami akan menumpukan pada sandpack-react dan bukannya sandpack-client, yang merupakan pengikat JavaScript yang ringan.

Apa yang membuatkan SandPack menonjol ialah pelbagai pilihan penyesuaian yang tersedia. Selain itu, ia sangat mudah untuk bermula. Ciri paling berguna sandpack-react termasuk:

• Templat pra-bina untuk bahasa dan rangka kerja popular
• Sebilangan besar tema pra-bina untuk editor serta pilihan untuk mencipta tema tersuai.
• Sokongan untuk semua kebergantungan npm dan rangka kerja JavaScript utama.
• Pilihan untuk menyesuaikan UI dan hampir setiap aspek taman permainan.
• Anda boleh mencipta taman permainan tersuai sepenuhnya menggunakan komponen boleh gubah pra-bina.
• Pembekal dan cangkuk tersuai tersedia untuk membuat komponen tersuai.

Gambaran keseluruhan The PlayGround

Untuk bermula dengan sandpack-react, jalankan arahan npm atau yarn ini:

npm i @codesandbox/sandpack-react

atau
tambah benang @codesandbox/sandpack-react

Seterusnya, import taman permainan Sandpack dan jadikannya menggunakan kod berikut:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

komponen menyediakan taman permainan kosong untuk anda terus masuk. Secara lalai, taman permainan mengandungi templat React asas. Mari lihat prop asas untuk menyesuaikan templat, tema dan banyak lagi:

• templat: Sifat ini menerima senarai templat yang dipratentukan. Secara lalai, vanila ditetapkan.
• fail: Ini adalah harta yang sangat berguna. Anda boleh membuat berbilang fail dengan kod tersuai, serupa dengan struktur folder biasa. Objek fail mengandungi nilai (laluan fail relatif) dan kunci (kandungan fail). Fail dalam objek ini kemudiannya dipaparkan secara automatik dalam tab juga.
• pilihan: Anda boleh menyesuaikan beberapa ciri menggunakan objek pilihan. Anda boleh melihat senarai penuh di sini. Beberapa yang paling berguna termasuk:
  • showLineNumbers: Togol keterlihatan nombor baris.
  • showTabs: Togol keterlihatan tab.
  • kelas: Anda boleh menetapkan nama kelas tersuai kepada kelas templat sedia ada untuk penyesuaian selanjutnya.
• dependencies: Objek dependencies boleh mengandungi sebarang pakej NPM yang diperlukan oleh apl. Format dan sintaks adalah serupa dengan fail package.json.
• tema: Anda boleh memilih tema pra-bina atau menetapkan tema tersuai sepenuhnya.

Menyesuaikan PlayGround

Mari kita tweak taman permainan lalai agar sesuai dengan gaya kita dan cipta contoh yang menyeronokkan untuk bermain-main. Menyesuaikan editor untuk dipadankan dengan tema tapak anda boleh menjadikannya sebati dengan lancar dan tidak terasa seperti benaman pihak ketiga. Mula-mula, mari gunakan prop fail untuk mencipta butang kaunter yang mudah. Selain fail App.js, kami juga akan membuat fail App.css.

Sila lihat contoh dan kod di bawah:

Dalam contoh ini, komponen pembilang dipaparkan di taman permainan. Objek fail mengandungi kod untuk kedua-dua App.js dan App.css. Kami telah memilih tema daripada senarai pra-bina yang dinyatakan sebelum ini, diperoleh daripada tema sandpack, menambah sentuhan gaya. Nombor baris telah ditetapkan kepada benar juga.

Selain itu, anda boleh menyesuaikan susun atur taman permainan dengan mudah. Ini boleh dilakukan dengan sama ada menggunakan kelas tersuai atau menggunakan pilihan pra-bina yang disediakan oleh SandPack. Sebagai contoh, anda boleh menggunakan kelas tersuai seperti ini:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

Anda kemudian boleh mengubah rupa dan reka letak menggunakan CSS, memberikan anda lebih banyak kawalan ke atas reka bentuk visual.

Satu lagi ciri berguna ialah keupayaan untuk bertukar antara mod susun atur yang berbeza. SandPack menawarkan tiga mod: pratonton, ujian dan konsol. Mod lalai ialah pratonton, manakala mod ujian menyediakan suite untuk menjalankan ujian dan mod konsol menjadikan komponen terminal/konsol dan bukannya tetingkap pratonton. Mod konsol berguna untuk memaparkan output logik sisi pelayan. Anda juga boleh menukar arah susun atur menggunakan pilihan rtl (Tempat letak kanan ke kiri).

Menyesuaikan Output

Selain editor itu sendiri, paparan output boleh disesuaikan juga. Sebagai contoh, anda boleh memilih untuk menunjukkan atau menyembunyikan konsol, menukar reka letak atau mengubah suai rupa tetingkap pratonton. Sejuk betul!. Editor kod selalunya mempunyai tetingkap pengeditan yang sangat disesuaikan, tetapi output sebenar tidak diberi perhatian.

Konsol memaparkan semua jenis ralat dan log konsol. Bergantung pada jenis coretan kod yang dipamerkan, anda sama ada mahu menunjukkan atau menyembunyikan konsol. Anda juga boleh menogol keterlihatan butang konsol rancangan. Secara lalai, konsol disembunyikan. Seperti semua komponen SandPack, penggayaan boleh diubah suai secara individu menggunakan kelas CSS tersuai.

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

Selain konsol, tetingkap paparan itu sendiri boleh disesuaikan juga. Sebagai contoh, anda boleh menghidupkan atau mematikan bar navigator dengan pilihan showNavigator dan memutuskan sama ada anda mahu panel boleh diubah saiz dengan pilihan resizablePanels.

<Sandpack
  theme={theme}
  template="react"
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

Hasilnya akan kelihatan seperti ini:

Kesimpulan

Pek pasir bukan sahaja mudah digunakan—ia juga sangat boleh disesuaikan. Ini menjadikannya pilihan yang bagus untuk blog, dokumentasi atau mana-mana platform di mana pengeditan kod langsung menambah nilai, sambil masih membenarkan pembangun menyesuaikannya berdasarkan tapak mereka.

Anda boleh menyemak versi terperinci artikel ini di sini

Terima kasih kerana membaca!

Atas ialah kandungan terperinci Cipta Taman Permainan Kod Dinamik dengan SandPack React!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!