YARSK

Yet Another React Starter Kit.

Everyone has one, here's mine.

Features

• React, of course.
• Webpack for asset bundling.
• Hot reloading enabled out of the box. Changes to React components will show in the browser immediately without a full reload thanks to react-transform-hmr.
• Babel for ES6+ transpilation.
• SASS (SCSS or Sass style), Less, 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. See the Header component and the Application component stylesheet for examples of each.
• Karma + Mocha + Enyzme for testing. Istanbul and isparta are also activated with

  karma-coverage

  for code coverage analysis, even on your ES6 classes. See Testing below for more info.
• Production configuration with best practices applied for optimizing React file size. The bundled JS file produced from this example is right at 40KB minified and gzipped. See Building below for more info.
• Built-in command for publishing your app to GitHub pages. See Building below for more info.
• Optional 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.

In the wild

• React TODO app with Flummox

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

dist

You can also automatically publish to GitHub pages. Just run this instead of the regular build command:

npm run build:gh

You can then view your app at

http://[yourgithubusername].github.io/[reponame]

Modifying the HTML

The HTML file is generated using the

conf/tmpl.html

Tests

The tests use Karma, Mocha and Chai through PhantomJS. See the example test in

app/components/Application/__tests__/index.js

npm test

To run the tests in watch mode (tests will re-run each time a file changes), use this instead:

npm run test:watch

You can generate code coverage reports with:

npm run test:coverage

See the

coverage

Finally, the repo is Travis ready. The

.travis.yml

Linting

If you'd like your JavaScript to be linted, copy the

.eslintrc.example

.eslintrc

.eslintrc

.editorconfig

An example

.editorconfig

.editorconfig.example

.editorconfig