From 3ac4d7c64a71b6b096484c20ea5ae1d530c37a34 Mon Sep 17 00:00:00 2001 From: Stephen Grider Date: Sat, 21 Mar 2015 13:22:46 -0700 Subject: [PATCH] Tooling - part1 --- thumbnail-gulp/index.html | 9 +++++++++ thumbnail-gulp/src/app.jsx | 18 ++++++++++++++++++ thumbnail-gulp/src/badge.jsx | 7 +++++++ thumbnail-gulp/src/thumbnail-list.jsx | 11 +++++++++++ thumbnail-gulp/src/thumbnail.jsx | 16 ++++++++++++++++ 5 files changed, 61 insertions(+) create mode 100644 thumbnail-gulp/index.html create mode 100644 thumbnail-gulp/src/app.jsx create mode 100644 thumbnail-gulp/src/badge.jsx create mode 100644 thumbnail-gulp/src/thumbnail-list.jsx create mode 100644 thumbnail-gulp/src/thumbnail.jsx diff --git a/thumbnail-gulp/index.html b/thumbnail-gulp/index.html new file mode 100644 index 0000000..637901c --- /dev/null +++ b/thumbnail-gulp/index.html @@ -0,0 +1,9 @@ + + + + + + +
+
+ diff --git a/thumbnail-gulp/src/app.jsx b/thumbnail-gulp/src/app.jsx new file mode 100644 index 0000000..4cc829b --- /dev/null +++ b/thumbnail-gulp/src/app.jsx @@ -0,0 +1,18 @@ +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')); diff --git a/thumbnail-gulp/src/badge.jsx b/thumbnail-gulp/src/badge.jsx new file mode 100644 index 0000000..fadc2bd --- /dev/null +++ b/thumbnail-gulp/src/badge.jsx @@ -0,0 +1,7 @@ +var Badge = React.createClass({ + render: function() { + return + } +}); diff --git a/thumbnail-gulp/src/thumbnail-list.jsx b/thumbnail-gulp/src/thumbnail-list.jsx new file mode 100644 index 0000000..9b44b91 --- /dev/null +++ b/thumbnail-gulp/src/thumbnail-list.jsx @@ -0,0 +1,11 @@ +var ThumbnailList = React.createClass({ + render: function() { + var list = this.props.thumbnailData.map(function(thumbnailProps){ + return + }); + + return
+ {list} +
+ } +}); diff --git a/thumbnail-gulp/src/thumbnail.jsx b/thumbnail-gulp/src/thumbnail.jsx new file mode 100644 index 0000000..7305319 --- /dev/null +++ b/thumbnail-gulp/src/thumbnail.jsx @@ -0,0 +1,16 @@ +var Thumbnail = React.createClass({ + render: function() { + return
+
+ ... +
+

{this.props.header}

+

{this.props.description}

+

+ +

+
+
+
+ } +});