Playground dan projek

Buat projek sendiri dalam HTML/CSS/JS atau React, simpan dalam pelayar, muat turun sebagai ZIP, dan kongsi dengan pautan.

Playground menggunakan editor dan pratonton bersandbox yang sama seperti lesson, tanpa latihan. Gunakannya untuk bereksperimen, membina semula lesson daripada ingatan, atau memulakan sesuatu milik anda sendiri.

Dua mod

HTML/CSS/JS — halaman web biasa: index.html, style.css, script.js. Pautkan CSS dan JS daripada HTML dengan cara biasa.
React — App.jsx dengan React 18 sudah dimuatkan. Tambah fail .jsx lain dan import. Lihat Cara kod anda dijalankan untuk apa yang tersedia.

Mulakan daripada Kosong atau daripada templat. Fail baharu boleh jadi .html, .css, .js atau .jsx.

Menyimpan dan mengurus projek

Projek disimpan secara automatik dalam pelayar ini (IndexedDB), sama seperti draf lesson. Ia termasuk dalam sandaran pembelajaran anda.
Projek saya menyenaraikan semua yang anda simpan, yang terbaru dibuka di atas, dengan carian.
Namakan semula, Pendua (cara selamat untuk mencuba idea berisiko) dan Padam projek. Memadam akan membuangnya daripada pelayar ini dan tidak boleh dikembalikan — kecuali ia ada dalam sandaran yang anda muat turun.

Muat turun sebagai ZIP

Eksport ZIP dalam Playground (dan "Muat turun projek" dalam lesson dan projek) membina fail ZIP dalam pelayar anda:

Projek web dimuat turun seadanya, berserta README ringkas. Buka index.html dalam pelayar untuk melihatnya.
Projek React dimuat turun sebagai projek Vite yang sedia dijalankan: fail anda diletakkan dalam src/, dengan index.html, package.json dan vite.config.js ditambah. Anda perlu memasang Node.js 20 atau lebih baharu.

Terminal

cd my-react-project
npm install
npm run dev

Kemudian buka alamat yang dipaparkan oleh Vite (biasanya http://localhost:5173). Sekarang anda boleh memasang mana-mana package npm.

Membuka index.html terus dari cakera berfungsi untuk halaman ringkas, tetapi fetch("data.json") biasanya tidak (pelayar menyekatnya untuk halaman file://). Gunakan server tempatan yang kecil atau letak laman itu dalam talian — lihat Deploy projek anda.

Pautan kongsi

Pautan kongsi memampatkan seluruh kod sumber projek anda ke dalam pautan itu sendiri (bahagian selepas #). Tiada muat naik dan tiada salinan di server: pautan itu ialah projek. Sesiapa yang membukanya akan nampak kod anda dalam Playground mereka sendiri; ia tidak disimpan di pihak mereka sehingga mereka tekan Simpan salinan.

Sesiapa yang ada pautan boleh membaca semua kod itu. Aplikasi chat dan e-mel mungkin menyimpan pautan, jadi anggap pautan kongsi sebagai awam.
Jangan sesekali masukkan kata laluan, API key, token atau data peribadi.
Pautan ada had saiz. Jika projek terlalu besar, WANCode akan memberitahu anda — muat turun ZIP sebagai ganti.
Pautan ialah salinan pada satu masa (snapshot). Suntingan kemudian tidak mengubah pautan yang sudah dihantar; kongsi pautan baharu.

Projek berpandu

Projek ialah binaan yang lebih besar yang dipecahkan kepada beberapa milestone, setiap satu dengan semakan dan petunjuk. Projek selesai bila semua milestone lulus dan anda sudah menandakan senarai semak akhirnya. Anda boleh muat turun fail permulaan atau penyelesaian lengkap.