Skip to content

Instantly share code, notes, and snippets.

@hachibeeDI hachibeeDI/.gitignore Secret
Last active Jun 23, 2016

Embed
What would you like to do?
flux sample
# Created by https://www.gitignore.io/api/osx,node
### OSX ###
*.DS_Store
.AppleDouble
.LSOverride
# Icon must end with two \r
Icon
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
### Node ###
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
const dispatcher = require('./dispatcher').getDispatcher();
module.exports = {
handleChange(component) {
return (_ev) => {
const val = component.state.val + 1;
dispatcher.emit('great:changed', {val});
}
}
};
const createElement = require('react').createElement;
const render = require('react-dom').render;
const GreatComponent = require('./component2.jsx');
document.addEventListener('DOMContentLoaded', (_ev) => {
console.log();
render(
createElement(GreatComponent),
document.getElementById('great')
);
});
const React = require('react');
const GreatActionCreator = require('./action');
module.exports =
class GreatComponent extends React.Component {
constructor(props) {
super(props);
this.state = {val: 0};
}
render() {
return (
<article>
<p>{this.state.val}</p>
<button onClick={GreatActionCreator.handleChange(this)}>Click!!</button>
</article>
);
}
}
const React = require('react');
const GreatStore = require('./store');
const Action = require('./action');
const dispatcher = require('./dispatcher').getDispatcher();
module.exports =
class GreatComponent extends React.Component {
constructor(props) {
super(props);
this.state = {val: 0};
this.store = new GreatStore(dispatcher);
this.store.on('changed', val => {
this.setState(val);
});
}
render() {
return (
<article>
<p>{this.state.val}</p>
<button onClick={Action.handleChange(this)}>Click!!</button>
</article>
);
}
}
const EventEmitter = require('events').EventEmitter;
class Dispatcher extends EventEmitter {
}
let _dispatcher;
module.exports = {
getDispatcher () {
if (!_dispatcher) {
_dispatcher = new Dispatcher();
}
return _dispatcher;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tokyo</title>
<script src="/dist/bundle.js"></script>
<style>
html,body,section {
width: 100%;
height: 100%;
text-align: center;
}
p {
height: 30vh;
line-height: 40vh;
font-size: 38px;
}
button {
height: 100px;
width: 200px;
font-size: 30px;
border: 2px solid #377E9A;
border-radius: 2px;
background-color: #4F9BDC;
color: #FEFEFE;
outline: none;
}
</style>
</head>
<body>
<section id="great"></section>
</body>
</html>
{
"name": "b765a9e99c0450a9d0900928aed3087b",
"version": "1.0.0",
"description": "",
"main": "action.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "$(npm bin)/browserify bootstrap.js -t [ babelify --presets [ es2015 react ] ] -o dist/bundle.js"
},
"repository": {
"type": "git",
"url": "git+ssh://git@gist.github.com/b765a9e99c0450a9d0900928aed3087b.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://gist.github.com/b765a9e99c0450a9d0900928aed3087b"
},
"homepage": "https://gist.github.com/b765a9e99c0450a9d0900928aed3087b",
"dependencies": {
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"react": "^15.1.0",
"react-dom": "^15.1.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0"
}
}
const EventEmitter = require('events').EventEmitter;
module.exports =
class GreatStore extends EventEmitter {
constructor(dispatcher) {
super();
this.dispatcher = dispatcher;
this.state = {};
this.dispatcher.on('great:changed', value => {
this.state = Object.assign(this.state, value);
this.emit('changed', this.state);
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.