diff --git a/src/React.Core/ReactComponent.cs b/src/React.Core/ReactComponent.cs
index 140a1bb5b..43c40628c 100644
--- a/src/React.Core/ReactComponent.cs
+++ b/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
);
diff --git a/src/React.Core/Resources/react.js b/src/React.Core/Resources/react.js
index 2fecd563f..0e69b3983 100644
--- a/src/React.Core/Resources/react.js
+++ b/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')
-};
\ No newline at end of file
+ React: require('react'),
+ ReactDOM: require('react-dom'),
+ ReactDOMServer: require('react-dom/server'),
+ PropTypes: require('prop-types'),
+};
diff --git a/src/React.Core/package.json b/src/React.Core/package.json
index bc0607b8b..29dd13368 100644
--- a/src/React.Core/package.json
+++ b/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"
diff --git a/src/React.Router/ReactRouterComponent.cs b/src/React.Router/ReactRouterComponent.cs
index c2d553027..1d90b00ab 100644
--- a/src/React.Router/ReactRouterComponent.cs
+++ b/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
);
diff --git a/src/React.Sample.Cassette/Content/Sample.jsx b/src/React.Sample.Cassette/Content/Sample.jsx
index 35d9104e6..ffaa668eb 100644
--- a/src/React.Sample.Cassette/Content/Sample.jsx
+++ b/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.Text};
});
@@ -55,8 +57,9 @@ var CommentsBox = React.createClass({
{this.renderMoreLink()}
);
- },
- renderMoreLink: function() {
+ }
+
+ renderMoreLink = () => {
if (this.state.loadingMore) {
return Loading...;
} else if (this.state.hasMore) {
@@ -68,14 +71,15 @@ var CommentsBox = React.createClass({
} else {
return No more comments;
}
- }
-});
+ };
+}
+
+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 (
@@ -84,13 +88,14 @@ var Comment = React.createClass({
);
}
-});
+}
+
+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 (
})
);
- },
- getPhotoUrl: function(author) {
- return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
}
-});
+
+ getPhotoUrl = (author) => {
+ return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
+ };
+}
diff --git a/src/React.Sample.Cassette/Views/Home/Index.cshtml b/src/React.Sample.Cassette/Views/Home/Index.cshtml
index 46d143409..5de9a00d4 100644
--- a/src/React.Sample.Cassette/Views/Home/Index.cshtml
+++ b/src/React.Sample.Cassette/Views/Home/Index.cshtml
@@ -11,19 +11,20 @@
- 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.
-
+
@Html.React("CommentsBox", new { initialComments = Model.Comments })
-
+
-
-
+
+
+
@Bundles.RenderScripts()
@Html.ReactInitJavaScript()
-