tooling - part 2

StephenGrider · StephenGrider · commit c3f7c7771c34 · 2015-03-21T13:50:33.000-07:00
diff --git a/thumbnail-gulp/.gitignore b/thumbnail-gulp/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/thumbnail-gulp/application.js b/thumbnail-gulp/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})
+          )
+        )
+      )
+    )
+  }
+});
diff --git a/thumbnail-gulp/gulpfile.js b/thumbnail-gulp/gulpfile.js
@@ -0,0 +1,10 @@
+var gulp = require('gulp');
+var react = require('gulp-react');
+var concat = require('gulp-concat');
+
+gulp.task('default', function() {
+  return gulp.src('src/**')
+    .pipe(react())
+    .pipe(concat('application.js'))
+    .pipe(gulp.dest('./'));
+});
diff --git a/thumbnail-gulp/index.html b/thumbnail-gulp/index.html
@@ -1,6 +1,6 @@
 <head>
   <script src="http://fb.me/react-0.13.0.js"></script>
-  <script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
+  <script src="application.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 </head>
 <body>
diff --git a/thumbnail-gulp/package.json b/thumbnail-gulp/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "thumbnail-gulp",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "gulp": "^3.8.11",
+    "gulp-concat": "^2.5.2",
+    "gulp-react": "^3.0.1",
+    "react": "^0.13.1"
+  },
+  "devDependencies": {}
+}
