Firebase - Section 2

Author: StephenGrider

todos/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+main.js

todos/README.md

@@ -0,0 +1,28 @@
+ReactStarter
+====
+
+Use this as a starting point for working on chapters of the [Learn and Understand React JS](https://www.udemy.com/learn-and-understand-reactjs/) course on Udemy.com.
+
+---
+
+###Getting Started###
+
+There are two methods for getting started with this repo.
+
+####Familiar with Git?#####
+Checkout this repo, install depdencies, then start the gulp process with the following:
+
+```
+	> git clone [email protected]:StephenGrider/ReactStarter.git
+	> cd ReactStarter
+	> npm install
+	> gulp
+```
+
+####Not Familiar with Git?#####
+Click [here](https://github.com/StephenGrider/ReactStarter/releases) then download the .zip file.  Extract the contents of the zip file, then open your terminal, change to the project directory, and:
+
+```
+	> npm install
+	> gulp
+```

todos/application.js

@@ -0,0 +1,55 @@
+var options = {
+  thumbnailData:  [{
+    title: 'Show Courses',
+    number: 12,
+    header: 'Learn React',
+    description: 'React is a fantastic new front end library for rendering web pages. React is a fantastic new front end library for rendering web pages.',
+    imageUrl: 'https://raw.githubusercontent.com/wiki/facebook/react/react-logo-1000-transparent.png'
+  },{
+    title: 'Show Courses',
+    number: 25,
+    header: 'Learn Gulp',
+    description: 'Gulp will speed up your development workflow.  Gulp will speed up your development workflow.  Gulp will speed up your development workflow.',
+    imageUrl: 'http://brunch.io/images/others/gulp.png'
+  }]
+};
+
+var element = React.createElement(ThumbnailList, options);
+React.render(element, document.querySelector('.container'));
+
+var Badge = React.createClass({displayName: "Badge",
+  render: function() {
+    return React.createElement("button", {className: "btn btn-primary", type: "button"}, 
+      this.props.title, " ", React.createElement("span", {className: "badge"}, this.props.number)
+    )
+  }
+});
+
+var ThumbnailList = React.createClass({displayName: "ThumbnailList",
+  render: function() {
+    var list = this.props.thumbnailData.map(function(thumbnailProps){
+      return React.createElement(Thumbnail, React.__spread({},  thumbnailProps))
+    });
+
+    return React.createElement("div", null, 
+      list
+    )
+  }
+});
+
+var Thumbnail = React.createClass({displayName: "Thumbnail",
+  render: function() {
+    return React.createElement("div", {className: "col-sm-6 col-md-4"}, 
+      React.createElement("div", {className: "thumbnail"}, 
+        React.createElement("img", {src: this.props.imageUrl, alt: "..."}), 
+        React.createElement("div", {className: "caption"}, 
+          React.createElement("h3", null, this.props.header), 
+          React.createElement("p", null, this.props.description), 
+          React.createElement("p", null, 
+            React.createElement(Badge, {title: this.props.title, number: this.props.number})
+          )
+        )
+      )
+    )
+  }
+});

todos/gulpfile.js

@@ -0,0 +1,68 @@
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var source = require('vinyl-source-stream');
+var browserify = require('browserify');
+var watchify = require('watchify');
+var reactify = require('reactify');
+var notifier = require('node-notifier');
+var server = require('gulp-server-livereload');
+
+var notify = function(error) {
+  var message = 'In: ';
+  var title = 'Error: ';
+
+  if(error.description) {
+    title += error.description;
+  } else if (error.message) {
+    title += error.message;
+  }
+
+  if(error.filename) {
+    var file = error.filename.split('/');
+    message += file[file.length-1];
+  }
+
+  if(error.lineNumber) {
+    message += '\nOn Line: ' + error.lineNumber;
+  }
+
+  notifier.notify({title: title, message: message});
+};
+
+var bundler = watchify(browserify({
+  entries: ['./src/app.jsx'],
+  transform: [reactify],
+  extensions: ['.jsx'],
+  debug: true,
+  cache: {},
+  packageCache: {},
+  fullPaths: true
+}));
+
+function bundle() {
+  return bundler
+    .bundle()
+    .on('error', notify)
+    .pipe(source('main.js'))
+    .pipe(gulp.dest('./'))
+}
+bundler.on('update', bundle)
+
+gulp.task('build', function() {
+  bundle()
+});
+
+gulp.task('serve', function(done) {
+  gulp.src('')
+    .pipe(server({
+      livereload: {
+        enable: true,
+        filter: function(filePath, cb) {
+          cb( /main.js/.test(filePath) )
+        }
+      },
+      open: true
+    }));
+});
+
+gulp.task('default', ['build', 'serve']);

todos/index.html

@@ -0,0 +1,8 @@
+<head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+</head>
+<body>
+  <div class="container">
+  </div>
+</body>
+<script src="main.js"></script>

todos/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "react-starter",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "browserify": "^9.0.3",
+    "firebase": "^2.2.6",
+    "gulp": "^3.8.11",
+    "gulp-concat": "^2.5.2",
+    "gulp-react": "^3.0.1",
+    "gulp-server-livereload": "^1.3.0",
+    "gulp-util": "^3.0.4",
+    "node-notifier": "^4.2.1",
+    "react": "^0.13.1",
+    "reactfire": "^0.4.0",
+    "reactify": "^1.1.0",
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^2.4.0"
+  },
+  "devDependencies": {}
+}

todos/src/app.jsx

@@ -0,0 +1,12 @@
+var React = require('react');
+
+var App = React.createClass({
+  render: function() {
+    return <h1>
+      Hello, React!
+    </h1>
+  }
+});
+
+var element = React.createElement(App, {});
+React.render(element, document.querySelector('.container'));