Buku Cerita React: Membangunkan antara muka pengguna yang indah dengan mudah

Pada permulaan projek front-end, antara muka yang indah biasanya direka dahulu. Anda dengan berhati -hati merancang dan menarik semua komponen UI dan pelbagai negeri dan kesannya. Walau bagaimanapun, perkara cenderung berubah semasa pembangunan. Permintaan baru dan kes penggunaan yang tidak diduga muncul satu demi satu. Perpustakaan komponen awal yang indah tidak meliputi semua keperluan ini, anda perlu terus menambah reka bentuk baru.

Jika anda mempunyai pakar reka bentuk di sekeliling anda pada masa ini, ia hebat, tetapi mereka sering beralih kepada projek lain, meninggalkan pemaju sahaja untuk menangani perubahan ini. Akibatnya, konsistensi reka bentuk mula menurun. Adalah sukar untuk mengesan komponen sedia ada di perpustakaan komponen, status dan penampilan mereka.

Untuk mengelakkan kekeliruan reka bentuk ini, biasanya lebih baik untuk membuat dokumen berasingan untuk semua komponen. Walaupun terdapat pelbagai alat yang tersedia untuk tujuan ini, artikel ini akan memberi tumpuan kepada buku cerita React, alat yang direka khusus untuk aplikasi React. Ia membolehkan anda dengan mudah melayari koleksi komponen dan fungsi mereka. Perpustakaan Komponen Native React adalah contoh aplikasi sedemikian.

mata utama

Memudahkan pembangunan UI:
• React Storybook memudahkan proses pembangunan dan pengurusan komponen UI, yang membolehkan pemaju membina komponen secara bebas dan memvisualisasikan tingkah laku mereka dalam masa nyata.
Kerjasama yang dipertingkatkan:
• Ia berfungsi sebagai platform kerjasama yang menjembatani jurang antara pereka, pemaju dan pihak berkepentingan lain dengan menyediakan satu lokasi untuk melihat dan berinteraksi dengan semua komponen UI.
disesuaikan dan berskala:
• menyediakan pelbagai pilihan penyesuaian dengan tetapan tambahan dan konfigurasi, membolehkan pemaju menyesuaikan alat untuk keperluan projek khusus mereka.
Menyokong ujian automatik:
• Bersepadu dengan JEST dan rangka kerja ujian lain untuk memudahkan ujian automatik langsung dalam persekitaran pembangunan komponen UI.
serba boleh dan berskala:
• sesuai untuk projek -projek kecil dan besar, dan menyokong kerangka JavaScript lain selain daripada React, menjadikannya pilihan serba boleh untuk pelbagai pasukan pembangunan.

Mengapa anda memerlukan buku cerita React?

Jadi, bagaimanakah paparan ini dapat membantu? Untuk menjawab soalan ini, mari cuba menyenaraikan orang yang terlibat dalam pembangunan komponen UI dan menilai keperluan mereka. Bergantung pada aliran kerja anda, senarai ini mungkin berbeza -beza, tetapi biasanya termasuk yang berikut:

pereka atau pakar ux

Bertanggungjawab untuk penampilan dan rasa antara muka pengguna. Selepas fasa prototaip projek selesai, pereka biasanya meninggalkan pasukan. Apabila keperluan baru timbul, mereka perlu dengan cepat memahami keadaan UI semasa.

pemaju

pemaju adalah orang -orang yang membuat komponen ini dan mungkin menjadi benefisiari utama panduan gaya. Pemaju mempunyai dua kes penggunaan utama: dapat mencari komponen yang betul dari perpustakaan dan menguji mereka semasa pembangunan.

tester

penguji akan memeriksa dengan teliti bahawa komponen dilaksanakan seperti yang diharapkan. Salah satu pekerjaan utama penguji adalah untuk memastikan komponen berfungsi dengan betul dalam setiap aspek. Walaupun ini tidak menghilangkan keperluan untuk ujian integrasi, ia biasanya lebih mudah daripada melakukannya sendiri dalam projek itu sendiri.

Pemilik Produk

menerima kakitangan reka bentuk dan pelaksanaan. Pemilik produk perlu memastikan bahawa setiap bahagian projek adalah selaras dengan jangkaan dan gaya jenama konsisten.

