React Component Library Boilerplate
What is this?
This application is a boilerplate for building React component libraries. It is bootstrapped off Create React App and uses Babel for its build process.
How does it work?
To create new components, add them inside the /src/components/ directory and import them into /src/index.js where they need to be added to the exported object.
import MyComponent from './components/MyComponent/MyComponent`
export default { MyComponent }
Next you'll need to version, build, and publish the library so that it can be downloaded from NPM. You can then access the component after installing the library in a new application by destructuring the component in the import statement:
import { MyComponent } from 'my-component-library
Finally, the global-styles directory will need to be pasted into the new application and imported in App.js or App.scss so that all global style rules are appropriately applied.
Dependency Versions
- React 17.0
- Babel Core 7.12
- Storybook 6.1
- React Router 5.2
- Node Sass 4.14.1
Commands:
npm start - Starts up Storybook
npm version patch - Versions the application by the last version number
npm run build - Runs a build
npm publish - Publishes the build to NPM
npm test - Runs the test suite
npm run push-update - Shortcut for patch versioning, building, and publishing with a single command