react-npm-component-starter

Synopsis

A starter kit for publishing small and efficient react components to NPM and http://react-components.com/.

Features

• React, of course.
• Webpack for asset bundling.
• React hot loader enabled out of the box. Changes to React components will show in the browser immediately without a full reload.
• Babel for ES6+ transpilation.
• SASS (SCSS or Sass style) and Autoprefixer enabled by default through Webpack.
• Image loaders setup and ready to go so you can reference your images as require() statements in JS, or just use url() as usual in CSS and Webpack will take care of the rest.
• Production configuration with best practices applied for optimizing React file size.
• ESLint Support for ESLint via babel-eslint.

This kit is intentionally missing a specific Flux implementation, or any other non-essential library, as I use this as a base for experimenting with various parts of the React ecosystem.

Directory Layout

.
├── /build/                     # The folder for compiled output
├── /__test__/                  # Jest Test Intigration 
├── /node_modules/              # 3rd-party libraries and utilities
├── /view/                      # Use to test and view the react component
│   ├── /styles/                # Global styles
│   ├── /entry.jsx              # React Entry
│   ├── /template.html          # index.html template
├── /component/                 # React Component 
│   ├── /index.jsx              # Component JSX file
│   └── /webpack.config.js      # Component styling file
└── package.json                # The list of 3rd party libraries and utilities

In the wild

• React Upload Button
• React Color Panel
• React Birds

Usage

Fork this repo, then run:

npm install
npm start

That will fire up a webpack dev server in hot mode. Most changes will be reflected in the browser automatically without a browser reload. You can view the app in the browser at http://localhost:8080.

Building

To generate a production build, run:

npm run build

The above command will generate a build folder with the appropriate component.js file along with the minified CSS and JS files.
This can be directly published to NPM via:

npm publish

Modifying the HTML

The HTML file is generated using the view/template.html file. This file is used for both the development build.

License

MIT