Upgrade to latest React version, and fix sample. Closes #323

Daniel15 · Daniel15 · commit ce29248827c2 · 2016-10-02T18:26:48.000-07:00
diff --git a/site/jekyll/getting-started/tutorial.md b/site/jekyll/getting-started/tutorial.md
@@ -70,8 +70,8 @@ Replace the contents of the new view file with the following:
 </head>
 <body>
 	<div id="content"></div>
-	<script src="https://fb.me/react-15.0.1.js"></script>
-	<script src="https://fb.me/react-dom-15.0.1.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 	<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
 </body>
 </html>
@@ -240,8 +240,8 @@ Markdown is a simple way to format your text inline. For example, surrounding te
 First, add the third-party **Showdown** library to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. We will add it via NuGet (search for "Showdown" and install it, similar to how you installed ReactJS.NET earlier) and reference the script tag in your view:
 
 ```html{3}
-<script src="https://fb.me/react-15.0.1.js"></script>
-<script src="https://fb.me/react-dom-15.0.1.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 <script src="@Url.Content("~/Scripts/showdown.min.js")"></script>
 <script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
 ```
@@ -857,8 +857,8 @@ Now that the bundle has been registered, we need to reference it from the view:
 </head>
 <body>
 	<div id="content"></div>
-	<script src="https://fb.me/react-15.0.1.js"></script>
-	<script src="https://fb.me/react-dom-15.0.1.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 	@Scripts.Render("~/bundles/main")
 	@Html.ReactInitJavaScript()
 </body>
@@ -944,8 +944,8 @@ In the view, we will accept the list of comments as the model, and use `Html.Rea
 		submitUrl = Url.Action("AddComment"),
 		pollInterval = 2000,
 	})
-	<script src="https://fb.me/react-15.0.1.js"></script>
-	<script src="https://fb.me/react-dom-15.0.1.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 	<script src="@Url.Content("~/Scripts/showdown.min.js")"></script>
 	<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
 	@Html.ReactInitJavaScript()
diff --git a/site/jekyll/guides/cassette.md b/site/jekyll/guides/cassette.md
@@ -36,8 +36,8 @@ render from your view using Cassette:
 </head>
 <body>
 	...
-	<script src="https://fb.me/react-15.0.1.js"></script>
-	<script src="https://fb.me/react-dom-15.0.1.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 	@Bundles.RenderScripts()
 </body>
 ```
diff --git a/site/jekyll/guides/server-side-rendering.md b/site/jekyll/guides/server-side-rendering.md
@@ -47,8 +47,8 @@ code.
 ```html
 <!-- Load all your scripts normally before calling ReactInitJavaScript -->
 <!-- Assumes minification/combination is configured as per previous section -->
-<script src="https://fb.me/react-15.0.1.js"></script>
-<script src="https://fb.me/react-dom-15.0.1.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 @Scripts.Render("~/bundles/main")
 @Html.ReactInitJavaScript()
 ```
@@ -63,8 +63,8 @@ code.
 	</div>
 </div>
 
-<script src="https://fb.me/react-15.0.1.js"></script>
-<script src="https://fb.me/react-dom-15.0.1.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 <script src="/Scripts/HelloWorld.js"></script>
 <script>ReactDOM.render(HelloWorld({"name":"Daniel"}), document.getElementById("react1"));</script>
 ```
diff --git a/site/jekyll/index.md b/site/jekyll/index.md
@@ -112,8 +112,8 @@ bundles.Add(new JsxBundle("~/bundles/main").Include(
 })
 
 <!-- Initialise the component in JavaScript too -->
-<script src="https://fb.me/react-15.0.1.js"></script>
-<script src="https://fb.me/react-dom-15.0.1.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 @Scripts.Render("~/bundles/main")
 @Html.ReactInitJavaScript()
 ```
diff --git a/src/React.Core/package.json b/src/React.Core/package.json
@@ -11,7 +11,7 @@
     "gulp": "~3.9.1",
     "gulp-uglify": "~1.5.3",
     "json-loader": "~0.5.4",
-    "react": "~15.1.0",
+    "react": "~15.3.2",
     "vinyl-named": "~1.1.0",
     "webpack": "~1.13.1",
     "webpack-stream": "~3.2.0"
diff --git a/src/React.Sample.Cassette/Views/Home/Index.cshtml b/src/React.Sample.Cassette/Views/Home/Index.cshtml
@@ -20,8 +20,8 @@
 	@Html.React("CommentsBox", new { initialComments = Model.Comments })
 		
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="https://fb.me/react-15.0.1.js"></script>
-	<script src="https://fb.me/react-dom-15.0.1.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 	@Bundles.RenderScripts()
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()
diff --git a/src/React.Sample.Mvc4/Views/Home/Index.cshtml b/src/React.Sample.Mvc4/Views/Home/Index.cshtml
@@ -17,10 +17,10 @@
 	@Html.React("CommentsBox", new { initialComments = Model.Comments, page = Model.Page })
 		
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="https://fb.me/react-15.0.1.js"></script>
-	<script src="https://fb.me/react-dom-15.0.1.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 	@Scripts.Render("~/bundles/main")
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()
 </body>
