Skip to content

Instantly share code, notes, and snippets.

@maji-KY
Created March 1, 2015 18:18
Show Gist options
  • Save maji-KY/e7a085f7d05a5f281f04 to your computer and use it in GitHub Desktop.
Save maji-KY/e7a085f7d05a5f281f04 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>react</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.js"></script>
<script src="https://github.com/react-bootstrap/react-bootstrap/releases/download/v0.13.0/react-bootstrap.min.js"></script>
<script src="js/ReactRouterBootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.50/Bacon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
<script src="https://github.com/BinaryMuse/fluxxor/releases/download/1.5.2/fluxxor.js"></script>
<!--<script type="text/jsx" src="app.js"></script>-->
</head>
<body>
<div id="appContainer"></div>
<!--<script type="text/jsx;harmony=true">-->
<script type="text/jsx">
var ButtonLink = ReactRouterBootstrap.ButtonLink;
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
var ActionTypes = {
CHANGE_TODO_LIST: "CHANGE_TODO_LIST",
DONE_TODO: "DONE_TODO"
};
var TodoStore = Fluxxor.createStore({
initialize: function() {
this.todos = [{
id: 'Buy some milk',
name: 'Buy some milk',
done: false
}];
console.log("koko");
console.log(this);
this.bindActions(
ActionTypes.CHANGE_TODO_LIST, this.onAddTodo,
ActionTypes.DONE_TODO, this.onDoneTodo
);
},
onAddTodo: function(payload) {
this.todos.push({id: payload.text, name: payload.text, complete: false});
this.emit("change");
},
onDoneTodo: function(payload) {
console.log("onDoneTodo");
console.log(this.todos);
payload.todo.done = true;
this.emit("change");
},
getState: function() {
return {
todos: this.todos
};
}
});
var Todo = React.createClass({
mixins: [FluxMixin],
onClick: function(e) {
e.preventDefault();
this.getFlux().actions.doneTodo(this.props.todo);
},
render: function() {
var todo = this.props.todo;
console.log(todo.name);
var button = (todo.done) ? "": <button onClick={this.onClick}>Done</button>;
return (<li>{todo.name} {button}</li>);
}
});
var TodoList = React.createClass({
mixins: [StoreWatchMixin("TodoStore"), FluxMixin],
getStateFromFlux: function() {
var flux = this.getFlux();
console.log(this);
return flux.store("TodoStore").getState();
},
render: function() {
var rows = this.state.todos.filter(function(todo) {
return !todo.done;
}).map(function(todo) {
return (<Todo key={todo.id} todo={todo}></Todo>);
});
return (
<div className="active-todos">
<h2>Active</h2>
<ul>{rows}</ul>
</div>
);
}
});
var TodoForm = React.createClass({
componentWillMount: function() {
console.log(this);
},
mixins: [React.addons.LinkedStateMixin, FluxMixin],
getInitialState: function() {
return {content: ''};
},
handleSubmit: function(e) {
e.preventDefault();
var name = this.state.content.trim();
if(name) {
// alert(name);
// this.props.onSubmitTodo(name);// to dispatch event
this.getFlux().actions.addTodo(name);
this.setState({ content: ""});
}
},
render: function() {
var valueLink = this.linkState('content');
var handleChange = function(e) {
valueLink.requestChange(e.target.value);
};
return (
<form onSubmit={this.handleSubmit}>
<input ref="todoName" type="text" value={valueLink.value} onChange={handleChange}></input><input type="submit"></input>
</form>
);
}
});
var TodoApp = React.createClass({
render: function() {
return (
<div>
<h1>My Todo</h1>
<TodoList/>
<TodoForm/>
</div>
);
}
});
var Users = React.createClass({
render: function() {
return (
<div>
<h1>Users</h1>
<ButtonLink to="/user/1">1</ButtonLink>
<ButtonLink to="/user/2">2</ButtonLink>
<ButtonLink to="/user/3">3</ButtonLink>
</div>
);
}
});
var UsersView = React.createClass({
render: function() {
return (
<div>
<RouteHandler />
</div>
);
}
});
var User = React.createClass({
mixins: [ReactRouter.State],
render: function() {
return (
<div>
<h1>User: {this.getParams().userId}</h1>
<ButtonLink to="list">back</ButtonLink>
</div>
);
}
});
var NotFound = React.createClass({
render: function() {
return (
<div>
<h1>ねーよ</h1>
</div>
);
}
});
var App = React.createClass({
mixins: [ FluxMixin ],
componentWillMount: function() {
console.log(this);
},
render: function() {
var flux = this.getFlux();
return (
<div>
<h1>title</h1>
<ButtonLink to="/">todo</ButtonLink><br/>
<ButtonLink to="list">users</ButtonLink>
<RouteHandler flux={flux} />
</div>
);
}
});
var Router = ReactRouter;
var Route = ReactRouter.Route;
var Routes = ReactRouter.Routes;
var Redirect = ReactRouter.Redirect;
var RouteHandler = ReactRouter.RouteHandler;
var routes = (
<Route handler={App} path="/">
<ReactRouter.DefaultRoute handler={TodoApp} />
<Route name="list" handler={Users} />
<Route name="users" handler={UsersView}>
<Route name="user" path="/user/:userId" handler={User} />
<ReactRouter.NotFoundRoute handler={NotFound}/>
</Route>
<ReactRouter.NotFoundRoute handler={NotFound}/>
<Redirect from="company" to="about" />
</Route>
);
var stores = {
TodoStore : new TodoStore()
};
var actions = {
addTodo: function(text) {
this.dispatch(ActionTypes.CHANGE_TODO_LIST, {text: text});
},
doneTodo: function(todo) {
this.dispatch(ActionTypes.DONE_TODO, {todo: todo});
}
};
var flux = new Fluxxor.Flux(stores, actions);
Router.run(routes, function (Handler) {
React.render(<Handler flux={flux} />, document.getElementById('appContainer'));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment