react-starter

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

No magic.

Quick start

1. Fork this repo.
2. $ npm install
3. 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
  • Tape + ES6
  • React test utilities
  • Coverage reporting
• 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.