anda mungkin menyedari bahawa apa yang semua orang yang terlibat adalah sama mempunyai satu lokasi dengan semua komponen. Mencari semua komponen dalam projek itu sendiri boleh menjadi sangat membosankan. Fikirkanlah, berapa lama masa yang diperlukan untuk mencari semua varian butang yang mungkin dalam projek (termasuk status mereka (dilumpuhkan, primer, menengah, dan lain -lain)? Oleh itu, mempunyai perpustakaan yang berasingan akan menjadi lebih mudah.

Jika saya telah meyakinkan anda, mari kita lihat bagaimana untuk menyediakan buku cerita dalam projek anda.

Tetapkan Buku Story React

Untuk menubuhkan buku cerita React, anda memerlukan projek React. Sekiranya anda tidak mempunyai projek yang sesuai pada masa ini, anda boleh membuatnya dengan mudah dengan aplikasinya.

Untuk menghasilkan buku cerita, sila pasang GettoryBook secara global:

<code>npm i -g getstorybook</code>

kemudian menavigasi ke projek anda dan jalankan:

<code>getstorybook</code>

Perintah ini akan melaksanakan tiga operasi berikut:

• Pasang @Kadira/Storybook ke dalam projek anda.
• Tambah StoryBook dan Skrip Build-Storybook ke fail Package.json anda.
• Buat folder .StoryBook dengan konfigurasi asas dan folder cerita dengan komponen dan cerita sampel.

untuk menjalankan buku cerita, laksanakan buku cerita NPM dan buka alamat yang dipaparkan ( https://www.php.cn/link/93e4d7106625e1b0f2eb8af065c83452 :

Tambah Kandungan Baru

Sekarang kita mempunyai buku cerita React yang berjalan, mari kita lihat bagaimana untuk menambah kandungan baru. Setiap halaman baru ditambah dengan membuat cerita. Ini adalah coretan kod yang menjadikan komponen. Kisah sampel yang dihasilkan oleh GettStoryBook ditunjukkan di bawah:

Fungsi

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

cerita membuat bahagian baru dalam menu navigasi, dan kaedah Tambah mencipta sub-bahagian baru. Anda boleh mengatur buku cerita anda mengikut kehendak, tetapi anda tidak boleh membuat hierarki yang melebihi dua peringkat. Satu cara yang mudah untuk menganjurkan buku cerita adalah untuk mewujudkan bahagian peringkat tertinggi yang sama untuk kumpulan elemen yang berkaitan, seperti "input bentuk", "navigasi", atau "widget", dan sub-bahagian komponen individu.

Anda boleh memilih secara bebas di mana untuk meletakkan fail cerita: dalam folder cerita berasingan atau di sebelah komponen. Saya secara peribadi lebih suka yang terakhir kerana meletakkan cerita dengan komponen membantu memastikan mereka dapat diakses dan terkini.

Cerita dimuatkan dalam fail .storybook/config.js, yang mengandungi kod berikut:

<code>npm i -g getstorybook</code>

Secara lalai, ia memuatkan fail SRC/STEACE/INDEX.JS dan mengharapkan anda mengimport cerita anda di sana. Ini agak menyusahkan kerana ia memerlukan kita untuk mengimport setiap cerita baru yang kita buat. Kami boleh mengubah suai skrip ini untuk memuatkan semua cerita secara automatik menggunakan kaedah WebPack yang memerlukan.context. Untuk membezakan fail cerita dari seluruh kod, kita boleh konvensyen untuk menambah .stories.js lanjutan kepada mereka. Skrip yang diubah suai sepatutnya kelihatan seperti ini:

<code>getstorybook</code>

Jika anda menggunakan folder yang berbeza sebagai kod sumber, pastikan anda menunjuk ke lokasi yang betul. Buku cerita rerun untuk membuat perubahan berkuatkuasa. Buku cerita akan kosong kerana ia tidak lagi mengimport fail index.js, tetapi kami akan menyelesaikan masalah ini tidak lama lagi.

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan membuat sedikit pelarasan untuk memastikan semantik tidak berubah, dan deskripsi separa dipermudahkan)

Menulis Kisah Baru

Sekarang bahawa kita mempunyai sedikit tweaked buku cerita untuk memenuhi keperluan kita, mari kita tulis cerita pertama kita. Tetapi pertama -tama kita perlu membuat komponen untuk ditunjukkan. Mari buat komponen nama mudah yang memaparkan nama dalam blok berwarna. Komponen ini akan mempunyai JavaScript dan CSS berikut.

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

import { configure } from '@kadira/storybook';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

Anda mungkin menyedari bahawa komponen mudah ini boleh mempunyai tiga negeri: lalai, diserlahkan, dan dilumpuhkan. Bukankah lebih baik untuk memvisualisasikan semua negeri ini? Mari tulis cerita untuk ini. Buat fail name.stories.js baru di sebelah komponen anda dan tambahkan yang berikut:

import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';

configure(() => {
    const req = require.context('../src', true, /.stories\.js$/);
    req.keys().forEach(filename => req(filename));
  },
  module
);

Buka buku cerita dan lihat komponen baru anda. Hasilnya harus seperti berikut:

Jangan ragu untuk mengubah bagaimana komponen dipaparkan dan kod sumbernya. Ambil perhatian bahawa disebabkan oleh ciri semula Reloading Hot React, perubahan muncul dengan segera dalam buku cerita anda apabila anda mengedit cerita atau komponen, tanpa menyegarkan penyemak imbas secara manual. Walau bagaimanapun, apabila anda menambah atau memadam fail, refresh mungkin diperlukan. Buku cerita tidak selalu melihat perubahan ini.

(kandungan berikut juga diselaraskan dan diselaraskan untuk mengekalkan konsistensi semantik)

Lihat penyesuaian

Jika anda ingin mengubah bagaimana cerita dipaparkan, anda boleh membungkusnya dalam bekas. Ini boleh dilakukan menggunakan fungsi AddDecorator. Sebagai contoh, anda boleh menambah tajuk "Contoh" ke semua halaman dengan menambahkan kod berikut ke .storybook/config.js:

import React from 'react';
import './Name.css';

const Name = (props) => (
  <div className={`name ${props.type}`}> {props.name} </div>
);

Name.propTypes = {
  type: React.PropTypes.oneOf(['highlight', 'disabled']),
};

export default Name;

anda juga boleh menyesuaikan bahagian berasingan dengan memanggil adddecorator selepas cerita.

menyiarkan buku cerita anda

Sebaik sahaja anda telah melakukan kerja buku cerita anda dan fikir ia bersedia untuk diterbitkan, anda boleh membinanya sebagai laman web statik dengan menjalankan:

.name {
  display: inline-block;
  font-size: 1.4em;
  background: #4169e1;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
}

.highlight {
  background: #dc143c;
}

.disabled {
  background: #999;
}

Secara lalai, buku cerita dibina ke dalam folder buku cerita. Anda boleh menukar direktori output menggunakan parameter -O. Sekarang anda hanya perlu memuat naiknya ke platform hosting kegemaran anda.

Jika anda sedang menjalankan projek di GitHub, anda boleh menerbitkan buku cerita anda dengan membinanya ke dalam folder Docs dan menolaknya ke repositori. GitHub boleh dikonfigurasikan untuk menyediakan laman web GitHub halaman anda dari sana. Jika anda tidak mahu menyimpan buku cerita yang dibina di repositori, anda juga boleh menggunakan penindasan buku cerita.

Membina konfigurasi

Buku cerita dikonfigurasikan untuk menyokong banyak ciri dalam cerita. Anda boleh menulisnya dalam sintaks ES2015 yang sama seperti Create-REACT-App, bagaimanapun, jika projek anda menggunakan konfigurasi Babel yang berbeza, ia secara automatik akan mengambil fail .babelrc anda secara automatik. Anda juga boleh mengimport fail dan imej JSON.

Jika anda fikir ini tidak mencukupi, anda boleh menambah konfigurasi webpack tambahan dengan membuat fail webpack.config.js dalam folder .storybook. Pilihan konfigurasi yang dieksport oleh fail ini akan digabungkan dengan konfigurasi lalai. Sebagai contoh, untuk menambah sokongan untuk SCSS untuk cerita anda, tambahkan kod berikut:

<code>npm i -g getstorybook</code>

Jangan lupa memasang sass-loader dan nod-sass.

Anda boleh menambah sebarang konfigurasi webpack yang diperlukan, bagaimanapun, anda tidak boleh mengatasi entri, output, dan loader Babel yang pertama.

Jika anda ingin menambah konfigurasi yang berbeza untuk persekitaran pembangunan dan pengeluaran, anda boleh mengeksport fungsi. Ia akan dipanggil menggunakan konfigurasi asas dan pembolehubah konfigurasi yang ditetapkan untuk "pembangunan" atau "pengeluaran".

melanjutkan fungsi dengan add-ons

Buku cerita itu sendiri sangat berguna, tetapi untuk menjadikannya lebih baik, ia mempunyai beberapa tambahan. Dalam artikel ini, kami hanya meliputi sebahagian daripada mereka, tetapi pastikan anda menyemak senarai rasmi kemudian.

(bahagian berikut diselaraskan dan pengenalan addon diselaraskan)

Buku cerita dilengkapi dengan dua add-on yang telah dikonfigurasikan: tindakan dan pautan. Anda tidak perlu membuat konfigurasi tambahan untuk menggunakannya.

• Tindakan: membolehkan anda log peristiwa yang dicetuskan komponen dalam panel Logger Action.
• Pautan: membolehkan anda menambah navigasi antara komponen.

Knobs: membolehkan anda menyesuaikan komponen dengan mengubahsuai sifat bertindak balas secara langsung dari UI semasa runtime. Kaedah Pemasangan: , Kaedah Pendaftaran: Import dalam npm i --save-dev @storybook/addon-knobs. Gunakan penghias .storybook/addons.js untuk membungkus cerita. withKnobs

Info: membolehkan anda menambah lebih banyak maklumat mengenai cerita, seperti kod sumbernya, keterangan, dan proptypes React. Kaedah pemasangan: , kaedah pendaftaran: Gunakan npm i --save-dev @storybook/addon-info dalam .storybook/preview.js. addDecorator

Ujian automatik

Aspek penting dalam buku cerita (tidak diterangkan dalam artikel ini) adalah menggunakannya sebagai platform untuk menjalankan ujian automatik. Anda boleh melakukan pelbagai ujian, dari ujian unit ke ujian fungsional dan ujian regresi visual. Seperti yang dijangkakan, terdapat beberapa tambahan yang direka untuk meningkatkan fungsi buku cerita sebagai platform ujian. Kami tidak akan masuk ke dalam butiran kerana mereka berhak mendapat artikel yang berasingan, tetapi masih mahu menyebutnya.

• Spesifikasi: membolehkan anda menulis ujian unit secara langsung dalam fail cerita.
• Storyshots: membolehkan anda melakukan ujian snapshot jest berdasarkan cerita.

buku cerita sebagai perkhidmatan

Kadira juga menawarkan buku cerita sebagai perkhidmatan yang dipanggil Storybook Hub. Ia membolehkan anda menjadi tuan rumah buku cerita dan mengambil kerjasama ke peringkat seterusnya. Sebagai tambahan kepada ciri -ciri standard, ia mengintegrasikan dengan GitHub dan boleh menghasilkan buku cerita baru untuk setiap permintaan tarik anda. Anda juga boleh meninggalkan komen secara langsung dalam buku cerita untuk membincangkan perubahan dengan rakan sekerja anda.

Kesimpulan

Jika anda merasakan bahawa mengekalkan komponen UI dalam projek anda mula menjadi menyakitkan, ambil langkah mundur dan lihat apa yang anda hilang. Anda hanya memerlukan platform kerjasama yang mudah antara semua pihak yang terlibat. Dalam kes ini, untuk projek React anda, buku cerita adalah alat yang sesuai untuk anda.

Adakah anda sudah menggunakan buku cerita? Adakah anda merancang untuk mencubanya? Kenapa? Atau mengapa tidak? Saya suka mendengar anda dalam komen.

(bahagian Soalan Lazim diselaraskan dan struktur diselaraskan)

FAQ (FAQ)

• Bagaimana Buku Story React berbeza dari alat pembangunan UI yang lain? Buku cerita React membolehkan pemaju membina komponen secara bebas, menjadikan proses pembangunan lebih cepat dan lebih cekap, dan menyediakan persekitaran ujian visual masa nyata.
• Bolehkah saya menggunakan buku cerita React dalam kerangka JavaScript yang lain? Ya, ia menyokong rangka kerja seperti vue.js dan sudut.
• Bagaimana untuk menambah add-ons ke buku cerita saya? Pasang melalui npm atau benang, tambahkan ke fail .storybook/addons.js, dan konfigurasikannya mengikut dokumentasi.
• Apakah keluk pembelajaran buku cerita React? Jika anda sudah biasa dengan JavaScript dan bertindak balas, anda sepatutnya dapat memulakan tidak lama lagi.
• Bolehkah saya menggunakan buku cerita React untuk projek besar? Ya, ia digunakan oleh organisasi besar seperti Airbnb, IBM dan Lyft.
• Bagaimana untuk berkongsi buku cerita saya dengan orang lain? Ia boleh digunakan untuk perkhidmatan yang diuruskan statik seperti halaman GitHub atau Netlify menggunakan Deployer Book Story.
• Bolehkah saya menguji komponen saya dalam buku cerita React? Ya, ia menyediakan persekitaran ujian visual dan boleh diintegrasikan dengan perpustakaan ujian seperti JEST.
• Bagaimana untuk menyesuaikan penampilan buku cerita? Storybook menyediakan pilihan seperti penyesuaian tema, konfigurasi webpack tersuai, dan membuat add-on adat.
• Bolehkah saya menggunakan buku cerita React untuk pembangunan aplikasi mudah alih? Ya, ia menyokong React Native.
• Adakah Sumber Terbuka Storybook React? Ya, ia dihoskan di GitHub dan mengalu -alukan sumbangan dari pemaju di seluruh dunia.

Singkatnya, teks asalnya sangat ditulis semula untuk menjadikannya lebih ringkas dan licin, dan mengekalkan makna asal. Format imej tetap sama.

Atas ialah kandungan terperinci Buku Cerita React: Membangunkan antara muka pengguna yang indah dengan mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!