Add Webpack sample.

This sample uses the same example code as the ASP.NET MVC 4 sample, but also demonstrates how to use Webpack to bundle the code and export components for server-side rendering.

Author: Daniel15

.gitignore

@@ -5,7 +5,8 @@ src/**/*.nuspec
 !src/template.nuspec
 site/jekyll/_site
 src/React.Sample.Cassette/cassette-cache
-src/React.Sample.Mvc4/ClearScript.V8
+src/React.Sample.*/ClearScript.V8
+src/React.Sample.Webpack/build
 *.generated.js
 *.generated.js.map
 

src/React.Sample.Webpack/App_Start/ReactConfig.cs

@@ -0,0 +1,22 @@
+/*
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(React.Sample.Webpack.ReactConfig), "Configure")]
+
+namespace React.Sample.Webpack
+{
+	public static class ReactConfig
+	{
+		public static void Configure()
+		{
+			ReactSiteConfiguration.Configuration
+				.AddScript("~/build/server.bundle.js");
+		}
+	}
+}

src/React.Sample.Webpack/Content/Sample.css

@@ -0,0 +1,23 @@
+/*
+ *  Copyright (c) 2014-2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+body {
+	font-family: Calibri, Verdana, sans-serif;
+}
+
+.commentList {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+.commentList li {
+	border-bottom: 1px solid #999;
+	padding: 0.5em 0;
+}

src/React.Sample.Webpack/Content/client.js

@@ -0,0 +1,13 @@
+/**
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+// All JavaScript in here will be loaded client-side
+
+// Expose components globally so ReactJS.NET can use them
+var Components = require('expose?Components!./components');

src/React.Sample.Webpack/Content/components/Avatar.jsx

@@ -0,0 +1,32 @@
+/**
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var React = require('react');
+
+var Avatar = React.createClass({
+	propTypes: {
+		author: React.PropTypes.object.isRequired	
+	},
+	render() {
+		return (
+			<img
+				src={this.getPhotoUrl(this.props.author)}
+				alt={'Photo of ' + this.props.author.Name}
+				width={50}
+				height={50}
+				className="commentPhoto"
+			/>
+		);
+	},
+	getPhotoUrl(author) {
+		return 'http://graph.facebook.com/' + author.Facebook + '/picture';
+	}
+});
+
+module.exports = Avatar;

src/React.Sample.Webpack/Content/components/Comment.jsx

@@ -0,0 +1,28 @@
+/**
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var Avatar = require('./Avatar');
+var React = require('react');
+
+var Comment = React.createClass({
+	propTypes: {
+		author: React.PropTypes.object.isRequired
+	},
+	render() {
+		return (
+			<li>
+				<Avatar author={this.props.author} />
+				<strong>{this.props.author.Name}</strong>{': '}
+				{this.props.children}
+			</li>
+		);
+	}
+});
+
+module.exports = Comment;

src/React.Sample.Webpack/Content/components/CommentsBox.jsx

@@ -0,0 +1,76 @@
+/**
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var Comment = require('./Comment');
+var React = require('react');
+
+var CommentsBox = React.createClass({
+	propTypes: {
+		initialComments: React.PropTypes.array.isRequired
+	},
+	getInitialState() {
+		return {
+			comments: this.props.initialComments,
+			page: 1,
+			hasMore: true,
+			loadingMore: false
+		};
+	},
+	loadMoreClicked(evt) {
+		var nextPage = this.state.page + 1;
+		this.setState({
+			page: nextPage,
+			loadingMore: true
+		});
+
+		var url = evt.target.href;
+		var xhr = new XMLHttpRequest();
+		xhr.open('GET', url, true);
+		xhr.onload = () => {
+			var data = JSON.parse(xhr.responseText);
+			this.setState({
+				comments: this.state.comments.concat(data.comments),
+				hasMore: data.hasMore,
+				loadingMore: false
+			});
+		};
+		xhr.send();
+		return false;
+	},
+	render() {
+		var commentNodes = this.state.comments.map(comment =>
+			<Comment author={comment.Author}>{comment.Text}</Comment>
+		);
+
+		return (
+			<div className="comments">
+				<h1>Comments</h1>
+				<ol className="commentList">
+					{commentNodes}
+				</ol>
+				{this.renderMoreLink()}
+			</div>
+		);
+	},
+	renderMoreLink() {
+		if (this.state.loadingMore) {
+			return <em>Loading...</em>;
+		} else if (this.state.hasMore) {
+			return (
+				<a href={'comments/page-' + (this.state.page + 1)} onClick={this.loadMoreClicked}>
+					Load More
+				</a>
+			);
+		} else {
+			return <em>No more comments</em>;
+		}
+	}
+});
+
+module.exports = CommentsBox;

src/React.Sample.Webpack/Content/components/index.js

@@ -0,0 +1,14 @@
+/**
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+module.exports = {
+  Avatar: require('./Avatar'),
+  Comment: require('./Comment'),
+  CommentsBox: require('./CommentsBox')
+};

src/React.Sample.Webpack/Content/server.js

@@ -0,0 +1,13 @@
+/**
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+// All JavaScript in here will be loaded server-side
+
+// Expose components globally so ReactJS.NET can use them
+var Components = require('expose?Components!./components');

src/React.Sample.Webpack/Global.asax

@@ -0,0 +1 @@
+<%@ Application Codebehind="Global.asax.cs" Inherits="React.Sample.Webpack.MvcApplication" Language="C#" %>