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.

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

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

3. Create webpack.config.js

'use strict';

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

4. Create .eslintrc

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

5. 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