14 July 2015 – Building a React.JS App – Part 6 – Everydays

Part 6: Managing State with Child Components

Profile.js

var React = require('react');
var Router = require('react-router');

var Repos = require('./Github/Repos.js');
var UserProfile = require('./Github/UserProfile.js');
var Notes = require('./Notes/Notes.js');

var ReactFireMixin = require('reactfire');
var Firebase = require('firebase');

var Profile = React.createClass({
	
	mixins: [Router.State, ReactFireMixin], // Allows to query the route parameter and to get the specific username, also allows communication of react fire with firebase and the profile component
	getInitialState: function () {
		return {
			notes: ['noe1', 'note2'],
			bio: {name: 'Smilyan'},
			repos: [1,2,3]
		}
	},
	componentDidMount: function () { // Where all AJAX requests will live
		this.ref = new Firebase('https://react-git-profiler.firebaseio.com');
		var childRef = this.ref.child(this.getParams().username);
		this.bindAsArray(childRef, 'notes'); // .bindAsArray is added as a property when we inserted "ReactFireMixin" into the mixins: array above 
	},
	componentWillUnmount: function () { // So that we don't get listeners keep adding, we will unmount them
		this.unbind('notes');
	},
	handleAddNote: function (newNote) { // Make the function in the component where it will be evoked
		this.ref.child(this.getParams().username).set(this.state.notes.concat([newNote]));  // Get current profile and replace the data at the selected endpoint with the value in .set()
																																												// in .set() we get the previous values in an array and output a new array with newNote added
	},
	render: function () {
		var username = this.getParams().username; // "username" is what we use in the route URL in routes.js
		return (
			<div className="row">
				<div className="col-md-4">
					<UserProfile username={username} bio={this.state.bio} />
				</div>
				<div className="col-md-4">
					<Repos username={username} repos={this.state.repos} />
				</div>
				<div className="col-md-4">
					<Notes
								username={username}
								notes={this.state.notes}
								addNote={this.handleAddNote}
								/>
				</div>
			</div>
		)
	}
});

module.exports = Profile;

var React = require('react');

var Router = require('react-router');

var Repos = require('./Github/Repos.js');

var UserProfile = require('./Github/UserProfile.js');

var Notes = require('./Notes/Notes.js');

var ReactFireMixin = require('reactfire');

var Firebase = require('firebase');

