This template ships with the main React and Storybook configuration files you'll need to get up and running fast.
-
Create the application.
Use degit to get this template.
# Clone the template npx degit chromaui/intro-storybook-react-template taskbox -
Install the dependencies.
Navigate into your new siteβs directory and install the necessary dependencies.
# Navigate to the directory cd taskbox/ # Install the dependencies yarn
-
Open the source code and start editing!
Open the
taskboxdirectory in your code editor of choice and building your first component! -
Browse your stories!
Run
yarn storybookto see your component's stories athttp://localhost:6006
A quick look at the top-level files and directories included with this template.
.
βββ .storybook
βββ node_modules
βββ public
βββ src
βββ .gitignore
βββ LICENSE
βββ package.json
βββ yarn.lock
βββ README.md
-
.storybook: This directory contains Storybook's configuration files. -
node_modules: This directory contains all of the modules of code that your project depends on (npm packages). -
public: This directory will contain the development and production build of the site. -
src: This directory will contain all of the code related to what you will see on your application. -
.gitignore: This file tells git which files it should not track or maintain during the development process of your project. -
LICENSE: The template is licensed under the MIT licence. -
package.json: Standard manifest file for Node.js projects, which typically includes project specific metadata ( such as the project's name, the author among other information). It's based on this file that npm will know which packages are necessary to the project. -
yarn.lock: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (Do not change it manually). -
README.md: A text file containing useful reference information about the project.
If you encounter an issue with the template, we encourage you to open an issue in this template's repository.
- Read our introductory tutorial at Learn Storybook.
- Learn how to transform your component libraries into design systems in our Design Systems for Developers tutorial.
- See our official documentation at Storybook.