-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a3d20f5
commit ba5d1b3
Showing
5 changed files
with
94 additions
and
96 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,3 @@ | ||
| # React Slingshot! | ||
| # React Linechart | ||
|
|
||
| React Slingshot is a comprehensive starter kit for rapid application development using React. It offers a rich development experience including: | ||
|
|
||
| | **Tech** | **Description** |**Learn More**| | ||
| |----------|-------|---| | ||
| | [React](https://facebook.github.io/react/) | Fast, composable client-side components. | [Pluralsight Course](https://www.pluralsight.com/courses/react-flux-building-applications) | | ||
| | [Redux](http://redux.js.org) | Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging. Lean alternative to [Facebook's Flux](https://facebook.github.io/flux/docs/overview.html).| [Tutorial](https://egghead.io/series/getting-started-with-redux) | | ||
| | [React Router](https://github.com/reactjs/react-router) | A complete routing library for React | [Pluralsight Course](https://www.pluralsight.com/courses/react-flux-building-applications) | | ||
| | [Babel](http://babeljs.io) | Compiles ES6 to ES5. Enjoy the new version of JavaScript today. | [ES6 REPL](https://babeljs.io/repl/), [ES6 vs ES5](http://es6-features.org), [ES6 Katas](http://es6katas.org), [Pluralsight course](https://www.pluralsight.com/courses/javascript-fundamentals-es6) | | ||
| | [Webpack](http://webpack.github.io) | Bundles npm packages and our JS into a single file. Includes hot reloading via [react-transform-hmr](https://www.npmjs.com/package/react-transform-hmr). | [Quick Webpack How-to](https://github.com/petehunt/webpack-howto) [Pluralsight Course](https://www.pluralsight.com/courses/webpack-fundamentals)| | ||
| | [Browsersync](https://www.browsersync.io/) | Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices. | [Intro vid](https://www.youtube.com/watch?time_continue=1&v=heNWfzc7ufQ)| | ||
| | [Mocha](http://mochajs.org) | Automated tests with [Chai](http://chaijs.com/) for assertions and [Cheerio](https://www.npmjs.com/package/cheerio) for DOM testing without a browser using Node. | [Pluralsight Course](https://www.pluralsight.com/courses/testing-javascript) | | ||
| | [TrackJS](https://trackjs.com/) | JavaScript error tracking. | [Free trial](https://my.trackjs.com/signup)| | ||
| | [ESLint](http://eslint.org/)| Lint JS. Reports syntax and style issues. Using [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) for additional React specific linting rules. | | | ||
| | [SASS](http://sass-lang.com/) | Compiled CSS styles with variables, functions, and more. | [Pluralsight Course](https://www.pluralsight.com/courses/better-css)| | ||
| | [Editor Config](http://editorconfig.org) | Enforce consistent editor settings (spaces vs tabs, etc). | [IDE Plugins](http://editorconfig.org/#download) | | ||
| | [npm Scripts](https://docs.npmjs.com/misc/scripts)| Glues all this together in a handy automated build. | [Pluralsight course](https://www.pluralsight.com/courses/npm-build-tool-introduction), [Why not Gulp?](https://medium.com/@housecor/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.vtaziro8n) | | ||
|
|
||
| The starter kit includes a working example app that puts all of the above to use. | ||
|
|
||
| ## Get Started | ||
| 1. **Initial Machine Setup**. First time running the starter kit? Then complete the [Initial Machine Setup](https://github.com/coryhouse/react-slingshot#initial-machine-setup). | ||
| 2. **Clone the project**. `git clone https://github.com/coryhouse/react-slingshot.git`. | ||
| 3. **Install Node packages**. `npm install` | ||
| 4. **Run the example app**. `npm start -s` | ||
| This will run the automated build process, start up a webserver, and open the application in your default browser. When doing development with this kit, you'll want to keep the command line open at all times so that your code is rebuilt and tests run automatically every time you hit save. Note: The -s flag is optional. It enables silent mode which suppresses unnecessary messages during the build. | ||
| 5. **Review the example app.** This starter kit includes a working example app that calculates fuel savings. Note how all source code is placed under /src. Tests are placed alongside the file under test. The final built app is placed under /dist. These are the files you run in production. | ||
| 6. **Delete the example app files.** Once you're comfortable with how the example app works, you can [delete those files and begin creating your own app](https://github.com/coryhouse/react-slingshot#i-just-want-an-empty-starter-kit). | ||
|
|
||
| ##Initial Machine Setup | ||
| 1. **Install [Node 4.0.0 or greater](https://nodejs.org)** - (5.0 or greater is recommended for optimal build performance). Need to run multiple versions of Node? Use [nvm](https://github.com/creationix/nvm). | ||
| 2. **Install [Git](https://git-scm.com/downloads)**. | ||
| 3. **Install [React developer tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Redux Dev Tools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)** in Chrome. (Optional, but helpful. The latter offers time-travel debugging.) | ||
| 4. On a Mac? You're all set. If you're on Linux or Windows, complete the steps for your OS below. | ||
|
|
||
| **On Linux:** | ||
|
|
||
| * Run this to [increase the limit](http://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc) on the number of files Linux will watch. [Here's why](https://github.com/coryhouse/react-slingshot/issues/6). | ||
| `echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p` | ||
|
|
||
| **On Windows:** | ||
|
|
||
| * **Install [Python 2.7](https://www.python.org/downloads/)**. Some node modules may rely on node-gyp, which requires Python on Windows. | ||
| * **Install C++ Compiler**. Browser-sync requires a C++ compiler on Windows. [Visual Studio Express](https://www.visualstudio.com/en-US/products/visual-studio-express-vs) comes bundled with a free C++ compiler. Or, if you already have Visual Studio installed: Open Visual Studio and go to File -> New -> Project -> Visual C++ -> Install Visual C++ Tools for Windows Desktop. The C++ compiler is used to compile browser-sync (and perhaps other Node modules). | ||
|
|
||
| ## Questions? | ||
| Check out the [FAQ](/docs/FAQ.md) | ||
| Highly customizable line charts using React! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| { | ||
| "name": "simple-frontend-boilerplate", | ||
| "version": "1.0.0", | ||
| "description": "Simple boilerplate with React, Redux, Mocha, ESlint based on React Slinghsot", | ||
| "scripts": { | ||
| "prestart": "npm run remove-dist", | ||
| "start": "npm-run-all --parallel lint:tools test:watch open:src", | ||
| "open:src": "babel-node tools/srcServer.js", | ||
| "open:dist": "babel-node tools/distServer.js", | ||
| "lint:tools": "eslint webpack.config.js tools", | ||
| "clean-dist": "npm run remove-dist && mkdir dist", | ||
| "remove-dist": "node_modules/.bin/rimraf ./dist", | ||
| "build:html": "babel-node tools/buildHtml.js", | ||
| "build:js": "babel-node tools/build.js ", | ||
| "prebuild": "npm run clean-dist", | ||
| "build": "npm-run-all --parallel test build:html build:js", | ||
| "postbuild": "npm run open:dist", | ||
| "test": "cross-env NODE_ENV=test mocha --reporter progress --compilers js:babel-core/register --recursive \"./src/**/*.spec.js\" --require ignore-styles", | ||
| "test:watch": "npm run test -- --watch" | ||
| }, | ||
| "author": "Rafael Quintanilha", | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "object-assign": "4.0.1", | ||
| "react": "0.14.7", | ||
| "react-dom": "0.14.7", | ||
| "react-redux": "4.4.0", | ||
| "redux": "3.3.1" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "6.5.1", | ||
| "babel-core": "6.5.1", | ||
| "babel-eslint": "5.0.0", | ||
| "babel-loader": "6.2.3", | ||
| "babel-plugin-react-display-name": "2.0.0", | ||
| "babel-preset-es2015": "6.5.0", | ||
| "babel-preset-react": "6.5.0", | ||
| "babel-preset-react-hmre": "1.1.1", | ||
| "babel-preset-stage-1": "6.5.0", | ||
| "browser-sync": "2.11.1", | ||
| "chai": "3.4.1", | ||
| "cheerio": "0.19.0", | ||
| "colors": "1.1.2", | ||
| "connect-history-api-fallback": "1.2.0", | ||
| "cross-env": "1.0.7", | ||
| "css-loader": "0.23.1", | ||
| "eslint": "2.2.0", | ||
| "eslint-loader": "1.3.0", | ||
| "eslint-plugin-react": "4.0.0", | ||
| "extract-text-webpack-plugin": "1.0.1", | ||
| "file-loader": "0.8.5", | ||
| "ignore-styles": "1.2.0", | ||
| "mocha": "2.3.4", | ||
| "node-sass": "3.4.2", | ||
| "npm-run-all": "1.6.0", | ||
| "redbox-react": "1.2.0", | ||
| "rimraf": "2.5.0", | ||
| "sass-loader": "3.1.2", | ||
| "style-loader": "0.13.0", | ||
| "webpack": "1.12.11", | ||
| "webpack-dev-middleware": "1.4.0", | ||
| "webpack-hot-middleware": "2.6.0", | ||
| "yargs": "3.32.0" | ||
| }, | ||
| "keywords:": [ | ||
| "react", | ||
| "reactjs", | ||
| "react-router", | ||
| "hot", | ||
| "reload", | ||
| "hmr", | ||
| "live", | ||
| "edit", | ||
| "webpack", | ||
| "redux", | ||
| "flux", | ||
| "boilerplate", | ||
| "starter" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://bitbucket.org/rafaelquintanilha/simple-frontend-boilerplate" | ||
| } | ||
| } |