var Profile = React.createClass({

mixins: [Router.State, ReactFireMixin], // Allows to query the route parameter and to get the specific username, also allows communication of react fire with firebase and the profile component

getInitialState: function () {

return {

notes: ['noe1', 'note2'],

bio: {name: 'Smilyan'},

repos: [1,2,3]

}

componentDidMount: function () { // Where all AJAX requests will live

this.ref = new Firebase('https://react-git-profiler.firebaseio.com');

var childRef = this.ref.child(this.getParams().username);

this.bindAsArray(childRef, 'notes'); // .bindAsArray is added as a property when we inserted "ReactFireMixin" into the mixins: array above

componentWillUnmount: function () { // So that we don't get listeners keep adding, we will unmount them

this.unbind('notes');

handleAddNote: function (newNote) { // Make the function in the component where it will be evoked

this.ref.child(this.getParams().username).set(this.state.notes.concat([newNote])); // Get current profile and replace the data at the selected endpoint with the value in .set()

// in .set() we get the previous values in an array and output a new array with newNote added

render: function () {

var username = this.getParams().username; // "username" is what we use in the route URL in routes.js

return (

</div>

</div>

<Notes

username={username}

notes={this.state.notes}

addNote={this.handleAddNote}

</div>

)

}

});

module.exports = Profile;

Notes.js

var React = require('react');
var NotesList = require('./NotesList');
var AddNote = require('./AddNote');

var Notes = React.createClass({
	propTypes: {
		username: React.PropTypes.string.isRequired,
		notes: React.PropTypes.array.isRequired,
		addNote: React.PropTypes.func.isRequired
	},
	render: function () {
		return (
			<div>
				<h3>Notes for {this.props.username}</h3>
				<AddNote username={this.props.username} addNote={this.props.addNote} />
				<NotesList notes={this.props.notes} /> 
			</div>
		)
	}
});

module.exports = Notes;

var React = require('react');

var NotesList = require('./NotesList');

var AddNote = require('./AddNote');

var Notes = React.createClass({

propTypes: {

username: React.PropTypes.string.isRequired,

notes: React.PropTypes.array.isRequired,

addNote: React.PropTypes.func.isRequired

render: function () {

return (

<div>

<h3>Notes for {this.props.username}</h3>

</div>

)

}

});

module.exports = Notes;

NotesList.js

var React = require('react');

var NotesList = React.createClass({
	render: function () {
		var notes = this.props.notes.map(function (note, index) {
			return <li className="list-group-item" key={index}>{note}</li>
		});
		
		return (
			<ul className="list-group">
				{notes}
			</ul>
		)
	}
});

module.exports = NotesList;

var React = require('react');

var NotesList = React.createClass({

render: function () {

var notes = this.props.notes.map(function (note, index) {

return <li className="list-group-item" key={index}>{note}</li>

});

return (

{notes}

</ul>

)

}

});

module.exports = NotesList;

AddNote.js

var React = require('react');

var AddNote = React.createClass({
	propTypes: {
		username: React.PropTypes.string.isRequired,
		addNote: React.PropTypes.func.isRequired
	},
	handleSubmit: function () {
		var newNote = this.refs.note.getDOMNode().value;  // This is getting the value from the input below with a ref="note"
		this.refs.note.getDOMNode().value = '';
		this.props.addNote(newNote);
	},
	render: function () {
		return (
			<div className="input-group">
				<input type="text" className="form-control" ref="note" placeholder="Add New Note" />
				<span className="input-group-btn">
					<button type="submit" className="btn btn-default" onClick={this.handleSubmit}>Add Note</button>
				</span>
			</div>
		)
	}
});

module.exports = AddNote;

var React = require('react');

var AddNote = React.createClass({

propTypes: {

username: React.PropTypes.string.isRequired,

addNote: React.PropTypes.func.isRequired

handleSubmit: function () {

var newNote = this.refs.note.getDOMNode().value; // This is getting the value from the input below with a ref="note"

this.refs.note.getDOMNode().value = '';

this.props.addNote(newNote);

render: function () {

return (

</span>

</div>

)

}

});

module.exports = AddNote;

13 July 2015 – Building a React.JS App – Part 5 – Everydays

Part 5: Using ReactFire to Add Data Persistence (Firebase)

Notes.js

var React = require('react');
var NotesList = require('./NotestList');

var Notes = React.createClass({
	propTypes: {
		username: React.PropTypes.string.isRequired,
		notes: React.PropTypes.array.isRequired
	},
	render: function () {
		return (
			<div>
				<h3>Notes for {this.props.username}</h3>
				<NotesList notes={this.props.notes} /> 
			</div>
		)
	}
});

module.exports = Notes;

var React = require('react');

var NotesList = require('./NotestList');

var Notes = React.createClass({

propTypes: {

username: React.PropTypes.string.isRequired,

notes: React.PropTypes.array.isRequired

render: function () {

return (

<div>

<h3>Notes for {this.props.username}</h3>

</div>

)

}

});

module.exports = Notes;

NotesList.js

var React = require('react');

var NotesList = React.createClass({
	render: function () {
		var notes = this.props.notes.map(function (note, index) {
			  return <li className="list-group-item" key={index}>{note}</li>
		});
		
		return (
						<ul className="list-group">
							{notes}
						</ul>
		)
	}
});

module.exports = NotesList;

var React = require('react');

var NotesList = React.createClass({

render: function () {

var notes = this.props.notes.map(function (note, index) {

return <li className="list-group-item" key={index}>{note}</li>

});

return (

{notes}

</ul>

)

}

});

module.exports = NotesList;

10 July 2015 – Building a React.JS App – Part 4 – Everydays

Part 4: Component Validation with PropTypes

Learned:

How to validate the props (data) passed to the components and child components using PropTypes

Repos.js

var React = require('react');

var Repos = React.createClass({
	// Validate that the component is receiving the required props (data)
	propTypes: {
		username: React.PropTypes.string.isRequired,
		repos: React.PropTypes.array.isRequired
	},
	render: function () {
		return (
			<div>
				Repos <br />
				Username: {this.props.username} <br />
				REPOS: {this.props.repos}
			</div>
		)
	}
});

module.exports = Repos;

var React = require('react');

var Repos = React.createClass({

// Validate that the component is receiving the required props (data)

propTypes: {

username: React.PropTypes.string.isRequired,

repos: React.PropTypes.array.isRequired

render: function () {

return (

<div>

Repos <br />

Username: {this.props.username} <br />

REPOS: {this.props.repos}

</div>

)

}

});

module.exports = Repos;

UserProfile.js

var React = require('react');

var UserProfile = React.createClass({
	propTypes: {
		username: React.PropTypes.string.isRequired,
		bio: React.PropTypes.object.isRequired
	},
	render: function () {
		return (
			// Each component can have it's own state, but when it receives it's
			// state from the parent component this is called props
			
			// These are the names of the props, because in the main component Profile.js
			// We have passed them as such: <UserProfile username={username} bio={this.state.bio} />
			<div>
				User Profile <br />
				Username: {this.props.username} <br />
				Bio: {this.props.bio}
			</div>
		)
	}
});

module.exports = UserProfile;

var React = require('react');

var UserProfile = React.createClass({

propTypes: {

username: React.PropTypes.string.isRequired,

bio: React.PropTypes.object.isRequired

render: function () {

return (

// Each component can have it's own state, but when it receives it's

// state from the parent component this is called props

// These are the names of the props, because in the main component Profile.js

// We have passed them as such: <UserProfile username={username} bio={this.state.bio} />

<div>

User Profile <br />

Username: {this.props.username} <br />

Bio: {this.props.bio}

</div>

)

}

});

module.exports = UserProfile;

Notes.js

var React = require('react');

var Notes = React.createClass({
	propTypes: {
		username: React.PropTypes.string.isRequired,
		notes: React.PropTypes.array.isRequired
	},
	render: function () {
		return (
			<div>
				Notes <br />
				Username: {this.props.username} <br />
				NOTES: {this.props.notes}
			</div>
		)
	}
});

module.exports = Notes;

var React = require('react');

var Notes = React.createClass({

propTypes: {

username: React.PropTypes.string.isRequired,

notes: React.PropTypes.array.isRequired

render: function () {

return (

<div>

Notes <br />

Username: {this.props.username} <br />

NOTES: {this.props.notes}

</div>

)

}

});

module.exports = Notes;

9 July 2015 – Building a React.JS App – Part 3 – Everydays

Part 3 – Sate, Props and Thinking in React

Learning about:

How the child and parent components communicate and how you pass data between them;
How to pass data to the parent component;
Strengthening the understanding of defining components and integrating them together within the app;
Extending the router to receive variables and pass them within the components.

routes.js

var React = require('react');
var Main = require('../components/Main');
var Home = require('../components/Home');
var Profile = require('../components/Profile');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;

// Instructions for the router, to know which component is active based on the current path

module.exports = (
	<Route name="app" path="/" handler={Main}>
		<Route name="profile" path="profile/:username" handler={Profile} />
		<DefaultRoute handler={Home} />
	</Route>
);

var React = require('react');

var Main = require('../components/Main');

var Home = require('../components/Home');

var Profile = require('../components/Profile');

var Router = require('react-router');

var DefaultRoute = Router.DefaultRoute;

var Route = Router.Route;

// Instructions for the router, to know which component is active based on the current path

module.exports = (

</Route>

);

Profile.js

var React = require('react');
var Router = require('react-router');

var Repos = require('./Github/Repos.js');
var UserProfile = require('./Github/UserProfile.js');
var Notes = require('./Notes/Notes.js');

var Profile = React.createClass({
	
	mixins: [Router.State], // Allows to query the route parameter and to get the specific username
	getInitialState: function () {
		return {
			notes: ['noe1', 'note2'],
			bio: {name: 'Smilyan'},
			repos: [1,2,3]
		}
	},
	render: function () {
		var username = this.getParams().username; // "username" is what we use in the route URL in routes.js
		return (
			<div className="row">
				<div className="col-md-4">
					<UserProfile username={username} bio={this.state.bio} />
				</div>
				<div className="col-md-4">
					<Repos username={username} repos={this.state.repos} />
				</div>
				<div className="col-md-4">
					<Notes username={username} notes={this.state.notes} />
				</div>
			</div>
		)
	}
});

module.exports = Profile;

var React = require('react');

var Router = require('react-router');

var Repos = require('./Github/Repos.js');

var UserProfile = require('./Github/UserProfile.js');

var Notes = require('./Notes/Notes.js');

var Profile = React.createClass({

mixins: [Router.State], // Allows to query the route parameter and to get the specific username

getInitialState: function () {

return {

notes: ['noe1', 'note2'],

bio: {name: 'Smilyan'},

repos: [1,2,3]

}

render: function () {

var username = this.getParams().username; // "username" is what we use in the route URL in routes.js

return (

</div>

</div>

</div>

)

}

});

module.exports = Profile;

Repos.js

var React = require('react');

var Repos = React.createClass({
	render: function () {
		return (
			<div>
				Repos <br />
				Username: {this.props.username} <br />
				REPOS: {this.props.repos}
			</div>
		)
	}
});

module.exports = Repos;

var React = require('react');

var Repos = React.createClass({

render: function () {

return (

<div>

Repos <br />

Username: {this.props.username} <br />

REPOS: {this.props.repos}

</div>

)

}

});

module.exports = Repos;

UserProfile.js

var React = require('react');

var UserProfile = React.createClass({
	render: function () {
		return (
			// Each component can have it's own state, but when it receives it's
			// state from the parent component this is called props
			
			// These are the names of the props, because in the main component Profile.js
			// We have passed them as such: <UserProfile username={username} bio={this.state.bio} />
			<div>
				User Profile <br />
				Username: {this.props.username} <br />
				Bio: {this.props.bio}
			</div>
		)
	}
});

module.exports = UserProfile;

var React = require('react');

var UserProfile = React.createClass({

render: function () {

return (

// Each component can have it's own state, but when it receives it's

// state from the parent component this is called props

// These are the names of the props, because in the main component Profile.js

// We have passed them as such: <UserProfile username={username} bio={this.state.bio} />

<div>

User Profile <br />

Username: {this.props.username} <br />

Bio: {this.props.bio}

</div>

)

}

});

module.exports = UserProfile;

Notes.js

var React = require('react');

var Notes = React.createClass({
	render: function () {
		return (
			<div>
				Notes <br />
				Username: {this.props.username} <br />
				NOTES: {this.props.notes}
			</div>
		)
	}
});

module.exports = Notes;

var React = require('react');

var Notes = React.createClass({

render: function () {

return (

<div>

Notes <br />

Username: {this.props.username} <br />

NOTES: {this.props.notes}

</div>

)

}

});

module.exports = Notes;

8 July 2015 – Building a React.JS App – Part 2 – Everydays

Part 2: Building a ReactJS App – Basic Routing with React Router

app.js

var React = require('react');
var Router = require('react-router');
var routes = require('./config/routes');

// This file will be in charge of the render methods

Router.run(routes, function (Root) {
// Similar to what we did initially in Main.js, but instead the component is replaced dynamically and rendered here;
	React.render(<Root />, document.getElementById('app'));
});

var React = require('react');

var Router = require('react-router');

var routes = require('./config/routes');

// This file will be in charge of the render methods

Router.run(routes, function (Root) {

// Similar to what we did initially in Main.js, but instead the component is replaced dynamically and rendered here;

React.render(<Root />, document.getElementById('app'));

});

routes.js

var React = require('react');
var Main = require('../components/Main');
var Home = require('../components/Home');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;

// Instructions for the router, to know which component is active based on the current path

module.exports = (
	<Route name="app" path="/" handler={Main}>
		<DefaultRoute handler={Home} />
	</Route>
);

var React = require('react');

var Main = require('../components/Main');

var Home = require('../components/Home');

var Router = require('react-router');

var DefaultRoute = Router.DefaultRoute;

var Route = Router.Route;

// Instructions for the router, to know which component is active based on the current path

module.exports = (

</Route>

);

webpack.config.js

module.exports = {
	entry: "./app/app.js",
	output: {
		path: "./public/",
		filename: "bundle.js"
	},
	module: {
		loaders: [
			{
				test: /\.jsx?$/,
				exclude: /(node_modules|bower_components)/,
				loader: 'babel'
			}
		]
	}
};

module.exports = {

entry: "./app/app.js",

output: {

path: "./public/",

filename: "bundle.js"

module: {

loaders: [

{

test: /\.jsx?$/,

exclude: /(node_modules|bower_components)/,

loader: 'babel'

}

]

}

};

Main.js

var React = require('react');
var RouteHandler = require('react-router').RouteHandler;

var Main = React.createClass({
	render: function () {
		return (
			<div className="main-container">
				<nav className="navbar navbar-default" role="navigation">
					<div className="col-sm-7 col-sm-offset-2" style={{marginTop: 15}}>
						Menu
					</div>
				</nav>
				<div className="container">
					<RouteHandler />
				</div>
			</div>
		)
	}
});

// We don't want this file to decide when to render this component,
// so we are removing it
//React.render(<Main />, document.getElementById('app'));

// Instead we are going to expert the compontent, so that whenever you
// do require('Main') it will render the compontent above.
module.exports = Main;

var React = require('react');

var RouteHandler = require('react-router').RouteHandler;

var Main = React.createClass({

render: function () {

return (

</div>

</nav>

</div>

)

}

});

// We don't want this file to decide when to render this component,

// so we are removing it

//React.render(<Main />, document.getElementById('app'));

// Instead we are going to expert the compontent, so that whenever you

// do require('Main') it will render the compontent above.

module.exports = Main;

Home.js

var React = require('react');

var Home = react.createClass({
	render: function () {
		return (
			<h2 className="text-center">
				Search by Github Username Above
			</h2>
		)
	}
});

module.exports = Home;

var React = require('react');

var Home = react.createClass({

render: function () {

return (

Search by Github Username Above

</h2>

)

}

});

module.exports = Home;

7 July 2015 – Building a React.JS App – Part 1 – Everydays

Doing another React.JS app for my “Everydays”.

Up and Running with React and Webpack

Main.js

var React = require('react');

var Main = React.createClass({
	render: function () {
		return (
			<div>
				Hello World
			</div>
		)
	}
});

React.render(<Main />, document.getElementById('app'));

var React = require('react');

var Main = React.createClass({

render: function () {

return (

<div>

Hello World

</div>

)

}

});

React.render(<Main />, document.getElementById('app'));

webpack.config.js

module.exports = {
	entry: "./app/components/Main.js",
	output: {
		path: "./public/",
		filename: "bundle.js"
	},
	module: {
		loaders: [
			{
				test: /\.jsx?$/,
				exclude: /(node_modules|bower_components)/,
				loader: 'babel'
			}
		]
	}
};

module.exports = {

entry: "./app/components/Main.js",

output: {

path: "./public/",

filename: "bundle.js"

module: {

loaders: [

{

test: /\.jsx?$/,

exclude: /(node_modules|bower_components)/,

loader: 'babel'

}

]

}

};

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>React Github Notetaker</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
	<div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>React Github Notetaker</title>

</head>

<body>

</body>

</html>

6 July 2015 – Building a ReactJS Todo App – Part 2 – Everydays

This is continues from Building a ReactJS Todo App – Part 1. Today the lesson is completed.

For more information on it, check Chris Harrington’s lesson on Codementor.

"use strict";

var Todo = React.createClass({
	getInitialState: function () {
		return {
			todos: []
		}
	},
	
	componentWillMount: function () {
		emitter.on(constants.changed, function(todos) {
			thi.setState({ todos: todos });
		}.bind(this));
	},
	
	componentDidMount: function () {
		dispatcher.dispatch({ type: constants.all });
	},
	
	componentsWillUnmount: function () {
		emitter.off(constants.all);
	},
	
	create: function () {
		this.refs.create.show();
	},
	
	renderList: function(complete) {
		return <List todos={_filter(this.state.todos, function (x) { return x.isComplete === complete;})} />;
	},
	
	render: function () {
		return <div className="container">
			<div className="row">
				<div className="col-md-8">
					<h1>Todo List</h1>
				</div>
				<div className="col-md-4">
					<button type="button" className="btn btn-primary pull-right spacing-top" onClick={this.create}>New Task</button>
				</div>
			</div>
			
			<div className="row">
				<div className="col-md-6">
					<h2 className="spacing-bottom">Incomplete</h2>
					{this.renderList(false)}
				</div>
				<div className="col-md-6">
					<h2 className="spacing-bottom">Complete</h2>
					{this.renderlist(true)}
				</div>
			</div>
			
			<Modal ref="create" />
		</div>;
	}
});

// Rendering the list - both complete and incomplete
// It uses the Item object to render each list item
var List = React.createClass({
	renderItems: function () {
		return _.map(this.props.todos, function(todo) {
			return <Item todo={todo} />;
		});
	},
	
	render: function () {
		return <ul className="list-group">
			{this.renderItems()}
		</ul>;
	}
});

// Rendering the item int he list
// Updating the status of an item when clicked
var Item = React.createClass({
	toggle: function () {
		this.props.todo.isComplete = !this.props.todo.isComplete;
		dispatcher.dispatch({ type: constants.update, content: this.props.todo });
	},
	
	render: function () {
		return <li className="list-group-item pointer" onClick={this.toggle}>{this.props.todo.name}</li>;
	}
});


var Modal = React.createClass({
	getInitialState: function () {
		return {
			value: ""
		}
	},
	
	componentDidMount: function () {
		this.$el = $(this.getDOMNode());
		this.$el.on("hidden.bs.modal", this.reset);
		
		emitter.on(constants.changed, function () {
			this.$el.modal("hide");
		}.bind(this));
	},
	
	componentWillUnmount: function () {
		emitter.off(constants.changed);
	},
	
	show: function () {
		this.$el.modal("show");
	},
	
	reset: function () {
		this.setstate({ value: "" });
	},
	
	save: function () {
		dispatcher.dispatch({ type: constants.create, content: {name: this.state.value, isComplete: false }});
	},
	
	onChange: function (e) {
		this.setState({ value: e.target.value });
	},
	
	render: function () {
		return <div className="modal fade" tabIndex="-1" role="dialog" aria-hidden="true">
			<div className="modal-dialog modal-sm">
				<div className="modal-content">
					<div className="modal-header">
						<button type="button" className="close" data-dismiss="modal">
							<span aria-hidden="true">x</span>
							<span className="sr-only">Close</span>
						</button>
						<h2 className="modal-title">New Task</h2>
					</div>
					<div className="modal-body">
						<input placeholder="Task name..." type="text" value={this.state.value} onChange={this.onChange} />
					</div>
					<div className="modal-footer">
						<div className="row">
							<div className="col col-md-12">
								<button type="button" className="btn btn-primary pull-right" onClick={this.save}>Save</button>
								<button type="button" className="btn btn-default pull-right spacing-right" onClick={this.reset} data-dismiss="modal">Close</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>;
	}
});


// Store used to keep track of changes on the to do list
var Store = function (url, constants) {
	this._url = url;
	this._collection = [];
	
	dispatcher.register(function (payload) {
		switch (payload.type) {
			case constants.all:
				this_all();
				break;
			
			case constants.update:
				this_update(payload.content);
				break;
				
			case constants.create:
				this_create(payload.content);
				break;
		}
	}.bind(this));
	
	this._all = function () {
		$.get(this._url).then(function (data) {
			this._collection = data;
			_notify.call(this);
		}.bind(this));
	}.bind(this);
	
	this.update = function (content) {
		var found = _.find(this._collection, function (x) { return x.id === content.id; });
		for (var name in found)
			found[name] = content[name];
		$.post(this._url, found).then(function () {
			_notify.call(this);
		}.bind(this));
	};
	
	this._create = function (content) {
		content.id = _.max(this._collection, function (x) { return x.id; }).id + 1;
		this._collection.push(content);
		$.post(this._url + "/" + content.id).then(function () {
			_notify.call(this);
		});
	}
	
	function _notify() {
		emitter.emit(constants.changed, this._collection);
	}
};

var TodoStore = new Store("fixtures/todos.json", require("constants").todo);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

"use strict";

var Todo = React.createClass({

getInitialState: function () {

return {

todos: []

}

componentWillMount: function () {

emitter.on(constants.changed, function(todos) {

thi.setState({ todos: todos });

}.bind(this));

componentDidMount: function () {

dispatcher.dispatch({ type: constants.all });

componentsWillUnmount: function () {

emitter.off(constants.all);

create: function () {

this.refs.create.show();

renderList: function(complete) {

return <List todos={_filter(this.state.todos, function (x) { return x.isComplete === complete;})} />;

render: function () {

return <div className="container">

</div>

</div>

<h2 className="spacing-bottom">Incomplete</h2>

{this.renderList(false)}

</div>

<h2 className="spacing-bottom">Complete</h2>

{this.renderlist(true)}

</div>

</div>;

}

});

// Rendering the list - both complete and incomplete

// It uses the Item object to render each list item

var List = React.createClass({

renderItems: function () {

return _.map(this.props.todos, function(todo) {

return <Item todo={todo} />;

});

render: function () {

return <ul className="list-group">

{this.renderItems()}

</ul>;

}

});

// Rendering the item int he list

// Updating the status of an item when clicked

var Item = React.createClass({

toggle: function () {

this.props.todo.isComplete = !this.props.todo.isComplete;

dispatcher.dispatch({ type: constants.update, content: this.props.todo });

render: function () {

return <li className="list-group-item pointer" onClick={this.toggle}>{this.props.todo.name}</li>;

}

});

var Modal = React.createClass({

getInitialState: function () {

return {

value: ""

}

componentDidMount: function () {

this.$el = $(this.getDOMNode());

this.$el.on("hidden.bs.modal", this.reset);

emitter.on(constants.changed, function () {

this.$el.modal("hide");

}.bind(this));

componentWillUnmount: function () {

emitter.off(constants.changed);

show: function () {

this.$el.modal("show");

reset: function () {

this.setstate({ value: "" });

save: function () {

dispatcher.dispatch({ type: constants.create, content: {name: this.state.value, isComplete: false }});

onChange: function (e) {

this.setState({ value: e.target.value });

render: function () {

return <div className="modal fade" tabIndex="-1" role="dialog" aria-hidden="true">

<span className="sr-only">Close</span>

</button>

</div>

</div>

<button type="button" className="btn btn-default pull-right spacing-right" onClick={this.reset} data-dismiss="modal">Close</button>

</div>

</div>;

}

});

// Store used to keep track of changes on the to do list

var Store = function (url, constants) {

this._url = url;

this._collection = [];

dispatcher.register(function (payload) {

switch (payload.type) {

case constants.all:

this_all();

break;

case constants.update:

this_update(payload.content);

break;

case constants.create:

this_create(payload.content);

break;

}

}.bind(this));

this._all = function () {

$.get(this._url).then(function (data) {

this._collection = data;

_notify.call(this);

}.bind(this));

}.bind(this);

this.update = function (content) {

var found = _.find(this._collection, function (x) { return x.id === content.id; });

for (var name in found)

found[name] = content[name];

$.post(this._url, found).then(function () {

_notify.call(this);

}.bind(this));

};

this._create = function (content) {

content.id = _.max(this._collection, function (x) { return x.id; }).id + 1;

this._collection.push(content);

$.post(this._url + "/" + content.id).then(function () {

_notify.call(this);

});

}

function _notify() {

emitter.emit(constants.changed, this._collection);

}

};

var TodoStore = new Store("fixtures/todos.json", require("constants").todo);

5 July 2015 – Building a ReactJS ToDo App – Part 1 – Everydays

This is part one – Understanding how ReactJS works and how Flux integrates with it. This is the tutorial on codementor.io that I am following.

// =======================================================
// REACT JS
// =======================================================


// BASIC REACT CLASS
var HelloWorld = React.createClass({
	render: function () {
		return <div>Hello, world!</div>;
	}
});

React.render(new HelloWorld(), document.body);


// PROPS - PASSING DATA
var HelloWorld = React.createClass({
	render: function () {
		return <div>Hello, {this.prop.name}!</div>;
	}
});

React.render(new HelloWorld({name: "Smilyan Pavlov"}), document.body);


// STATE - KEEP TRACK OF INTERNAL CHANGES TO THE VIEW
// Any changes to state will trigger a re-render of the view
// YOU MUST CALL setState method - without it changes won't be reflected in the view
var HelloWorld = React.createClass({
	getInitialState: function () {
		return {
			counter: 0
		}
	},
	
	increment: function () {
		this.setState({ counter: this.state.counter+1 });
	},
	
	render: function () {
		return <div>
				<div>{this.state.counter}</div>
				<button onClick={this.increment}>Increment!</button>
			</div>
	}
});

React.render(new HelloWorld(), document.body);


// NESTED VIEWS - RENDER REACT CLASSES FROM WITHIN OTHER REACT CLASSES
// Props can be assigned via nested classes:
var FancyButton = React.createClass({
	render: function () {
		return <button onClick={this.props.onClick}>
			<i className={"fa "+this.props.icon}></i>
			<span>{this.props.text}</span>
			</button>	
	}
});

var HelloWorld = React.createClass({
	getInitialState: function () {
		return {
			counter: 0
		};
	},
	
	increment: function () {
		this.setState({ counter: this.state.counter++ });
	},
	
	render: function () {
		return <div>
					<div>{this.state.counter}</div>
					<FancyButton text="Increment!" icon="fa-arrow-circle-o-up" onClick={this.increment} />
				</div>;
	}
});


// =======================================================
// FLUX
// =======================================================
// The Flux architecture is what Facebook recommends to use as a workflow
// for retrieving data on the client side from a store of some sort on a
// remote server. It’s a unidirectional data flow.

// View - responsible for handling an action by a user
// Dispatcher - 1) Registering callbacks after a dispatch.
// 2) Dispatching actions to be fullfilled.
// Store - 1) Waking up on a relevant dispatch to retrieve the requested data.
// 2) Notifying listeneres of a change in the store's data after a retrieval, update or create operation.
// Event Emitter - Responsible for notifying subscribers after a store has completed any data action.

// Example:
var Count = React.createClass({
	getInitialState: function () {
		return {
			items: []
		}
	},
	
	componentWillMount: function () {
		emitter.on("store-changed", function(items) {
			this.setState({ items: items });
		}.bind(this));
	},
	
	
	componentDidMount: function () {
		dispatcher.displatch({ type: "get-all-items" });
	},
	
	
	render: function () {
		var items = this.state.items;
		return <div>{items.length}</div>;
	}
});


var Store = function () {
	dispatcher.register(function(payload) {
		switch (payload.type) {
			case: "get-all-items":
				this._all();
				break;
		}
	}.bind(this));
	
	this._all = function () {
		$.get("/some/url", function (items) {
			this._notify(items);
		}.bind(this));
	}
	
	this._notify = function (items) {
		emitter.emit("store-changed", items);
	});
}

var ItemStore = new Store();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

// =======================================================

// REACT JS

// =======================================================

// BASIC REACT CLASS

var HelloWorld = React.createClass({

render: function () {

return <div>Hello, world!</div>;

}

});

React.render(new HelloWorld(), document.body);

// PROPS - PASSING DATA

var HelloWorld = React.createClass({

render: function () {

return <div>Hello, {this.prop.name}!</div>;

}

});

React.render(new HelloWorld({name: "Smilyan Pavlov"}), document.body);

// STATE - KEEP TRACK OF INTERNAL CHANGES TO THE VIEW

// Any changes to state will trigger a re-render of the view

// YOU MUST CALL setState method - without it changes won't be reflected in the view

var HelloWorld = React.createClass({

getInitialState: function () {

return {

counter: 0

}

increment: function () {

this.setState({ counter: this.state.counter+1 });

render: function () {

return <div>

<div>{this.state.counter}</div>

<button onClick={this.increment}>Increment!</button>

</div>

}

});

React.render(new HelloWorld(), document.body);

// NESTED VIEWS - RENDER REACT CLASSES FROM WITHIN OTHER REACT CLASSES

// Props can be assigned via nested classes:

var FancyButton = React.createClass({

render: function () {

return <button onClick={this.props.onClick}>

<span>{this.props.text}</span>

</button>

}

});

var HelloWorld = React.createClass({

getInitialState: function () {

return {

counter: 0

};

increment: function () {

this.setState({ counter: this.state.counter++ });

render: function () {

return <div>

<div>{this.state.counter}</div>

</div>;

}

});

// =======================================================

// FLUX

// =======================================================

// The Flux architecture is what Facebook recommends to use as a workflow

// for retrieving data on the client side from a store of some sort on a

// remote server. It’s a unidirectional data flow.

// View - responsible for handling an action by a user

// Dispatcher - 1) Registering callbacks after a dispatch.

// 2) Dispatching actions to be fullfilled.

// Store - 1) Waking up on a relevant dispatch to retrieve the requested data.

// 2) Notifying listeneres of a change in the store's data after a retrieval, update or create operation.

// Event Emitter - Responsible for notifying subscribers after a store has completed any data action.

// Example:

var Count = React.createClass({

getInitialState: function () {

return {

items: []

}

componentWillMount: function () {

emitter.on("store-changed", function(items) {

this.setState({ items: items });

}.bind(this));

componentDidMount: function () {

dispatcher.displatch({ type: "get-all-items" });

render: function () {

var items = this.state.items;

return <div>{items.length}</div>;

}

});

var Store = function () {

dispatcher.register(function(payload) {

switch (payload.type) {

case: "get-all-items":

this._all();

break;

}

}.bind(this));

this._all = function () {

$.get("/some/url", function (items) {

this._notify(items);

}.bind(this));

}

this._notify = function (items) {

emitter.emit("store-changed", items);

});

}

var ItemStore = new Store();

4 July 2015 – Git, GitHub, React JS Boilerplate – Everydays

Today I installed Git and linked my account on GitHub. Also installed the React JS Boilerplate by Christian Alfoni.

My new GitHub setup

3 July 2015 – Getting started with gulp [code] – Everydays

I’ve decided to move the “Everydays” a bit to code. Today I learned about gulp and set it up. This is the tutorial I followed.

// Include gulp
var gulp = require('gulp');

// Include Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-contact');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function () {
	return gulp.src('js/*.js')
		.pipe(jshint())
		.pipe(jshint.reporter('default'));
});

// Compile Sass
gulp.task('sass', function () {
	return gulp.src('scss/*.scss')
		.pipe(sass())
		.pipe(gulp.dest('css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function () {
	return gulp.src('js/*js')
		.pipe(concat('all.js'))
		.pipe(gulp.dest('dist'))
		.pipe(rename('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('dist'));	
});

// Watch files for changes
gulp.task('watch', function () {
	gulp.watch('js/*.js', ['lint', 'scripts']);
	gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

// Include gulp

var gulp = require('gulp');

// Include Plugins

var jshint = require('gulp-jshint');

var sass = require('gulp-sass');

var concat = require('gulp-contact');

var uglify = require('gulp-uglify');

var rename = require('gulp-rename');

// Lint Task

gulp.task('lint', function () {

return gulp.src('js/*.js')

.pipe(jshint())

.pipe(jshint.reporter('default'));

});

// Compile Sass

gulp.task('sass', function () {

return gulp.src('scss/*.scss')

.pipe(sass())

.pipe(gulp.dest('css'));

});

// Concatenate & Minify JS

gulp.task('scripts', function () {

return gulp.src('js/*js')

.pipe(concat('all.js'))

.pipe(gulp.dest('dist'))

.pipe(rename('all.min.js'))

.pipe(uglify())

.pipe(gulp.dest('dist'));

});

// Watch files for changes

gulp.task('watch', function () {

gulp.watch('js/*.js', ['lint', 'scripts']);

gulp.watch('scss/*.scss', ['sass']);

});

// Default Task

gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

Smilyan Pavlov

Designer & Web Strategy Consultant in Sheffield, UK

Menu

Category Archives: Everydays

14 July 2015 – Building a React.JS App – Part 6 – Everydays

13 July 2015 – Building a React.JS App – Part 5 – Everydays

10 July 2015 – Building a React.JS App – Part 4 – Everydays

9 July 2015 – Building a React.JS App – Part 3 – Everydays

8 July 2015 – Building a React.JS App – Part 2 – Everydays

7 July 2015 – Building a React.JS App – Part 1 – Everydays

6 July 2015 – Building a ReactJS Todo App – Part 2 – Everydays

5 July 2015 – Building a ReactJS ToDo App – Part 1 – Everydays

4 July 2015 – Git, GitHub, React JS Boilerplate – Everydays

3 July 2015 – Getting started with gulp [code] – Everydays