Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React+Storybook ことはじめ

React+Storybook ことはじめ

React.js meetup #7 (LT会)の資料です。
https://reactjs-meetup.connpass.com/event/130682/

Toshihisa Tomatsu

May 27, 2019
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Technology

Transcript

  1. 6 React + Storybook • ಋೖ͸਽ܗੜ੒ίϚϯυΛ࣮ߦ͢Δ͚ͩ QBDLBHFKTPO͸ඞཁ • npx -p

    @storybook/cli sb init --type react stories/ |- index.stories.js .storybook/ |- addons.js |- config.js package.json node_modules package-lock.json package.json "scripts": { + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "dependencies": { + "@storybook/addon-actions": "^5.0.11", + "@storybook/addon-links": "^5.0.11", + "@storybook/addons": "^5.0.11", + "@storybook/react": "^5.0.11",
  2. 9 With TypeScript • `$ npm i -D typescript ts-loader`

    • StorybookͷϏϧυϓϩηεͰTSXΛॲཧͰ͖ΔΑ͏ʹ `.storybook/webpack.config.js`Λ࡞੒
  3. 11 react-docgen-typescript-loader • TypeScript Reactίϯϙʔωϯτ͔Βdocgen৘ใΛੜ੒͢Δͨ Ίͷloader • @storybook/addon-info”ͰίϯϙʔωϯτͷProps৘ใΛςʔ ϒϧܗࣜͰࣗಈੜ੒͢Δ࣌ʹ࢖͏ •

    `npm install -D react-docgen-typescript-loader` • webpack.config.js
 `use: [require.resolve('ts-loader'), require.resolve(‘react-docgen-typescript-loader')],` https://github.com/strothj/react-docgen-typescript-loader