-</html>
+</html>
diff --git a/src/React.Sample.Mvc6/Controllers/HomeController.cs b/src/React.Sample.Mvc6/Controllers/HomeController.cs
@@ -13,6 +13,8 @@
 using System.Collections.Generic;
 using System.Linq;
 using Microsoft.AspNetCore.Mvc;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Serialization;
 using React.Sample.Mvc6.Models;
 using React.Sample.Mvc6.ViewModels;
 
@@ -26,6 +28,7 @@ public class AuthorModel
 	public class CommentModel
 	{
 		public AuthorModel Author { get; set; }
+		public int Id { get; set; }
 		public string Text { get; set; }
 	}
 }
@@ -62,13 +65,13 @@ public HomeController()
 			};
 			_comments = new List<CommentModel>
 			{
-				new CommentModel { Author = _authors["daniel"], Text = "First!!!!111!" },
-				new CommentModel { Author = _authors["zpao"], Text = "React is awesome!" },
-				new CommentModel { Author = _authors["cpojer"], Text = "Awesome!" },
-				new CommentModel { Author = _authors["vjeux"], Text = "Hello World" },
-				new CommentModel { Author = _authors["daniel"], Text = "Foo" },
-				new CommentModel { Author = _authors["daniel"], Text = "Bar" },
-				new CommentModel { Author = _authors["daniel"], Text = "FooBarBaz" },
+				new CommentModel { Id = 1, Author = _authors["daniel"], Text = "First!!!!111!" },
+				new CommentModel { Id = 2, Author = _authors["zpao"], Text = "React is awesome!" },
+				new CommentModel { Id = 3, Author = _authors["cpojer"], Text = "Awesome!" },
+				new CommentModel { Id = 4, Author = _authors["vjeux"], Text = "Hello World" },
+				new CommentModel { Id = 5, Author = _authors["daniel"], Text = "Foo" },
+				new CommentModel { Id = 6, Author = _authors["daniel"], Text = "Bar" },
+				new CommentModel { Id = 7, Author = _authors["daniel"], Text = "FooBarBaz" },
 			};
 		}
 
diff --git a/src/React.Sample.Mvc6/Startup.cs b/src/React.Sample.Mvc6/Startup.cs
@@ -13,6 +13,8 @@
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Serialization;
 using React.AspNet;
 
 namespace React.Sample.Mvc6
@@ -65,7 +67,12 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
 			{
 				config
 					.SetReuseJavaScriptEngines(true)
-					.AddScript("~/js/Sample.jsx");
+					.AddScript("~/js/Sample.jsx")
+					.SetJsonSerializerSettings(new JsonSerializerSettings
+					{
+						ContractResolver = new CamelCasePropertyNamesContractResolver(),
+						StringEscapeHandling = StringEscapeHandling.EscapeHtml,
+					});
 			});
 
 			// Add static files to the request pipeline.
diff --git a/src/React.Sample.Mvc6/Views/Home/Index.cshtml b/src/React.Sample.Mvc6/Views/Home/Index.cshtml
@@ -17,8 +17,8 @@
 	@Html.React("CommentsBox", new { initialComments = Model.Comments })
 
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="https://fb.me/react-15.0.1.js"></script>
-	<script src="https://fb.me/react-dom-15.0.1.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 	<script src="~/js/Sample.jsx"></script>
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()
diff --git a/src/React.Sample.Mvc6/wwwroot/js/Sample.jsx b/src/React.Sample.Mvc6/wwwroot/js/Sample.jsx
@@ -42,7 +42,7 @@ var CommentsBox = React.createClass({
 	},
 	render() {
 		var commentNodes = this.state.comments.map(comment =>
-			<Comment author={comment.Author}>{comment.Text}</Comment>
+			<Comment key={comment.id} author={comment.author}>{comment.text}</Comment>
 		);
 
 		return (
@@ -78,7 +78,7 @@ var Comment = React.createClass({
 		return (
 			<li>
 				<Avatar author={this.props.author} />
-				<strong>{this.props.author.Name}</strong>{': '}
+				<strong>{this.props.author.name}</strong>{': '}
 				{this.props.children}
 			</li>
 		);
@@ -93,14 +93,14 @@ var Avatar = React.createClass({
 		return (
 			<img
 				src={this.getPhotoUrl(this.props.author)}
-				alt={'Photo of ' + this.props.author.Name}
+				alt={'Photo of ' + this.props.author.name}
 				width={50}
 				height={50}
 				className="commentPhoto"
 			/>
 		);
 	},
 	getPhotoUrl(author) {
-		return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
+		return 'https://avatars.githubusercontent.com/' + author.githubUsername + '?s=50';
 	}
 });
diff --git a/src/React.Sample.Webpack/Views/Home/Index.cshtml b/src/React.Sample.Webpack/Views/Home/Index.cshtml
@@ -16,8 +16,8 @@
 	@Html.React("Components.CommentsBox", new { initialComments = Model.Comments })
 		
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="https://fb.me/react-15.0.1.js"></script>
-	<script src="https://fb.me/react-dom-15.0.1.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
 	<script src="@Url.Content("~/build/client.bundle.js")"></script>
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()
