Skala aplikasi React anda dengan buku cerita dan kromatik

Artikel ini menunjukkan bagaimana buku cerita dan kromatik Streamline React Component Component Library, menawarkan dokumentasi yang dipertingkatkan, ujian regresi visual, dan kerjasama pasukan yang lebih baik.

Manfaat Utama:

• buku cerita: membolehkan penciptaan perpustakaan komponen yang cekap, memupuk kerja berpasukan dan pembangunan komponen decoupling dari seni bina projek yang lebih besar. Ia termasuk ciri -ciri seperti audit aksesibiliti, unit/interaksi/ujian snapshot, penjanaan dokumentasi, penerbitan/hosting mudah, dan integrasi kromatik untuk Ujian Regresi Visual (VRT).
• Chromatic: Seorang teman cerita, kromatik secara proaktif mengenal pasti regresi visual dan pepijat interaksi, menghalang mereka daripada mencapai pengeluaran. Ia juga memudahkan kerjasama pasukan.
• penerbitan web: dengan mudah berkongsi buku cerita anda dengan pihak berkepentingan bukan teknikal melalui platform seperti halaman GitHub, Netlify, AWS S3, atau Chromatic.

Mengapa memilih buku cerita?

Buku cerita adalah aset yang berharga untuk jurutera, pengurus produk, dan pihak berkepentingan. Ia memudahkan pembangunan perpustakaan komponen, mempromosikan kerjasama dan mencegah kesesakan seni bina. Sifat mandiri membolehkan dokumentasi komponen dan pengurusan variasi komprehensif. Ciri -ciri utama termasuk:

• Audit Kebolehcapaian Web
• unit, interaksi, dan ujian snapshot
• Dokumentasi komponen mesra pengguna
• penerbitan dan hosting yang dipermudahkan
• integrasi kromatik untuk VRT

Panduan ini merangkumi persediaan dan konfigurasi buku cerita dalam projek Create React App, pemasangan tambahan, penciptaan cerita, penjanaan dokumentasi automatik, dan penempatan web.

Persediaan dan konfigurasi buku cerita:

pemasangan:

Kaedah yang paling berkesan menggunakan arahan tunggal dalam direktori root projek anda:

Storybook dengan bijak mengesan kebergantungan projek anda dan mengoptimumkan proses pemasangan. Rujuk halaman Rangka Buku Story untuk maklumat keserasian. Pemasangan manual tidak digalakkan kerana konflik pergantungan yang berpotensi.

npx storybook@latest init

Konfigurasi:

Konfigurasi buku cerita, terutamanya dikendalikan melalui

, membolehkan penyesuaian persembahan dokumentasi, lanjutan UI melalui tambahan, dan juga konfigurasi webpack. Typescript disokong secara asli, tetapi seni bina CSS memerlukan persediaan berasingan. Rujuk dokumentasi gaya dan CSS untuk butiran.

main.js Mari buat sampel Cipta aplikasi React:

selepas mengesahkan aplikasi (menggunakan

npx create-react-app my-scalable-component-library

), pasang buku cerita:

npx storybook@latest init

Sahkan arahan pemasangan. Buku cerita akan dilancarkan di penyemak imbas anda. Folder .storybook (mengandungi fail konfigurasi) dan folder stories (dalam src) akan ditambah ke projek anda. package.json akan memasukkan skrip baru:

npx create-react-app my-scalable-component-library

Gunakan npm run storybook untuk pembangunan dan npm run build-storybook untuk penerbitan. Folder storybook-static mengandungi buku cerita yang diterbitkan. Pertimbangkan untuk menambahkan folder ini ke .gitignore anda.

fail main.js (contoh yang ditunjukkan di bawah) mengawal pelbagai aspek:

npx storybook@latest init

Kunci stories menentukan lokasi cerita. Kunci framework berbeza setiap jenis projek. Kunci docs membolehkan dokumentasi automatik. Rujuk halaman konfigurasi buku cerita untuk pilihan lanjutan.

Storybook Add-ons:

add-ons Extend fungs functionity. Mereka dikategorikan sebagai berasaskan UI (mengubahsuai penampilan) dan berasaskan pratetap (mengintegrasikan teknologi). Halaman Integrasi menyenaraikan add-on yang tersedia. Tambahan lalai buku cerita termasuk:

• @storybook/addon-links: Kisah menghubungkan untuk prototaip.
• @storybook/addon-essentials: koleksi tambahan penting.
• @storybook/preset-create-react-app: Meningkatkan integrasi CRA.
• @storybook/addon-onboarding: Menyediakan lawatan berpandu.
• @storybook/addon-interactions: memudahkan ujian interaksi.

untuk menambah tambah aksesibiliti:

"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"

Kemudian, sertakannya dalam array main.js addons.

Menulis dan Mendokumentasikan Cerita Komponen:

Kisah biasanya mewakili komponen dan variasinya. Mereka adalah fail dinamik (bertindak balas, markdown, atau kedua -duanya), menerima parameter (props) untuk menghasilkan variasi.

mari kita periksa sampel Button cerita:

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  statistics: ["../public"],
};
export default config;

Eksport lalai mentakrifkan komponen dan tetapan utama. Parameter menyediakan metadata. TAGS Membolehkan dokumentasi yang dihasilkan secara automatik. argTypes Tentukan tingkah laku hujah. Dinamakan eksport selepas lalai mewakili variasi, masing -masing dengan args sejajar dengan alat komponen.

penghias membungkus cerita dengan konteks tambahan. Mereka ditakrifkan dalam parameter decorators. Sub-komponen boleh diperbadankan, tetapi pertimbangkan kerumitan.

menerbitkan buku cerita anda:

Pengeluaran pengeluaran () menghasilkan fail statik dalam folder binaan. Pilihan hosting termasuk halaman GitHub, Netlify, dan AWS S3. Tindakan GitHub boleh mengautomasikan penggunaan ke halaman GitHub.

Mengintegrasikan kromatik untuk VRT:

Chromatic meningkatkan buku cerita dengan ujian regresi visual. Buat akaun kromatik, dapatkan token projek, dan pasangkan pakej kromatik:

npx storybook@latest init

tambah skrip chromatic ke package.json:

npx create-react-app my-scalable-component-library

Tetapkan pembolehubah persekitaran CHROMATIC_PROJECT_TOKEN dalam fail .env. Running npm run chromatic menerbitkan buku cerita anda ke Chromatic. Untuk integrasi CI/CD (disyorkan), gunakan tindakan GitHub (lihat dokumentasi kromatik).

Kesimpulan:

Buku cerita dan kromatik meningkatkan kualiti kod, membolehkan pembangunan, ujian, dan kerjasama perpustakaan komponen yang cekap. Mereka memastikan aplikasi yang didokumentasikan dengan baik, berskala, dan dikekalkan.

Atas ialah kandungan terperinci Skala aplikasi React anda dengan buku cerita dan kromatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!