/react-component-library-typescript-boilerplate

Primary LanguageJavaScript

logo

ReactJS Component Library TypeScript Boilerplate

Powered by Storybook

🧰 Prerequisites

  1. Install NodeJS
  2. Install yarn
  3. Install Prettier ESLint VSCode Extension

🚀 Development

  1. Locate the repository in terminal/bash
  2. Install dependencies - yarn install in the repository directory
  3. Follow the instructions below in order 👇🏻

📖 Storybook

  1. Run yarn storybook in repository directory
  2. Open browser and navigate to http://localhost:6006/

🎨 Import library locally in a project with hot reload

  1. In the project that you want to use this library in, run the following in the root folder:
cd node_modules/react && yarn link && cd .. && cd react-dom && yarn link && cd ../..
  1. Run yarn link:react in the root of the library directory
  2. Run yarn link in the root of the library directory
  3. In the project, run yarn link "name-of-library" in project that want to use this library)
import { SampleComponent } from 'name-of-library'

Testing

  • Run yarn test in the repository directory

Create new components

  • Run yarn generate "ComponentName" in the repository directory

🎁 Production deployment

Publishing

  • Run yarn publish in the repository and follow the CLI instructions

👷 Built With

  • ReactJS - Frontend Javascript web framework
  • TypeScript - Open-source language which builds on JavaScript
  • Storybook - UI development tool
  • Jest - JavaScript testing framework

📚 Author