React Templates & Themes Logo React Templates & Themes
React Npm Component Starter screenshot

React Npm Component Starter

Author Avatar Theme by Markusenglund
Updated: 22 Jan 2019
171 Stars

A minimal boilerplate for building a react component for npm, including a demo page.

Github

Overview

This article discusses a boilerplate project for building a react component package for npm. It provides a minimal and easy-to-understand structure for developing a react component library and a demo page for showcasing the components. The library source code is transpiled with Babel, while the demo app source code is transpiled, bundled, and minified with Webpack and Babel. The article explains the purpose and usage of each part of the project and provides step-by-step instructions for getting started with development.

Features

  • Simple boilerplate project for building a react component package for npm
  • Suitable for building any type of UI component or library
  • Contains correctly transpiled folder for the component library and a demo page
  • Minimal and easy to understand structure
  • Provides ability to inspect components during development
  • Allows showcasing the components to users

Installation

Follow these steps to get started developing your own react component using this boilerplate:

  1. Clone the boilerplate project using the command: git clone https://github.com/yogaboll/react-npm-component-starter.git

  2. Install the required dependencies using the command: npm install

  3. Transpile both the lib and docs folders in watch mode and serve the docs page using the command: npm run dev

  4. Open your browser and go to http://127.0.0.1:8000 to see the demo in action.

  5. Whenever you make changes to the code in either src/lib or src/docs, the page will automatically update.

  6. Reset the git history by running the following commands:

rm -rf .git
git init
git commit -m "Initial commit"

Summary

This article introduces a boilerplate project for building a react component package for npm. It explains the structure of the project, where the library and demo code reside, and how they are transpiled using Babel and Webpack. The article also provides installation instructions for setting up the development environment and showcases the key features of the boilerplate. Overall, it offers a simple and straightforward starting point for developing react components for npm.