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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Flux App</title>
</head>
<body>
<div id="main" class="container"></div>
<script src="js/main.js"></script>
</body>
</html>
================================================
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 (
<div className="wrapper">
<h3 onClick={this.handleClick}>Click this Title, then check console</h3>
</div>
)
}
});
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(
<App />,
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;
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
Condensed preview — 11 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (5K chars).
[
{
"path": ".gitignore",
"chars": 28,
"preview": ".DS_Store\ndist\nnode_modules\n"
},
{
"path": "README.md",
"chars": 587,
"preview": "# React Flux Simple App\n\nThis is the simples possible App that I can think of that implements the React framework on top"
},
{
"path": "gulpfile.js",
"chars": 522,
"preview": "var gulp = require('gulp');\nvar browserify = require('gulp-browserify');\nvar concat = require('gulp-concat');\n\ngulp.task"
},
{
"path": "package.json",
"chars": 538,
"preview": "{\n \"name\": \"flux\",\n \"version\": \"0.0.1\",\n \"description\": \"A simple TODOS app in React and Flux\",\n \"author\": \"Ben Grun"
},
{
"path": "src/index.html",
"chars": 247,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <title>React Flux App</title>\n </h"
},
{
"path": "src/js/actions/AppActions.js",
"chars": 300,
"preview": "var AppDispatcher = require('../dispatcher/AppDispatcher');\nvar AppConstants = require('../constants/AppConstants');\n\nva"
},
{
"path": "src/js/components/app.js",
"chars": 474,
"preview": "/** @jsx React.DOM */\nvar React = require('react');\nvar AppActions = require('../actions/AppActions');\nvar AppStore = re"
},
{
"path": "src/js/constants/AppConstants.js",
"chars": 75,
"preview": "module.exports = {\n ADD_ITEM: 'ADD_ITEM',\n REMOVE_ITEM: 'REMOVE_ITEM'\n};\n"
},
{
"path": "src/js/dispatcher/AppDispatcher.js",
"chars": 290,
"preview": "var Dispatcher = require('flux').Dispatcher;\nvar assign = require('object-assign');\n\nvar AppDispatcher = assign(new Disp"
},
{
"path": "src/js/main.js",
"chars": 317,
"preview": "/** @jsx React.DOM */\nvar React = require('react');\n\n// Not ideal to use createFactory, but don't know how to use JSX to"
},
{
"path": "src/js/stores/AppStore.js",
"chars": 412,
"preview": "var AppDispatcher = require('../dispatcher/AppDispatcher');\nvar EventEmitter = require('events').EventEmitter;\nvar assig"
}
]
About this extraction
This page contains the full source code of the bengrunfeld/react-flux-simple-app GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 11 files (3.7 KB), approximately 1.3k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.