React Slingshot is a comprehensive starter kit for rapid application development using React.
npm startto start development in your default browser.
npm run buildto do all this:
git clone https://github.com/coryhouse/react-slingshot.git.
npm run setup
npm start -sThis will run the automated build process, start up a webserver, and open the application in your default browser. When doing development with this kit, this command will continue watching all your files. Every time you hit save the code is rebuilt, linting runs, and tests run automatically. Note: The -s flag is optional. It enables silent mode which suppresses unnecessary messages during the build.
##Initial Machine Setup
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
npm install- If you forget to do this, you'll see this:
babel-node: command not found.
##Technologies Slingshot offers a rich development experience using the following technologies:
|React||Fast, composable client-side components.||Pluralsight Course|
|Redux||Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging. Lean alternative to Facebook's Flux.||Pluralsight Course|
|React Router||A complete routing library for React||Pluralsight Course|
|Webpack||Bundles npm packages and our JS into a single file. Includes hot reloading via react-transform-hmr.||Quick Webpack How-to Pluralsight Course|
|Browsersync||Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices.||Intro vid|
|Mocha||Automated tests with Chai for assertions and Enzyme for DOM testing without a browser using Node.||Pluralsight Course|
|Isparta||Code coverage tool for ES6 code transpiled by Babel.|
|ESLint||Lint JS. Reports syntax and style issues. Using eslint-plugin-react for additional React specific linting rules.|
|SASS||Compiled CSS styles with variables, functions, and more.||Pluralsight Course|
|PostCSS||Transform styles with JS plugins. Used to autoprefix CSS|
|Editor Config||Enforce consistent editor settings (spaces vs tabs, etc).||IDE Plugins|
|npm Scripts||Glues all this together in a handy automated build.||Pluralsight course, Why not Gulp?|
The starter kit includes a working example app that puts all of the above to use.
Check out the FAQ