Building web app using react.js, express.js, node.js and mongodb
SchoolInfo.jsx
var React = require("react");
module.exports = React.createClass({
render:function(){
return(
<div className="panel panel-default">
<div className="panel-heading">
{this.props.info.name}
</div>
<div className="panel-body">
{this.props.info.tagline}
</div>
</div>
)
}
})
SchoolsList.jsx
var React = require("react");
var SchoolInfo = require("./SchoolInfo.jsx")
module.exports = React.createClass({
render:function(){
return(
<div className="row">
<div className="col-md-6">
</div>
<div className="col-md-6">
{
this.props.schools.map(function(s,index){
return(
<SchoolInfo info={s} key={"school"+index} />
)
})
}
</div>
</div>
)
}
});
main.jsx
var React = require("react");
var ReactDOM = require("react-dom");
var SchoolsList = require("./components/SchoolsList.jsx");
var_schools =[{name:"Lovedale",tagline:"this is a wonderful school"},
{name:"Bishop",tagline:"Another great school"}];
function render(){
ReactDOM.render(<SchoolsList schools={_schools} />, document.getElementById("container"));
}
render();
Creating a dispatcher
dispatcher.js
var Guid = require("guid");
var listeners = {};
function dispatch(payload) {
for (var id in listeners) {
listeners[id](payload);
}
}
function register(cb) {
var id = Guid.create();
listeners[id] = cb;
}
module.exports = {
register: register,
dispatch: dispatch
}
Creating Actions Helper
SchoolActions.js
var dispatcher = require("../dispatcher");
module.exports = {
addSchool:function(school){
dispatcher.dispatch({
school:school,
type:"school:addSchool"
});
},
deleteSchool:function(school){
dispatcher.dispatch({
school:school,
type:"school:deleteSchool"
});
}
}
Creating Store
schoolsStore.js
var dispatcher = require("../dispatcher");
function SchoolStore() {
var listeners = [];
var schools = [{ name: "Lovedale", tagline:"A wonderful school" },
{ name: "Bishop",tagline:"An awesome school" },
{ name: "Daffodils", tagline:"An excellent school" }];
function getSchools() {
return schools;
}
function onChange(listener) {
listeners.push(listener);
}
function addSchool(school) {
schools.push(school)
triggerListeners();
}
function deleteSchool(school) {
var _index;
schools.map(function (s, index) {
if (s.name === school.name) {
_index = index;
}
});
schools.splice(_index, 1);
triggerListeners();
}
function triggerListeners() {
listeners.forEach(function (listener) {
listener(schools);
});
}
dispatcher.register(function (payload) {
var split = payload.type.split(":");
if (split[0] === "school") {
switch (split[1]) {
case "addSchool":
addSchool(payload.school);
break;
case "deleteSchool":
deleteSchool(payload.school);
break;
}
}
});
return {
getSchools: getSchools,
onChange: onChange
}
}
module.exports = SchoolStore();
update "main.jsx" file
var React = require("react");
var ReactDOM = require("react-dom");
var SchoolsList = require("./components/SchoolsList.jsx");
var schoolsStore = require("./stores/schoolsStore");
var _schools = schoolsStore.getSchools();
schoolsStore.onChange(function(schools){
_schools = schools;
render();
});
function render(){
ReactDOM.render(<SchoolsList schools={_schools} />, document.getElementById("container"));
}
render();
Addind behavior to components
AddSchool.jsx
var React = require("react");
var actions = require("../actions/SchoolActions");
module.exports = React.createClass({
getInitialState:function(){
return {
name:"",
tagline:""
}
},
addSchool:function(e){
e.preventDefault();
actions.addSchool(this.state);
},
handleInputChange:function(e){
e.preventDefault();
var name = e.target.name;
var state = this.state;
state[name] = e.target.value;
this.setState(state);
},
render:function(){
return(
<form className="form" onSubmit={this.addSchool}>
<div className="form-group">
<label className="control-label" htmlFor="name">School Name:</label>
<input type="text" className="form-control" id="name" name="name" value={this.state.name} onChange={this.handleInputChange} placeholder="School Name" />
</div>
<div className="form-group">
<label className="control-label" htmlFor="tagline">Tagline:</label>
<input type="text" className="form-control" id="tagline" name="tagline" value={this.state.address} onChange={this.handleInputChange} placeholder="Tagline" />
</div>
<div className="form-group">
<button className="btn" type="submit">Add School</button>
</div>
</form>
)
}
})
FLUX flow
update the "SchoolsList.jsx"
var React = require("react");
var SchoolInfo = require("./SchoolInfo.jsx")
var AddSchool = require("./AddSchool.jsx");
module.exports = React.createClass({
render:function(){
return(
<div className="row">
<div className="col-md-6">
<AddSchool />
</div>
<div className="col-md-6">
{
this.props.schools.map(function(s,index){
return(
<SchoolInfo info={s} key={"school"+index} />
)
})
}
</div>
</div>
)
}
});
update the "SchoolInfo.jsx
var React = require("react");
var actions = require("../actions/SchoolActions");
module.exports = React.createClass({
deleteSchool: function(e){
e.preventDefault();
actions.deleteSchool(this.props.info);
},
render:function(){
return(
<div className="panel panel-default">
<div className="panel-heading">
{this.props.info.name}
<span className="pull-right text-uppercase delete-button" onClick={this.deleteSchool}>×</span>
</div>
<div className="panel-body">{this.props.info.tagline}</div>
</div>
)
}
})
