react-component-template's Introduction

react-component-template

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.

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

Install

npm install --save-dev react-component-template

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"
  }
}

Create webpack.config.js

'use strict';

module.exports = require('react-component-template/webpack.config');

Create .eslintrc

{
  "extends": "./node_modules/react-component-template/.eslintrc"
}

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): [email protected]
Your GitHub public username: nkbt
Package name: my-awesome-react-lib
Global package name (CamelCased): MyAwesomeReactLib
Package description: My awesome React library