tooling - part 5

StephenGrider · StephenGrider · commit 50d6b8983803 · 2015-03-21T15:30:34.000-07:00
diff --git a/thumbnail-gulp/.gitignore b/thumbnail-gulp/.gitignore
@@ -1 +1,2 @@
 node_modules/
+main.js
diff --git a/thumbnail-gulp/index.html b/thumbnail-gulp/index.html
@@ -1,9 +1,8 @@
 <head>
-  <script src="http://fb.me/react-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>
   <div class="container">
   </div>
 </body>
+<script src="main.js"></script>
diff --git a/thumbnail-gulp/main.js b/thumbnail-gulp/main.js
diff --git a/thumbnail-gulp/src/app.jsx b/thumbnail-gulp/src/app.jsx
@@ -1,7 +1,10 @@
+var React = require('react');
+var ThumbnailList = require('./thumbnail-list');
+
 var options = {
   thumbnailData:  [{
     title: 'Show Courses',
-    number: 12,
+    number: 120,
     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'
@@ -14,5 +17,6 @@ var options = {
   }]
 };
 
+
 var element = React.createElement(ThumbnailList, options);
 React.render(element, document.querySelector('.container'));
diff --git a/thumbnail-gulp/src/badge.jsx b/thumbnail-gulp/src/badge.jsx
@@ -1,4 +1,6 @@
-var Badge = React.createClass({
+var React = require('react');
+
+module.exports = React.createClass({
   render: function() {
     return <button className="btn btn-primary" type="button">
       {this.props.title} <span className="badge">{this.props.number}</span>
diff --git a/thumbnail-gulp/src/thumbnail-list.jsx b/thumbnail-gulp/src/thumbnail-list.jsx
@@ -1,4 +1,7 @@
-var ThumbnailList = React.createClass({
+var React = require('react');
+var Thumbnail = require('./thumbnail');
+
+module.exports = React.createClass({
   render: function() {
     var list = this.props.thumbnailData.map(function(thumbnailProps){
       return <Thumbnail {...thumbnailProps} />
diff --git a/thumbnail-gulp/src/thumbnail.jsx b/thumbnail-gulp/src/thumbnail.jsx
@@ -1,4 +1,7 @@
-var Thumbnail = React.createClass({
+var React = require('react');
+var Badge = require('./badge');
+
+module.exports = React.createClass({
   render: function() {
     return <div className="col-sm-6 col-md-4">
       <div className="thumbnail">
