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