Skip to content

Commit 209de13

Browse files
dustinsoftwareDaniel15
dustinsoftware
authored and
Daniel15
committed
React 16 (#445)
* Update to React 16 * Use hydrate instead of render * Update mvc4 sample * Update samples * Update more samples * Add stage-0 transform to webpack sample * Use LF line endings
1 parent 44537ec commit 209de13

File tree

22 files changed

+243
-202
lines changed

22 files changed

+243
-202
lines changed

‎src/React.Core/ReactComponent.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ public virtual string RenderHtml(bool renderContainerOnly = false, bool renderSe
164164
public virtual string RenderJavaScript()
165165
{
166166
return string.Format(
167-
"ReactDOM.render({0}, document.getElementById({1}))",
167+
"ReactDOM.hydrate({0}, document.getElementById({1}))",
168168
GetComponentInitialiser(),
169169
JsonConvert.SerializeObject(ContainerId, _configuration.JsonSerializerSettings) // SerializeObject accepts null settings
170170
);

‎src/React.Core/Resources/react.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
* All rights reserved.
44
*
55
* This source code is licensed under the BSD-style license found in the
6-
* LICENSE file in the root directory of this source tree. An additional grant
6+
* LICENSE file in the root directory of this source tree. An additional grant
77
* of patent rights can be found in the PATENTS file in the same directory.
88
*/
99

1010
// Exports all the parts of React that ReactJS.NET cares about.
1111
module.exports = {
12-
React: require('react/lib/ReactWithAddons'),
13-
ReactDOM: require('react/lib/ReactDOM'),
14-
ReactDOMServer: require('react/lib/ReactDOMServer')
15-
};
12+
React: require('react'),
13+
ReactDOM: require('react-dom'),
14+
ReactDOMServer: require('react-dom/server'),
15+
PropTypes: require('prop-types'),
16+
};

‎src/React.Core/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
"gulp": "~3.9.1",
1212
"gulp-uglify": "~1.5.3",
1313
"json-loader": "~0.5.4",
14-
"react": "~15.3.2",
14+
"prop-types": "~15.6.0",
15+
"react": "~16.0.0",
16+
"react-dom": "~16.0.0",
1517
"vinyl-named": "~1.1.0",
1618
"webpack": "~1.13.1",
1719
"webpack-stream": "~3.2.0"

‎src/React.Router/ReactRouterComponent.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ protected override string GetComponentInitialiser()
8989
public override string RenderJavaScript()
9090
{
9191
return string.Format(
92-
"ReactDOM.render({0}, document.getElementById({1}))",
92+
"ReactDOM.hydrate({0}, document.getElementById({1}))",
9393
base.GetComponentInitialiser(),
9494
JsonConvert.SerializeObject(ContainerId, _configuration.JsonSerializerSettings) // SerializeObject accepts null settings
9595
);

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

+42-36
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,25 @@
33
* All rights reserved.
44
*
55
* This source code is licensed under the BSD-style license found in the
6-
* LICENSE file in the root directory of this source tree. An additional grant
6+
* LICENSE file in the root directory of this source tree. An additional grant
77
* of patent rights can be found in the PATENTS file in the same directory.
88
*/
99

10-
var CommentsBox = React.createClass({
11-
propTypes: {
12-
initialComments: React.PropTypes.array.isRequired,
13-
commentsPerPage: React.PropTypes.number.isRequired
14-
},
15-
getInitialState: function() {
16-
return {
17-
comments: this.props.initialComments,
18-
page: 1,
19-
hasMore: true,
20-
loadingMore: false
21-
};
22-
},
23-
loadMoreClicked: function(evt) {
10+
11+
class CommentsBox extends React.Component {
12+
static propTypes = {
13+
initialComments: PropTypes.array.isRequired,
14+
commentsPerPage: PropTypes.number.isRequired
15+
};
16+
17+
state = {
18+
comments: this.props.initialComments,
19+
page: 1,
20+
hasMore: true,
21+
loadingMore: false
22+
};
23+
24+
loadMoreClicked = (evt) => {
2425
var nextPage = this.state.page + 1;
2526
this.setState({
2627
page: nextPage,
@@ -40,8 +41,9 @@ var CommentsBox = React.createClass({
4041
}.bind(this);
4142
xhr.send();
4243
evt.preventDefault();
43-
},
44-
render: function() {
44+
};
45+
46+
render() {
4547
var commentNodes = this.state.comments.map(function (comment) {
4648
return <Comment author={comment.Author}>{comment.Text}</Comment>;
4749
});
@@ -55,8 +57,9 @@ var CommentsBox = React.createClass({
5557
{this.renderMoreLink()}
5658
</div>
5759
);
58-
},
59-
renderMoreLink: function() {
60+
}
61+
62+
renderMoreLink = () => {
6063
if (this.state.loadingMore) {
6164
return <em>Loading...</em>;
6265
} else if (this.state.hasMore) {
@@ -68,14 +71,15 @@ var CommentsBox = React.createClass({
6871
} else {
6972
return <em>No more comments</em>;
7073
}
71-
}
72-
});
74+
};
75+
}
76+
77+
class Comment extends React.Component {
78+
static propTypes = {
79+
author: PropTypes.object.isRequired
80+
};
7381

74-
var Comment = React.createClass({
75-
propTypes: {
76-
author: React.PropTypes.object.isRequired
77-
},
78-
render: function() {
82+
render() {
7983
return (
8084
<li>
8185
<Avatar author={this.props.author} />
@@ -84,13 +88,14 @@ var Comment = React.createClass({
8488
</li>
8589
);
8690
}
87-
});
91+
}
92+
93+
class Avatar extends React.Component {
94+
static propTypes = {
95+
author: PropTypes.object.isRequired
96+
};
8897

89-
var Avatar = React.createClass({
90-
propTypes: {
91-
author: React.PropTypes.object.isRequired
92-
},
93-
render: function() {
98+
render() {
9499
return (
95100
<img
96101
src={this.getPhotoUrl(this.props.author)}
@@ -100,8 +105,9 @@ var Avatar = React.createClass({
100105
className="commentPhoto"
101106
/>
102107
);
103-
},
104-
getPhotoUrl: function(author) {
105-
return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
106108
}
107-
});
109+
110+
getPhotoUrl = (author) => {
111+
return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
112+
};
113+
}

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

+7-6
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,20 @@
1111
</head>
1212
<body>
1313
<p>
14-
This is an example of ReactJS.NET's server-side rendering. The initial state of this
14+
This is an example of ReactJS.NET's server-side rendering. The initial state of this
1515
comments box is rendered server-side, and additional data is loaded via AJAX and rendered
1616
client-side.
1717
</p>
18-
18+
1919
<!-- Render the component server-side, passing initial props -->
2020
@Html.React("CommentsBox", new { initialComments = Model.Comments })
21-
21+
2222
<!-- Load all required scripts (React + the site's scripts) -->
23-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
24-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
2526
@Bundles.RenderScripts()
2627
<!-- Render the code to initialise the component -->
2728
@Html.ReactInitJavaScript()
2829
</body>
29-
</html>
30+
</html>

‎src/React.Sample.ConsoleApp/Sample.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*
1+
/*
22
* Copyright (c) 2015, Facebook, Inc.
33
* All rights reserved.
44
*
@@ -7,12 +7,12 @@
77
* of patent rights can be found in the PATENTS file in the same directory.
88
*/
99

10-
var HelloWorld = React.createClass({
10+
class HelloWorld extends React.Component {
1111
render() {
1212
return (
1313
<div>
1414
Hello {this.props.name}!
1515
</div>
1616
);
1717
}
18-
});
18+
}

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

+31-26
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
* All rights reserved.
44
*
55
* This source code is licensed under the BSD-style license found in the
6-
* LICENSE file in the root directory of this source tree. An additional grant
6+
* LICENSE file in the root directory of this source tree. An additional grant
77
* of patent rights can be found in the PATENTS file in the same directory.
88
*/
99

10-
var CommentsBox = React.createClass({
11-
propTypes: {
10+
class CommentsBox extends React.Component {
11+
static propTypes = {
1212
initialComments: React.PropTypes.array.isRequired,
1313
page: React.PropTypes.number
14-
},
15-
getInitialState() {
16-
return {
14+
};
15+
16+
state = {
1717
comments: this.props.initialComments,
1818
page: this.props.page,
1919
hasMore: true,
2020
loadingMore: false
21-
};
22-
},
23-
loadMoreClicked(evt) {
21+
};
22+
23+
loadMoreClicked = (evt) => {
2424
var nextPage = this.state.page + 1;
2525
this.setState({
2626
page: nextPage,
@@ -41,7 +41,8 @@ var CommentsBox = React.createClass({
4141
};
4242
xhr.send();
4343
evt.preventDefault();
44-
},
44+
};
45+
4546
render() {
4647
var commentNodes = this.state.comments.map(comment =>
4748
<Comment author={comment.Author}>{comment.Text}</Comment>
@@ -56,8 +57,9 @@ var CommentsBox = React.createClass({
5657
{this.renderMoreLink()}
5758
</div>
5859
);
59-
},
60-
renderMoreLink() {
60+
}
61+
62+
renderMoreLink = () => {
6163
if (this.state.loadingMore) {
6264
return <em>Loading...</em>;
6365
} else if (this.state.hasMore) {
@@ -69,13 +71,14 @@ var CommentsBox = React.createClass({
6971
} else {
7072
return <em>No more comments</em>;
7173
}
72-
}
73-
});
74+
};
75+
}
7476

75-
var Comment = React.createClass({
76-
propTypes: {
77+
class Comment extends React.Component {
78+
static propTypes = {
7779
author: React.PropTypes.object.isRequired
78-
},
80+
};
81+
7982
render() {
8083
return (
8184
<li>
@@ -85,12 +88,13 @@ var Comment = React.createClass({
8588
</li>
8689
);
8790
}
88-
});
91+
}
92+
93+
class Avatar extends React.Component {
94+
static propTypes = {
95+
author: React.PropTypes.object.isRequired
96+
};
8997

90-
var Avatar = React.createClass({
91-
propTypes: {
92-
author: React.PropTypes.object.isRequired
93-
},
9498
render() {
9599
return (
96100
<img
@@ -101,8 +105,9 @@ var Avatar = React.createClass({
101105
className="commentPhoto"
102106
/>
103107
);
104-
},
105-
getPhotoUrl(author) {
106-
return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
107108
}
108-
});
109+
110+
getPhotoUrl = (author) => {
111+
return 'https://avatars.githubusercontent.com/' + author.GithubUsername + '?s=50';
112+
};
113+
}

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,18 @@
88
</head>
99
<body>
1010
<p>
11-
This is an example of ReactJS.NET's server-side rendering. The initial state of this
11+
This is an example of ReactJS.NET's server-side rendering. The initial state of this
1212
comments box is rendered server-side, and additional data is loaded via AJAX and rendered
1313
client-side.
1414
</p>
15-
15+
1616
<!-- Render the component server-side, passing initial props -->
1717
@Html.React("CommentsBox", new { initialComments = Model.Comments, page = Model.Page })
18-
18+
1919
<!-- Load all required scripts (React + the site's scripts) -->
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
21-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
2223
@Scripts.Render("~/bundles/main")
2324
<!-- Render the code to initialise the component -->
2425
@Html.ReactInitJavaScript()

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@
1717
@Html.React("CommentsBox", new { initialComments = Model.Comments })
1818

1919
<!-- Load all required scripts (React + the site's scripts) -->
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
21-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
2223
<script src="~/js/Sample.jsx"></script>
2324
<!-- Render the code to initialise the component -->
2425
@Html.ReactInitJavaScript()
2526
</body>
26-
</html>
27+
</html>

0 commit comments

Comments
 (0)