Skip to content

Commit 8b94109

Browse files
dustinsoftwaredustinsoftware
committed
Add Reactstrap to Mvc4 sample
1 parent 19055c8 commit 8b94109

File tree

5 files changed

+36
-29
lines changed

5 files changed

+36
-29
lines changed

‎src/React.Sample.Mvc4/App_Start/ReactConfig.cs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ public static void Configure()
1919
ReactSiteConfiguration.Configuration
2020
.SetReuseJavaScriptEngines(true)
2121
.SetAllowJavaScriptPrecompilation(true)
22+
.AddScriptWithoutTransform("~/Content/lib/reactstrap.min.js")
2223
.AddScript("~/Content/Sample.jsx");
2324

2425
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;

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

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,24 @@ function HooksDemo() {
1919
class CommentsBox extends React.Component {
2020
static propTypes = {
2121
initialComments: PropTypes.array.isRequired,
22-
page: PropTypes.number,
22+
page: PropTypes.number
2323
};
2424

2525
state = {
2626
comments: this.props.initialComments,
2727
page: this.props.page,
2828
hasMore: true,
29-
loadingMore: false,
29+
loadingMore: false
3030
};
3131

3232
loadMoreClicked = evt => {
3333
var nextPage = this.state.page + 1;
3434
this.setState({
3535
page: nextPage,
36-
loadingMore: true,
36+
loadingMore: true
3737
});
3838

39-
var url = evt.target.href;
39+
var url = '/comments/page-' + (this.state.page + 1);
4040
var xhr = new XMLHttpRequest();
4141
xhr.open('GET', url, true);
4242
xhr.setRequestHeader('Content-Type', 'application/json');
@@ -45,7 +45,7 @@ class CommentsBox extends React.Component {
4545
this.setState({
4646
comments: this.state.comments.concat(data.comments),
4747
hasMore: data.hasMore,
48-
loadingMore: false,
48+
loadingMore: false
4949
});
5050
};
5151
xhr.send();
@@ -72,12 +72,9 @@ class CommentsBox extends React.Component {
7272
return <em>Loading...</em>;
7373
} else if (this.state.hasMore) {
7474
return (
75-
<a
76-
href={'/comments/page-' + (this.state.page + 1)}
77-
onClick={this.loadMoreClicked}
78-
>
75+
<Reactstrap.Button onClick={this.loadMoreClicked}>
7976
Load More
80-
</a>
77+
</Reactstrap.Button>
8178
);
8279
} else {
8380
return <em>No more comments</em>;
@@ -87,7 +84,7 @@ class CommentsBox extends React.Component {
8784

8885
class Comment extends React.Component {
8986
static propTypes = {
90-
author: PropTypes.object.isRequired,
87+
author: PropTypes.object.isRequired
9188
};
9289

9390
render() {
@@ -104,7 +101,7 @@ class Comment extends React.Component {
104101

105102
class Avatar extends React.Component {
106103
static propTypes = {
107-
author: PropTypes.object.isRequired,
104+
author: PropTypes.object.isRequired
108105
};
109106

110107
render() {
@@ -114,7 +111,7 @@ class Avatar extends React.Component {
114111
alt={'Photo of ' + this.props.author.Name}
115112
width={50}
116113
height={50}
117-
className="commentPhoto"
114+
className="commentPhoto mr-1"
118115
/>
119116
);
120117
}

‎src/React.Sample.Mvc4/Content/lib/reactstrap.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/React.Sample.Mvc4/React.Sample.Mvc4.csproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@
152152
<ItemGroup>
153153
<Compile Include="App_Start\FilterConfig.cs" />
154154
<Compile Include="App_Start\RouteConfig.cs" />
155+
<Content Include="Content\lib\reactstrap.min.js" />
155156
<Content Include="Content\Sample.css" />
156157
<Content Include="Global.asax" />
157158
<Content Include="Web.config">

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

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,29 @@
55
<head>
66
<title>ReactJS.NET Sample</title>
77
<link rel="stylesheet" href="~/Content/Sample.css" />
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
89
</head>
910
<body>
10-
<p>
11-
This is an example of ReactJS.NET's server-side rendering. The initial state of this
12-
comments box is rendered server-side, and additional data is loaded via AJAX and rendered
13-
client-side.
14-
</p>
15-
16-
<!-- Render the component server-side, passing initial props -->
17-
@Html.React("CommentsBox", new { initialComments = Model.Comments, page = Model.Page })
18-
19-
<!-- Load all required scripts (React + the site's scripts) -->
20-
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.development.js"></script>
21-
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.development.js"></script>
22-
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
23-
@Scripts.Render("~/bundles/main")
24-
<!-- Render the code to initialise the component -->
25-
@Html.ReactInitJavaScript()
11+
<div class="container">
12+
<div class="jumbotron">
13+
<h1 class="display-4">Hello, ReactJS.NET!</h1>
14+
<p class="lead">
15+
This is an example of ReactJS.NET's server-side rendering. The initial state of this
16+
comments box is rendered server-side, and additional data is loaded via AJAX and rendered
17+
client-side.
18+
</p>
19+
<hr class="my-4">
20+
<!-- Render the component server-side, passing initial props -->
21+
@Html.React("CommentsBox", new { initialComments = Model.Comments, page = Model.Page })
22+
<!-- Load all required scripts (React + the site's scripts) -->
23+
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.development.js"></script>
24+
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.development.js"></script>
25+
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
26+
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/7.1.0/reactstrap.min.js"></script>
27+
@Scripts.Render("~/bundles/main")
28+
<!-- Render the code to initialise the component -->
29+
@Html.ReactInitJavaScript()
30+
</div>
31+
</div>
2632
</body>
2733
</html>

0 commit comments

Comments
 (0)