Skip to content

Commit 1a14107

Browse files
Daniel15Daniel15
committed
Add completed version of tutorial code
1 parent 649f4a5 commit 1a14107

File tree

18 files changed

+499
-0
lines changed

18 files changed

+499
-0
lines changed

‎site/jekyll/getting-started/tutorial.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ It'll also have a few neat features:
2424
* **Live updates:** other users' comments are popped into the comment view in real time.
2525
* **Markdown formatting:** users can use Markdown to format their text.
2626

27+
## Want to skip all this and just see the source?
28+
29+
[It's all on GitHub](https://github.com/reactjs/React.NET/tree/master/tutorial-code).
30+
2731
## Getting started
2832

2933
For this tutorial we'll be using Visual Studio 2015. If you do not already have a copy of Visual Studio, [the Community version](https://www.visualstudio.com/vs/community/) is free. We will be using ASP.NET Core MVC.

‎tutorial-code/Controllers/HomeController.cs

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
using System.Collections.Generic;
2+
using Microsoft.AspNetCore.Mvc;
3+
using ReactDemo.Models;
4+
5+
namespace ReactDemo.Controllers
6+
{
7+
public class HomeController : Controller
8+
{
9+
private static readonly IList<CommentModel> _comments;
10+
11+
static HomeController()
12+
{
13+
_comments = new List<CommentModel>
14+
{
15+
new CommentModel
16+
{
17+
Id = 1,
18+
Author = "Daniel Lo Nigro",
19+
Text = "Hello ReactJS.NET World!"
20+
},
21+
new CommentModel
22+
{
23+
Id = 2,
24+
Author = "Pete Hunt",
25+
Text = "This is one comment"
26+
},
27+
new CommentModel
28+
{
29+
Id = 3,
30+
Author = "Jordan Walke",
31+
Text = "This is *another* comment"
32+
},
33+
};
34+
}
35+
36+
public ActionResult Index()
37+
{
38+
return View(_comments);
39+
}
40+
41+
[Route("comments")]
42+
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
43+
public ActionResult Comments()
44+
{
45+
return Json(_comments);
46+
}
47+
48+
[Route("comments/new")]
49+
[HttpPost]
50+
public ActionResult AddComment(CommentModel comment)
51+
{
52+
// Create a fake ID for this comment
53+
comment.Id = _comments.Count + 1;
54+
_comments.Add(comment);
55+
return Content("Success :)");
56+
}
57+
}
58+
}

‎tutorial-code/Models/CommentModel.cs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
namespace ReactDemo.Models
2+
{
3+
public class CommentModel
4+
{
5+
public int Id { get; set; }
6+
public string Author { get; set; }
7+
public string Text { get; set; }
8+
}
9+
}

‎tutorial-code/Program.cs

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.IO;
4+
using System.Linq;
5+
using System.Threading.Tasks;
6+
using Microsoft.AspNetCore.Hosting;
7+
8+
namespace ReactDemo
9+
{
10+
public class Program
11+
{
12+
public static void Main(string[] args)
13+
{
14+
var host = new WebHostBuilder()
15+
.UseKestrel()
16+
.UseContentRoot(Directory.GetCurrentDirectory())
17+
.UseIISIntegration()
18+
.UseStartup<Startup>()
19+
.Build();
20+
21+
host.Run();
22+
}
23+
}
24+
}

‎tutorial-code/Properties/launchSettings.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:24139/",
7+
"sslPort": 0
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"environmentVariables": {
15+
"ASPNETCORE_ENVIRONMENT": "Development"
16+
}
17+
},
18+
"ReactDemo": {
19+
"commandName": "Project",
20+
"launchBrowser": true,
21+
"launchUrl": "http://localhost:5000",
22+
"environmentVariables": {
23+
"ASPNETCORE_ENVIRONMENT": "Development"
24+
}
25+
}
26+
}
27+
}

