Don't use this, use Create React App
Yet Another React Starter Kit.
Everyone has one, here's mine.
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-coveragefor code coverage analysis, even on your ES6 classes. See Testing below for more info.
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.
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
To generate a production build, run:
npm run build
The above command will generate a
distfolder with the appropriate index.html file along with the minified CSS and JS files.
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]. For example, you can load this demo at http://bradleyboy.github.io/yarsk.
The HTML file is generated using the
conf/tmpl.htmlfile. This file is used for both the development and production build.
The tests use Karma, Mocha and Chai through PhantomJS. See the example test in
app/components/Application/__tests__/index.js. The test suite can be run like so:
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
coveragedirectory once that command is completed.
Finally, the repo is Travis ready. The
.travis.ymlfile should work out of the box, just add your repo in Travis.
.eslintrc. I've included my own defaults, feel free to modify them to your own taste. For more information on configuring ESLint, consult its documentation. Linting is run before each webpack build when a
.eslintrcfile is present.
.editorconfig.exampleto match your own preferences, then renamed the file to
.editorconfigand use an IDE or editor that supports EditorConfig.