Mencipta Editor Kod All-in-One Menggunakan React dan SandPack

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.

Semak 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:

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

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

Another useful feature is the ability to switch between different layout modes. SandPack offers three modes: preview, tests, and console. The default mode is preview, while the tests mode provides a suite for running tests and the console mode renders a terminal/console component instead of a preview window. The console mode is useful for displaying outputs of server side logic. You can also switch the layout direction using the rtl (Right to left layout) option.

Customizing the Output

Besides the editor itself, the output display can be customized as well. For instance, you can choose to show or hide the console, change the layout, or even modify the appearance of the preview window. Pretty cool right!. Code editors often have heavily customized editing windows, but the actual output is not paid attention to as much.

The console displays all sorts of errors and console logs. Depending on the type of code snippet being showcased, you'd either want to show or hide the console. You can also toggle the visibility of the show console button. By default, the console is hidden. As with all the SandPack components, the styling can be individually modified using custom CSS classes.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showConsole: true,
    showConsoleButton: true,
  }}
/>;

Besides the console, the display window itself can be customized as well. For example, you can turn the navigator bar on or off with the showNavigator option and decide if you want the panels to be resizable with the resizablePanels option.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showLineNumbers: true,
    showNavigator: true,
    resizablePanels: true,
  }}
/>

The result will look somewhat like this:

Conclusion

Sandpack isn't just easy to use—it's also super customizable. This makes it a great choice for blogs, documentation, or any platform where live code editing adds value, while still allowing developers to customize it based on their sites.

---

You can check the detailed version of this article here
Thanks for reading!

Atas ialah kandungan terperinci Mencipta Editor Kod All-in-One Menggunakan React dan SandPack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!