[
{
"path": ".gitignore",
"content": ".DS_Store\ndist\nnode_modules\n"
},
{
"path": "README.md",
"content": "# React Flux Simple App\n\nThis is the simples possible App that I can think of that implements the React framework on top of the Flux architecture.\n\n## Installation\n\n git clone git@github.com:bengrunfeld/react-flux-simple-app.git\n cd react-flux-simple-app\n npm install\n gulp\n\n## Usage\n\n* Open up `dist/index.html` in Chrome\n* Hit `Cmd + Option + j` to bring up the Dev Tools window\n* Click on the text in the UI and you'll see the log show up in the console.\n\n## Questions\n\nFor any question about Flux, hit me up on Twitter at: [@bengrunfeld](https://twitter.com/bengrunfeld)\n"
},
{
"path": "gulpfile.js",
"content": "var gulp = require('gulp');\nvar browserify = require('gulp-browserify');\nvar concat = require('gulp-concat');\n\ngulp.task('browserify', function() {\n gulp.src('src/js/main.js')\n .pipe(browserify({transform:'reactify'}))\n .pipe(concat('main.js'))\n .pipe(gulp.dest('dist/js'));\n});\n\ngulp.task('copy', function() {\n gulp.src('src/index.html')\n .pipe(gulp.dest('dist'));\n});\n\ngulp.task('default',['browserify', 'copy']);\n\ngulp.task('watch', function() {\n gulp.watch('src/**/*.*', ['default']);\n});\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"flux\",\n \"version\": \"0.0.1\",\n \"description\": \"A simple TODOS app in React and Flux\",\n \"author\": \"Ben Grunfeld\",\n \"repository\": \"https://github.com/bengrunfeld/flux-react-todos\",\n \"readme\": \"https://github.com/bengrunfeld/flux-react-todos/README.md\",\n \"license\": \"Apache 2\",\n \"devDependencies\": {\n \"gulp\": \"^3.8.11\",\n \"gulp-browserify\": \"^0.5.0\",\n \"gulp-concat\": \"^2.2.0\",\n \"react\": \"^0.12.2\",\n \"reactify\": \"^0.13.1\",\n \"es6-promise\": \"^1.0.0\",\n \"flux\": \"^2.0.1\",\n \"object-assign\": \"^1.0.0\"\n }\n}\n"
},
{
"path": "src/index.html",
"content": "\n\n \n \n React Flux App\n \n \n \n \n \n\n"
},
{
"path": "src/js/actions/AppActions.js",
"content": "var AppDispatcher = require('../dispatcher/AppDispatcher');\nvar AppConstants = require('../constants/AppConstants');\n\nvar AppActions = {\n addItem: function(item){\n AppDispatcher.handleViewAction({\n actionType:AppConstants.ADD_ITEM,\n item: item\n })\n }\n}\n\nmodule.exports = AppActions\n"
},
{
"path": "src/js/components/app.js",
"content": "/** @jsx React.DOM */\nvar React = require('react');\nvar AppActions = require('../actions/AppActions');\nvar AppStore = require('../stores/AppStore');\n\nvar App = React.createClass({\n handleClick:function(){\n AppActions.addItem('this is the item');\n },\n render:function(){\n return (\n \n
Click this Title, then check console
\n \n )\n }\n });\n\nmodule.exports = App;\n"
},
{
"path": "src/js/constants/AppConstants.js",
"content": "module.exports = {\n ADD_ITEM: 'ADD_ITEM',\n REMOVE_ITEM: 'REMOVE_ITEM'\n};\n"
},
{
"path": "src/js/dispatcher/AppDispatcher.js",
"content": "var Dispatcher = require('flux').Dispatcher;\nvar assign = require('object-assign');\n\nvar AppDispatcher = assign(new Dispatcher(), {\n handleViewAction: function(action) {\n this.dispatch({\n source: 'VIEW_ACTION',\n action: action\n });\n }\n});\n\nmodule.exports = AppDispatcher;\n"
},
{
"path": "src/js/main.js",
"content": "/** @jsx React.DOM */\nvar React = require('react');\n\n// Not ideal to use createFactory, but don't know how to use JSX to solve this\n// Posted question at: https://gist.github.com/sebmarkbage/ae327f2eda03bf165261\nvar App = require('./components/app.js');\n\nReact.render(\n ,\n document.getElementById('main')\n);\n"
},
{
"path": "src/js/stores/AppStore.js",
"content": "var AppDispatcher = require('../dispatcher/AppDispatcher');\nvar EventEmitter = require('events').EventEmitter;\nvar assign = require('object-assign');\n\n\nvar CHANGE_EVENT = 'change';\n\nvar AppStore = assign({}, EventEmitter.prototype, {\n emitChange: function() {\n this.emit(CHANGE_EVENT);\n }\n});\n\nAppDispatcher.register(function(payload){\n console.log(payload);\n return true;\n});\n\nmodule.exports = AppStore;\n"
}
]