Skip to content

nkbt/react-component-template

Repository files navigation

react-component-template npm

Discord

CircleCI AppVeyor Coverage Dependencies Dev Dependencies

Base for React Components

Reason

Developing and publishing multiple React components requires a lot of work to keep them all at the same code, ops, best-practices level. Most of configs are often copy-pasted. If one project updated, for example, .eslintrc, other projects should follow to keep codebase consistent. Having growing number of components leads to a more diverged codebase that is exponentially harder to manage.

Contents

  • React module boilerplate dependencies and scripts
  • .gitignore and .npmignore
  • CircleCI config
  • ESLint config, strict version of Airbnb code style guide
  • Empty React component
  • Example
  • Tests and coverage (Tape, Isparta)
  • End-to-End tests (Nightwatch, Selenium)

Usage

  1. Install
npm install --save-dev react-component-template
  1. Set npm scripts in package.json and set component name
{
  "config": {
    "component": "ReactComponentTemplate"
  },
  "scripts": {
    "start": "react-component-template",
    "test": "npm start test",
    "precommit": "npm start precommit",
    "prepush": "npm start prepush",
    "postversion": "npm start postversion",
    "prepublish": "npm start prepublish"
  }
}
  1. Create webpack.config.js
'use strict';

module.exports = require('react-component-template/webpack.config');
  1. Create .eslintrc
{
  "extends": "./node_modules/react-component-template/.eslintrc"
}
  1. Other files

There is a react-component-template scaffold generator, install it:

npm install -g cf-react-component-template

and answer some questions, for example:

cf-react-component-template

Your name: Nik Butenko
Your email (will be publicly available, optional): nik@butenko.me
Your GitHub public username: nkbt
Package name: my-awesome-react-lib
Global package name (CamelCased): MyAwesomeReactLib
Package description: My awesome React library

License

MIT