‎tutorial-code/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This is the source code from the [tutorial on the ReactJS.NET site](https://reactjs.net/getting-started/tutorial.html).

‎tutorial-code/ReactDemo.sln

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio 14
4+
VisualStudioVersion = 14.0.25420.1
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{C71B9157-9688-4CFB-812C-D0DD3AB74F21}"
7+
ProjectSection(SolutionItems) = preProject
8+
global.json = global.json
9+
EndProjectSection
10+
EndProject
11+
Project("{8BB2217D-0F2D-49D1-97BC-3654ED321F3B}") = "ReactDemo", "ReactDemo.xproj", "{F8367AC0-D731-4946-BCA8-972A6DBE9730}"
12+
EndProject
13+
Global
14+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
15+
Debug|Any CPU = Debug|Any CPU
16+
Release|Any CPU = Release|Any CPU
17+
EndGlobalSection
18+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
19+
{F8367AC0-D731-4946-BCA8-972A6DBE9730}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
20+
{F8367AC0-D731-4946-BCA8-972A6DBE9730}.Debug|Any CPU.Build.0 = Debug|Any CPU
21+
{F8367AC0-D731-4946-BCA8-972A6DBE9730}.Release|Any CPU.ActiveCfg = Release|Any CPU
22+
{F8367AC0-D731-4946-BCA8-972A6DBE9730}.Release|Any CPU.Build.0 = Release|Any CPU
23+
EndGlobalSection
24+
GlobalSection(SolutionProperties) = preSolution
25+
HideSolutionNode = FALSE
26+
EndGlobalSection
27+
EndGlobal

‎tutorial-code/ReactDemo.xproj

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<PropertyGroup>
4+
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
5+
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
6+
</PropertyGroup>
7+
<Import Project="$(VSToolsPath)\DotNet\Microsoft.DotNet.Props" Condition="'$(VSToolsPath)' != ''" />
8+
<PropertyGroup Label="Globals">
9+
<ProjectGuid>f8367ac0-d731-4946-bca8-972a6dbe9730</ProjectGuid>
10+
<RootNamespace>ReactDemo</RootNamespace>
11+
<BaseIntermediateOutputPath Condition="'$(BaseIntermediateOutputPath)'=='' ">.\obj</BaseIntermediateOutputPath>
12+
<OutputPath Condition="'$(OutputPath)'=='' ">.\bin\</OutputPath>
13+
<TargetFrameworkVersion>v4.6</TargetFrameworkVersion>
14+
</PropertyGroup>
15+
<PropertyGroup>
16+
<SchemaVersion>2.0</SchemaVersion>
17+
</PropertyGroup>
18+
<ItemGroup>
19+
<DnxInvisibleContent Include="bower.json" />
20+
<DnxInvisibleContent Include=".bowerrc" />
21+
</ItemGroup>
22+
<Import Project="$(VSToolsPath)\DotNet.Web\Microsoft.DotNet.Web.targets" Condition="'$(VSToolsPath)' != ''" />
23+
</Project>

‎tutorial-code/Startup.cs

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using Microsoft.AspNetCore.Builder;
6+
using Microsoft.AspNetCore.Hosting;
7+
using Microsoft.AspNetCore.Http;
8+
using Microsoft.Extensions.Configuration;
9+
using Microsoft.Extensions.DependencyInjection;
10+
using Microsoft.Extensions.Logging;
11+
using Newtonsoft.Json;
12+
using Newtonsoft.Json.Serialization;
13+
using React.AspNet;
14+
15+
namespace ReactDemo
16+
{
17+
public class Startup
18+
{
19+
public Startup(IHostingEnvironment env)
20+
{
21+
var builder = new ConfigurationBuilder()
22+
.SetBasePath(env.ContentRootPath)
23+
.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
24+
.AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
25+
.AddEnvironmentVariables();
26+
Configuration = builder.Build();
27+
}
28+
29+
public IConfigurationRoot Configuration { get; }
30+
31+
// This method gets called by the runtime. Use this method to add services to the container.
32+
public void ConfigureServices(IServiceCollection services)
33+
{
34+
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
35+
services.AddReact();
36+
// Add framework services.
37+
services.AddMvc();
38+
}
39+
40+
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
41+
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
42+
{
43+
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
44+
loggerFactory.AddDebug();
45+
46+
if (env.IsDevelopment())
47+
{
48+
app.UseDeveloperExceptionPage();
49+
app.UseBrowserLink();
50+
}
51+
else
52+
{
53+
app.UseExceptionHandler("/Home/Error");
54+
}
55+
56+
// Initialise ReactJS.NET. Must be before static files.
57+
app.UseReact(config =>
58+
{
59+
// If you want to use server-side rendering of React components,
60+
// add all the necessary JavaScript files here. This includes
61+
// your components as well as all of their dependencies.
62+
// See http://reactjs.net/ for more information. Example:
63+
config
64+
.AddScript("~/js/remarkable.min.js")
65+
.AddScript("~/js/tutorial.jsx")
66+
.SetJsonSerializerSettings(new JsonSerializerSettings
67+
{
68+
StringEscapeHandling = StringEscapeHandling.EscapeHtml,
69+
ContractResolver = new CamelCasePropertyNamesContractResolver()
70+
});
71+
72+
// If you use an external build too (for example, Babel, Webpack,
73+
// Browserify or Gulp), you can improve performance by disabling
74+
// ReactJS.NET's version of Babel and loading the pre-transpiled
75+
// scripts. Example:
76+
//config
77+
// .SetLoadBabel(false)
78+
// .AddScriptWithoutTransform("~/Scripts/bundle.server.js");
79+
});
80+
81+
app.UseStaticFiles();
82+
83+
app.UseMvc(routes =>
84+
{
85+
routes.MapRoute(
86+
name: "default",
87+
template: "{controller=Home}/{action=Index}/{id?}");
88+
});
89+
}
90+
}
91+
}

‎tutorial-code/Views/Home/Index.cshtml

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@model IEnumerable<ReactDemo.Models.CommentModel>
2+
@{
3+
Layout = null;
4+
}
5+
<html>
6+
<head>
7+
<title>Hello React</title>
8+
</head>
9+
<body>
10+
@Html.React("CommentBox", new
11+
{
12+
initialData = Model,
13+
url = Url.Action("Comments"),
14+
submitUrl = Url.Action("AddComment"),
15+
pollInterval = 2000,
16+
})
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
20+
<script src="@Url.Content("~/js/tutorial.jsx")"></script>
21+
@Html.ReactInitJavaScript()
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)