To develop React Component in isolation with Hot Reloading, you can add a React storybook to your development environment.
This is short installation of a React Storybook on:
Version of the package used in this installation
The configuration was done following this Storybook TypeScript Doc with th default preset (even if next use babel, the ts-loader preset just works).
npx -p @storybook/cli sb init
"@babel/core": "^7.9.0",
"babel-loader": "^8.1.0",
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-links": "^5.3.18",
"@storybook/addons": "^5.3.18",
"@storybook/react": "^5.3.18",
yarn add -D @storybook/preset-typescript ts-loader fork-ts-checker-webpack-plugin
module.exports = {
stories: ['../stories/**/*.stories.(ts|tsx|js|jsx|mdx)'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/preset-typescript'
],
};
yarn add @storybook/addon-docs --dev
yarn add @storybook/addon-knobs --dev
module.exports = {
stories: ['../stories/**/*.stories.(ts|tsx|js|jsx|mdx)'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links', {
name: "@storybook/addon-docs",
options: {
configureJSX: true,
},
},
'@storybook/preset-typescript',
'@storybook/addon-knobs/register'
],
};
parameters - No idea what it's for but yeah, it was in the addon-docs doc
import { addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
},
});