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

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;