Update samples: Add hooks demo

reactjs · Feb 23, 2019 · dd55c44 · dd55c44
1 parent b4a10af
commit dd55c44
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 21 deletions.
diff --git a/src/React.Sample.Mvc4/Content/Sample.jsx b/src/React.Sample.Mvc4/Content/Sample.jsx
@@ -7,24 +7,33 @@
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
+function HooksDemo() {
+	let [count, updateCount] = React.useState(0);
+	return (
+		<button onClick={() => updateCount(count + 1)}>
+			Click count: {count}
+		</button>
+	);
+}
+
 class CommentsBox extends React.Component {
 	static propTypes = {
 		initialComments: PropTypes.array.isRequired,
-		page: PropTypes.number
+		page: PropTypes.number,
 	};
 
-		state = {
-			comments: this.props.initialComments,
-			page: this.props.page,
-			hasMore: true,
-			loadingMore: false
+	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,
-			loadingMore: true
+			loadingMore: true,
 		});
 
 		var url = evt.target.href;
@@ -36,24 +45,23 @@ class CommentsBox extends React.Component {
 			this.setState({
 				comments: this.state.comments.concat(data.comments),
 				hasMore: data.hasMore,
-				loadingMore: false
+				loadingMore: false,
 			});
 		};
 		xhr.send();
 		evt.preventDefault();
 	};
 
 	render() {
-		var commentNodes = this.state.comments.map(comment =>
+		var commentNodes = this.state.comments.map(comment => (
 			<Comment author={comment.Author}>{comment.Text}</Comment>
-		);
+		));
 
 		return (
 			<div className="comments">
+				<HooksDemo />
 				<h1>Comments</h1>
-				<ol className="commentList">
-					{commentNodes}
-				</ol>
+				<ol className="commentList">{commentNodes}</ol>
 				{this.renderMoreLink()}
 			</div>
 		);
@@ -64,7 +72,10 @@ class CommentsBox extends React.Component {
 			return <em>Loading...</em>;
 		} else if (this.state.hasMore) {
 			return (
-				<a href={'/comments/page-' + (this.state.page + 1)} onClick={this.loadMoreClicked}>
+				<a
+					href={'/comments/page-' + (this.state.page + 1)}
+					onClick={this.loadMoreClicked}
+				>
 					Load More
 				</a>
 			);
@@ -76,14 +87,15 @@ class CommentsBox extends React.Component {
 
 class Comment extends React.Component {
 	static propTypes = {
-		author: PropTypes.object.isRequired
+		author: PropTypes.object.isRequired,
 	};
 
 	render() {
 		return (
 			<li>
 				<Avatar author={this.props.author} />
-				<strong>{this.props.author.Name}</strong>{': '}
+				<strong>{this.props.author.Name}</strong>
+				{': '}
 				{this.props.children}
 			</li>
 		);
@@ -92,7 +104,7 @@ class Comment extends React.Component {
 
 class Avatar extends React.Component {
 	static propTypes = {
-		author: PropTypes.object.isRequired
+		author: PropTypes.object.isRequired,
 	};
 
 	render() {
@@ -107,7 +119,11 @@ class Avatar extends React.Component {
 		);
 	}
 
-	getPhotoUrl = (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.Webpack.CoreMvc/Content/components/home.jsx b/src/React.Sample.Webpack.CoreMvc/Content/components/home.jsx
@@ -1,4 +1,4 @@
-import { Component, Fragment } from 'react';
+import { Component, Fragment, useState } from 'react';
 import {
 	Link,
 	BrowserRouter,
@@ -34,6 +34,15 @@ class Navbar extends Component {
 	}
 }
 
+function HooksDemo() {
+	let [count, updateCount] = React.useState(0);
+	return (
+		<button onClick={() => updateCount(count + 1)}>
+			Click count: {count}
+		</button>
+	);
+}
+
 class HomePage extends Component {
 	render() {
 		return (
@@ -51,6 +60,7 @@ class HomePage extends Component {
 				>
 					ReactJS.NET is 🔥🔥
 				</h1>
+				<HooksDemo />
 			</Fragment>
 		);
 	}