Base for React Components
JavaScript CSS
Latest commit 7114985 Nov 1, 2016 @nkbt 0.1.9
Permalink
Failed to load latest commit information.
src
test-e2e Fix Smoketest to pick up correct package.json May 17, 2016
test
.babelrc Remove babel-plugin-webpack-loaders and make coverage work Jul 5, 2016
.eslintignore Use absolute paths in .eslintignore Jul 27, 2016
.eslintrc Remove depreacted eslint rules Sep 4, 2016
.gitignore Allow bower.json in npm package Dec 24, 2015
.npmrc
.nvmrc wip May 17, 2016
LICENSE
README.md Use CLI instead of p-s Jul 27, 2016
appveyor.yml Try harder Nov 1, 2016
bower.json
circle.yml
cli.js
nightwatch.json Create screenshots on e2e test failures Mar 14, 2016
package-scripts.js
package.json 0.1.9 Nov 1, 2016
webpack.config.js
yarn.lock Add yarn lock Nov 1, 2016

README.md

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