React 16

src/React.Core/ReactComponent.cs

@@ -164,7 +164,7 @@ public virtual string RenderHtml(bool renderContainerOnly = false, bool renderSe
 		public virtual string RenderJavaScript()
 		{
 			return string.Format(
-				"ReactDOM.render({0}, document.getElementById({1}))",
+				"ReactDOM.hydrate({0}, document.getElementById({1}))",
 				GetComponentInitialiser(),
 				JsonConvert.SerializeObject(ContainerId, _configuration.JsonSerializerSettings) // SerializeObject accepts null settings
 			);

src/React.Core/Resources/react.js

@@ -3,13 +3,14 @@
  *  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 
+ *  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.
  */
 
 // Exports all the parts of React that ReactJS.NET cares about.
 module.exports = {
-	React: require('react/lib/ReactWithAddons'),
-	ReactDOM: require('react/lib/ReactDOM'),
-	ReactDOMServer: require('react/lib/ReactDOMServer')
-};
+	React: require('react'),
+	ReactDOM: require('react-dom'),
+	ReactDOMServer: require('react-dom/server'),
+	PropTypes: require('prop-types'),
+};

src/React.Core/package.json

@@ -11,7 +11,9 @@
     "gulp": "~3.9.1",
     "gulp-uglify": "~1.5.3",
     "json-loader": "~0.5.4",
-    "react": "~15.3.2",
+    "prop-types": "~15.6.0",
+    "react": "~16.0.0",
+    "react-dom": "~16.0.0",
     "vinyl-named": "~1.1.0",
     "webpack": "~1.13.1",
     "webpack-stream": "~3.2.0"

src/React.Router/ReactRouterComponent.cs

@@ -89,7 +89,7 @@ protected override string GetComponentInitialiser()
 		public override string RenderJavaScript()
 		{
 			return string.Format(
-				"ReactDOM.render({0}, document.getElementById({1}))",
+				"ReactDOM.hydrate({0}, document.getElementById({1}))",
 				base.GetComponentInitialiser(),
 				JsonConvert.SerializeObject(ContainerId, _configuration.JsonSerializerSettings) // SerializeObject accepts null settings
 			);

src/React.Sample.Cassette/Content/Sample.jsx

@@ -3,24 +3,25 @@
  *  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 
+ *  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 CommentsBox = React.createClass({
-	propTypes: {
-		initialComments: React.PropTypes.array.isRequired,
-		commentsPerPage: React.PropTypes.number.isRequired
-	},
-	getInitialState: function() {
-		return {
-			comments: this.props.initialComments,
-			page: 1,
-			hasMore: true,
-			loadingMore: false
-		};
-	},
-	loadMoreClicked: function(evt) {
+
+class CommentsBox extends React.Component {
+	static propTypes = {
+		initialComments: PropTypes.array.isRequired,
+		commentsPerPage: PropTypes.number.isRequired
+	};
+
+	state = {
+		comments: this.props.initialComments,
+		page: 1,
+		hasMore: true,
+		loadingMore: false
+	};
+
+	loadMoreClicked = (evt) => {
 		var nextPage = this.state.page + 1;
 		this.setState({
 			page: nextPage,
@@ -40,8 +41,9 @@ var CommentsBox = React.createClass({
 		}.bind(this);
 		xhr.send();
 		evt.preventDefault();
-	},
-	render: function() {
+	};
+
+	render() {
 		var commentNodes = this.state.comments.map(function (comment) {
 			return <Comment author={comment.Author}>{comment.Text}</Comment>;
 		});
@@ -55,8 +57,9 @@ var CommentsBox = React.createClass({
 				{this.renderMoreLink()}
 			</div>
 		);
-	},
-	renderMoreLink: function() {
+	}
+
+	renderMoreLink = () => {
 		if (this.state.loadingMore) {
 			return <em>Loading...</em>;
 		} else if (this.state.hasMore) {
@@ -68,14 +71,15 @@ var CommentsBox = React.createClass({
 		} else {
 			return <em>No more comments</em>;
 		}
-	}
-});
+	};
+}
+
+class Comment extends React.Component {
+	static propTypes = {
+		author: PropTypes.object.isRequired
+	};
 
-var Comment = React.createClass({
-	propTypes: {
-		author: React.PropTypes.object.isRequired
-	},
-	render: function() {
+	render() {
 		return (
 			<li>
 				<Avatar author={this.props.author} />
@@ -84,13 +88,14 @@ var Comment = React.createClass({
 			</li>
 		);
 	}
-});
+}
+
+class Avatar extends React.Component {
+	static propTypes = {
+		author: PropTypes.object.isRequired
+	};
 
-var Avatar = React.createClass({
-	propTypes: {
-		author: React.PropTypes.object.isRequired	
-	},
-	render: function() {
+	render() {
 		return (
 			<img
 				src={this.getPhotoUrl(this.props.author)}
@@ -100,8 +105,9 @@ var Avatar = React.createClass({
 				className="commentPhoto"
 			/>
 		);
-	},
-	getPhotoUrl: function(author) {
-		return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
 	}
-});
+
+	getPhotoUrl = (author) => {
+		return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
+	};
+}

src/React.Sample.Cassette/Views/Home/Index.cshtml

@@ -11,19 +11,20 @@
 </head>
 <body>
 	<p>
-		This is an example of ReactJS.NET's server-side rendering. The initial state of this 
+		This is an example of ReactJS.NET's server-side rendering. The initial state of this
 		comments box is rendered server-side, and additional data is loaded via AJAX and rendered
 		client-side.
 	</p>
-	
+
 	<!-- Render the component server-side, passing initial props -->
 	@Html.React("CommentsBox", new { initialComments = Model.Comments })
-		
+
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<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="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	@Bundles.RenderScripts()
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()
 </body>
-</html>
+</html>

src/React.Sample.ConsoleApp/Sample.jsx

@@ -1,4 +1,4 @@
-/*
+/*
  *  Copyright (c) 2015, Facebook, Inc.
  *  All rights reserved.
  *
@@ -7,12 +7,12 @@
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
-var HelloWorld = React.createClass({
+class HelloWorld extends React.Component {
 	render() {
 		return (
 			<div>
 				Hello {this.props.name}!
 			</div>
 		);
 	}
-});
+}

src/React.Sample.Mvc4/Content/Sample.jsx

@@ -3,24 +3,24 @@
  *  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 
+ *  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 CommentsBox = React.createClass({
-	propTypes: {
+class CommentsBox extends React.Component {
+	static propTypes = {
 		initialComments: React.PropTypes.array.isRequired,
 		page: React.PropTypes.number
-	},
-	getInitialState() {
-		return {
+	};
+
+		state = {
 			comments: this.props.initialComments,
 			page: this.props.page,
 			hasMore: true,
 			loadingMore: false
-		};
-	},
-	loadMoreClicked(evt) {
+	};
+
+	loadMoreClicked = (evt) => {
 		var nextPage = this.state.page + 1;
 		this.setState({
 			page: nextPage,
@@ -41,7 +41,8 @@ var CommentsBox = React.createClass({
 		};
 		xhr.send();
 		evt.preventDefault();
-	},
+	};
+
 	render() {
 		var commentNodes = this.state.comments.map(comment =>
 			<Comment author={comment.Author}>{comment.Text}</Comment>
@@ -56,8 +57,9 @@ var CommentsBox = React.createClass({
 				{this.renderMoreLink()}
 			</div>
 		);
-	},
-	renderMoreLink() {
+	}
+
+	renderMoreLink = () => {
 		if (this.state.loadingMore) {
 			return <em>Loading...</em>;
 		} else if (this.state.hasMore) {
@@ -69,13 +71,14 @@ var CommentsBox = React.createClass({
 		} else {
 			return <em>No more comments</em>;
 		}
-	}
-});
+	};
+}
 
-var Comment = React.createClass({
-	propTypes: {
+class Comment extends React.Component {
+	static propTypes = {
 		author: React.PropTypes.object.isRequired
-	},
+	};
+
 	render() {
 		return (
 			<li>
@@ -85,12 +88,13 @@ var Comment = React.createClass({
 			</li>
 		);
 	}
-});
+}
+
+class Avatar extends React.Component {
+	static propTypes = {
+		author: React.PropTypes.object.isRequired
+	};
 
-var Avatar = React.createClass({
-	propTypes: {
-		author: React.PropTypes.object.isRequired	
-	},
 	render() {
 		return (
 			<img
@@ -101,8 +105,9 @@ var Avatar = React.createClass({
 				className="commentPhoto"
 			/>
 		);
-	},
-	getPhotoUrl(author) {
-		return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
 	}
-});
+
+	getPhotoUrl = (author) => {
+		return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
+	};
+}

src/React.Sample.Mvc4/Views/Home/Index.cshtml

@@ -8,17 +8,18 @@
 </head>
 <body>
 	<p>
-		This is an example of ReactJS.NET's server-side rendering. The initial state of this 
+		This is an example of ReactJS.NET's server-side rendering. The initial state of this
 		comments box is rendered server-side, and additional data is loaded via AJAX and rendered
 		client-side.
 	</p>
-	
+
 	<!-- Render the component server-side, passing initial props -->
 	@Html.React("CommentsBox", new { initialComments = Model.Comments, page = Model.Page })
-		
+
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<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="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	@Scripts.Render("~/bundles/main")
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()

src/React.Sample.Mvc6/Views/Home/Index.cshtml

@@ -17,10 +17,11 @@
 	@Html.React("CommentsBox", new { initialComments = Model.Comments })
 
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<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="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	<script src="~/js/Sample.jsx"></script>
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()
 </body>
-</html>
+</html>