react-starter

Pragmatic starter kit for React + ES6 + Babel + Webpack + Tape.

No magic.

Quick start

Fork this repo.
$ npm install
Profit!

Running hot-loaded development server using `webpack-dev=server`

$ npm run dev
# or
$ webpack-dev-server --progress --profile --colors --hot

Running tests

To run tests using tape + babel for ES6:

$ npm test
# or
$ tape --require babel-register tests/*.jsx | faucet

> tape --require babel-register tests/*.jsx | faucet

✓ <Foo /> adds two numbers
# tests 1
# pass  1
✓ ok

Running coverage reporting

To run tests using tape + babel for ES6:

$ npm run coverage
# or
$ nyc -e .jsx tape --require babel-register tests/*.jsx

> nyc -e .jsx tape --require babel-register tests/*.jsx

TAP version 13
# <Foo /> adds two numbers
ok 1 should be equal

1..1
# tests 1
# pass  1

# ok

--------------|----------|----------|----------|----------|----------------|
File          |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
--------------|----------|----------|----------|----------|----------------|
All files     |      100 |      100 |      100 |      100 |                |
 src          |      100 |      100 |      100 |      100 |                |
  Foo.jsx     |      100 |      100 |      100 |      100 |                |
 tests        |      100 |      100 |      100 |      100 |                |
  FooTest.jsx |      100 |      100 |      100 |      100 |                |
--------------|----------|----------|----------|----------|----------------|

To build for production

$ npm run build
# or
$ NODE_ENV=production webpack -p --config webpack.production.config.js --progress --profile --colors

Recipes

Hate that slimy, dirty feeling when using work that isn't yours?

Have serious trust issues?

Why not build your own starter kit with the following recipes!

Table of content

React
Babel + ES6
Webpack
- Webpack Loaders
Unit tests with Tape
Optional

React

Essential React dependencies

Library	Description
`react`	React core library
`react-dom`	React DOM rendering library

$ npm install --save-dev react \
                         react-dom

Babel ES6

Essential Babel config for using ES6/ES2015 with React

Library	Description
`babel-core`	Babel core library
`babel-preset-es2015`	Babel preset for all es2015 plugins.
`babel-preset-react`	Babel preset for all React plugins.
`babel-plugin-transform-object-rest-spread`	Babel plugin for Object Rest/Spread Properties in ECMAScript (Optional, but really, this is like having cake on a Monday)
`babel-plugin-transform-async-to-generator`	Babel plugin for Async Functions for ECMAScript (Again, optional, but hey, cakes for days)

$ npm install --save-dev babel-core \
                         babel-preset-es2015 \
                         babel-preset-react \
                         babel-plugin-transform-object-rest-spread \
                         babel-plugin-transform-async-to-generator

Webpack

Essential module bundling using Webpack.

Library	Description
`webpack`	Webpack module bundler
`webpack-dev-server`	Development-only server for you webpack app.

$ npm install --save-dev webpack \
                         webpack-dev-server

Webpack Loaders

Essential webpack loaders.

(Note: Do remember to update webpack.loaders.js file if you decide to add/remove the below recommended loaders)

Webpack Loaders	Description
`url-loader`	URL loader for webpack
`css-loader`	CSS loader for webpack
`file-loader`	File loader for webpack
`json-loader`	JSON file loader for webpack
`style-loader`	Style loader for webpack, adds CSS to the DOM by injecting a `<style>` tag
`babel-loader`	Babel loader for webpack; allows you to transpile ES6 and React/JSX files as well.
`react-hot-loader`	React hot loader for webpack; allows instantaneous live refresh without losing state while editing React components.

$ npm install --save-dev url-loader \
                         css-loader \
                         file-loader \
                         json-loader \
                         style-loader \
                         babel-loader \
                         react-hot-loader

Unit tests for React using Tape

Essentials for pragmatic unit tests, free of magic.

Read this article on why you'd want to use tape instead of unit-test frameworks such as mocha and jasmine

Essential Tape + ES6/ES2015

Library	Description
`tape`	Tap-producing test harness for node and browsers
~~`babel-tape-runner`~~	~~A test runner for tape that utilizes babel in order to run test suites that include ESNext/Harmony features.~~ (We can use `--require babel-register` to allow `tape` to run ESNext features)
`babel-register`	To allow `tape` to compile es6/esnext code.
`faucet`	Human-readable TAP summarizer. Transform output from `tape` into something you would actually want to read from running tests.
`nyc`	For coverage reporting

$ npm install --save-dev tape \
                         babel-register \
                         faucet \
                         nyc

Coverage reporting

Library	Description
`nyc`	For coverage reporting

$ npm install --save-dev nyc

Testing Utilities for React components

Choose one of the following utilities to help with testing React components. Or use all of them. Your call.

(But really, enzyme is probably what you need)

Library	Description
`enzyme`	Airbnb JavaScript Testing utilities for React that makes it easier to assert, manipulate, and traverse your React Components' output. (Recommended)
`react-addons-test-utils`	Implicit dependency for `enzyme`. Refer to https://github.com/airbnb/enzyme#installation

$ npm install --save-dev enzyme \
                         react-addons-test-utils

Optional

Other useful but non-core libraries for your React project that you might want to consider.

(Not included by default)

Library	Description
`classnames`	A simple javascript utility for conditionally joining classNames together.
`autoprefixer`	PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
`react-router`	For better or worse, de-facto routing library for React. (Some alternatives discussed here)

License

MIT.

sogko/react-starter