CSF3-storyjen kirjoittaminen
Viekää oletus-metaobjekti ja nimetyt storyt Component Story Format 3:a käyttäen.
CSF3-storyjen kirjoittaminen on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.
Mikä CSF3 on
Component Story Format 3 (CSF3) on nykyinen Storybookin story-muoto. Storyt ovat tavallisia JavaScript- tai TypeScript-objekteja — yksinkertaisissa tapauksissa render-funktiota ei tarvita.
Meta-vienti
Jokaisessa story-tiedostossa on oltava oletusvienti eli Meta-objekti, joka kuvaa komponentin ja määrittää yhteiset story-asetukset.
import type { Meta } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'UI/Button', // Storybook sidebar path
component: Button,
tags: ['autodocs'], // enables auto-generated docs page
};
export default meta;Nimetyt story-viennit
Tiedoston jokainen nimetty vienti on story. CSF3:ssa story on objekti, jolla on args-ominaisuus eli komponentin propsit.
import type { StoryObj } from '@storybook/react';
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
args: { label: 'Click me', variant: 'primary' },
};
export const Secondary: Story = {
args: { label: 'Cancel', variant: 'secondary' },
};
export const Disabled: Story = {
args: { label: 'Unavailable', disabled: true },
};Storyjen periytyminen
Storyt perivät args-arvot meta-objektilta. Asettakaa yhteiset oletusarvot kohteessa meta.args ja ohittakaa ne tarvittaessa storykohtaisesti.
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // from @storybook/test
disabled: false,
},
};
export const Large: Story = {
args: { size: 'large', label: 'Large Button' }, // merges with meta args
};Render-funktion ohittaminen
Antakaa storylle render-funktio monimutkaisia tapauksia varten, joissa tarvitaan mukautettua JSX-käärintää tai useita instansseja.
export const WithIcon: Story = {
render: (args) => (
<div style={{ display: 'flex', gap: 8 }}>
<Button {...args} icon={<StarIcon />} />
<Button {...args} icon={<HeartIcon />} />
</div>
),
args: { label: 'Action' },
};Yksittäisten storyjen decoratorit
Lisätkää storylle decorators-taulukko, jos haluatte kääriä juuri kyseisen storyn lisäprovidereihin tai asetteluun.
export const InsideCard: Story = {
decorators: [
(Story) => (
<div style={{ padding: 24, background: '#f5f5f5' }}>
<Story />
</div>
),
],
args: { label: 'Card Button' },
};Storyjen parametrit
Käyttäkää parameters-määritystä lisäosien asetusten määrittämiseen storykohtaisesti, esimerkiksi tietyn tilan taustan tai näyttöalueen asettamiseen.
export const DarkMode: Story = {
parameters: {
backgrounds: { default: 'dark' },
},
args: { label: 'Dark Button', variant: 'primary' },
};autodocs-tagi
Kun lisäätte meta-objektiin tags: ['autodocs'], Storybook luo automaattisen dokumentaatiosivun, jolla on prop-taulukko ja kaikkien nimettyjen storyjen live-esimerkit.
Story jokaiselle tilalle
Kirjoittakaa story jokaiselle merkitykselliselle komponentin tilalle: tyhjä, lataus, virhe, yksi kohde, monta kohdetta, RTL-asettelu ja niin edelleen.
export const Loading: Story = { args: { isLoading: true } };
export const Error: Story = { args: { error: 'Failed to load' } };
export const Empty: Story = { args: { items: [] } };
export const WithData: Story = { args: { items: mockUsers } };Nimeämiskäytännöt
Käyttäkää tilaa kuvaavia PascalCase-muotoisia storyjen nimiä. Välttäkää yleisiä nimiä, kuten Default, ja olkaa täsmällisiä: PrimaryDisabled, SecondaryWithIcon.
Storyjen ryhmittely title-määrityksellä
Metan title-arvossa käytetään kauttaviivamerkintää sisäkkäisten ryhmien luomiseen Storybookin sivupalkkiin: 'Forms/Input' luo Forms-ryhmän, jonka aliryhmä on Input.
const meta: Meta<typeof TextInput> = {
title: 'Forms/TextInput',
component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...Storyjen uudelleenkäyttö testeissä
CSF3-storyt ovat tavallisia objekteja, joten voitte tuoda ja koostaa niitä yksikkötesteissä tai muissa storyissa.
import { Primary } from './Button.stories';
test('renders primary button', () => {
render(<Button {...Primary.args} />);
expect(screen.getByText('Click me')).toBeInTheDocument();
});Pikatarkistus
Miten storyn propsit ja tila määritellään CSF3:ssa?
Kertaus
CSF3-storyt ovat tyypitettyjä objekteja, joilla on args. Asettakaa yhteiset oletusarvot kohteessa meta.args, ohittakaa ne storykohtaisesti, käyttäkää render-funktiota mukautettuun JSX:ään ja lisätkää tags: ['autodocs'] automaattisesti luotavaa dokumentaatiota varten. Kirjoittakaa story jokaiselle merkitykselliselle komponentin tilalle.
Opi React tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”CSF3-storyjen kirjoittaminen” ilmainen?
Kyllä – oppitunnin ”CSF3-storyjen kirjoittaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”CSF3-storyjen kirjoittaminen”?
Viekää oletus-metaobjekti ja nimetyt storyt Component Story Format 3:a käyttäen. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”CSF3-storyjen kirjoittaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?
Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Storybookin käyttöönotto React-projektissa
- CSF3-storyjen kirjoittaminen
- Argsit, kontrollit ja Actions-lisäosa
- Storybook-testaus ja visuaalinen regressio