ReactJS.NET makes it easier to use Facebook's
- [React](http://facebook.github.io/react/) and
- [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) from C# and
+ [React](https://reactjs.org/) and
+ [JSX](https://reactjs.org/docs/jsx-in-depth.html) from C# and
other .NET languages, focusing specifically on ASP.NET MVC (although it
also works in other environments). It supports both ASP.NET 4 (with MVC 4 or 5),
and ASP.NET Core MVC. It is cross-platform and can run on Linux via Mono
@@ -117,8 +117,8 @@ bundles.Add(new JsxBundle("~/bundles/main").Include(
})
-
-
+
+
@Scripts.Render("~/bundles/main")
@Html.ReactInitJavaScript()
@@ -131,7 +131,7 @@ bundles.Add(new JsxBundle("~/bundles/main").Include(
diff --git a/site/jekyll/tutorials/aspnet4.md b/site/jekyll/tutorials/aspnet4.md
index 1ec64369c..3190fc941 100644
--- a/site/jekyll/tutorials/aspnet4.md
+++ b/site/jekyll/tutorials/aspnet4.md
@@ -101,8 +101,8 @@ Replace the contents of the new view file with the following:
-
-
+
+
@@ -179,7 +179,7 @@ You do not have to return basic HTML. You can return a tree of components that y
`ReactDOM.render()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.
-The `ReactDOM` module exposes DOM-specific methods, while `React` has the core tools shared by React on different platforms (e.g., [React Native](https://facebook.github.io/react-native/)).
+The `ReactDOM` module exposes DOM-specific methods, while `React` has the core tools shared by React on different platforms (e.g., [React Native](https://reactnative.dev/)).
## Composing components
@@ -991,8 +991,8 @@ Now that the bundle has been registered, we need to reference it from the view:
-
-
+
+
@Scripts.Render("~/bundles/main")
@Html.ReactInitJavaScript()
@@ -1111,8 +1111,8 @@ In the view, we will accept the list of comments as the model, and use `Html.Rea
submitUrl = Url.Action("AddComment"),
pollInterval = 2000
})
-
-
+
+
@Html.ReactInitJavaScript()
diff --git a/site/jekyll/tutorials/aspnetcore.md b/site/jekyll/tutorials/aspnetcore.md
index 2eb663114..0a79d245c 100644
--- a/site/jekyll/tutorials/aspnetcore.md
+++ b/site/jekyll/tutorials/aspnetcore.md
@@ -6,7 +6,19 @@ layout: docs
> Note:
>
-> This tutorial is for Visual Studio 2015 and ASP.NET Core MVC. If you're still using ASP.NET 4 and ASP.NET MVC 5, you can [follow the ASP.NET 4 tutorial instead](/tutorials/aspnet4.html)
+> This tutorial is for Visual Studio 2019 and ASP.NET Core MVC. If you're still using ASP.NET 4 and ASP.NET MVC 5, you can [follow the ASP.NET 4 tutorial instead](/tutorials/aspnet4.html)
+
+## Quick start
+
+```
+dotnet new -i React.Template
+dotnet new reactnet-vanilla
+dotnet run
+```
+
+#### Heads up! This configuration only supports globally-scoped modules. If you're planning on using `require` or `import` module syntax in your application, use the `reactnet-webpack` template instead for webpack support.
+
+## Step by step version
This tutorial covers the end-to-end process of creating a brand new ASP.NET MVC website and adding a React component in it. We will start from scratch and end with a fully functioning component. It assumes you have basic knowledge of ASP.NET MVC and using Visual Studio. This tutorial is based off the [original React tutorial](https://reactjs.org/tutorial/tutorial.html) but has been modified specifically for ReactJS.NET.
@@ -24,26 +36,29 @@ It'll also have a few neat features:
- **Live updates:** other users' comments are popped into the comment view in real time.
- **Markdown formatting:** users can use Markdown to format their text.
-## Want to skip all this and just see the source?
+## Want to skip all this and see the source?
-[It's all on GitHub](https://github.com/reactjs/React.NET/tree/master/tutorial-code).
+[It's all on GitHub](https://github.com/reactjs/React.NET/tree/main/src/React.Template/reactnet-vanilla).
## Getting started
-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.
+For this tutorial we'll be using Visual Studio 2019. 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.
### New Project
Start by creating a new ASP.NET Core MVC project:
-1. File → New → Project
-2. Ensure ".NET Framework 4.6" is selected in the dropdown list at the top
-3. Go to Templates → Visual C# → Web and select the "ASP.NET Core Web Application (.NET Framework)" template. Call it "ReactDemo"
- [
](/img/tutorial/newproject_core.png)
-4. In the "New ASP.NET Core Web Application" dialog, select the Web Application template. Also, click "Change Authentication" and select "No Authentication"
- [
](/img/tutorial/new_webapp.png)
+1. File → New → Project...
+2. Select "ASP.NET Core Web Application". You may search for it via the search box or narrow down your choices via the drop-downs - C#, All platforms, Web is a good way to get it as the first result.
+ [](/img/tutorial/newproject_core.png)
+3. Click "Next".
+4. Enter "ReactDemo" for the project name and location to store it.
+5. Click "Create".
+6. In the "Create a new ASP.NET Core web application" dialog, select the "Web Application (Model-View-Controller)" template. Also, ensure "Change Authentication" is set to "No Authentication".
+ [
](/img/tutorial/new_webapp_2019.png)
+7. Click "Create".
-Note: We are using .NET Framework in this tutorial, but you can instead use .NET Core if you want to be able to run your site on Linux or Mac OS. Currently .NET Core is missing some of the functionality provided by .NET Framework, so it is recommended to use .NET Framework unless you have a reason to use .NET Core specifically (eg. cross-platform support).
+Note: We are using .NET Core 3.1 in this tutorial.
### Remove example content
@@ -51,14 +66,40 @@ The default Web Application template includes some example content that we don't
- `Controllers\HomeController.cs`
- `Views\Home` and `Views\Shared` folders
-- `bundleconfig.json`
-- `Project_Readme.html`
### Install ReactJS.NET
-We need to install ReactJS.NET to the newly-created project. This is accomplished using NuGet, a package manager for .NET. Right-click on the "ReactDemo" project in the Solution Explorer and select "Manage NuGet Packages". Click the "Browse" tab, search for "React.AspNet", and install the **React.AspNet** package.
+We need to install ReactJS.NET to the newly-created project. This is accomplished using NuGet, a package manager for .NET. Right-click on the "ReactDemo" project in the Solution Explorer and select "Manage NuGet Packages...". Click the "Browse" tab, search for "React.AspNet", and install the **React.AspNet** package.
+
+[
](/img/tutorial/nuget_core_2019.png)
+
+### Install a JS engine
+
+While we're managing NuGet packages, we need to install a JS engine. Search for and install one of either:
+
+- `JavaScriptEngineSwitcher.V8` (what this tutorial uses)
+- `JavaScriptEngineSwitcher.ChakraCore`
+
+If you choose ChakraCore, make sure you change any code/using statements in this tutorial where needed.
+
+Now, install the native assembly based on your architecture and engine choice:
-[
](/img/tutorial/nuget_core.png)
+V8:
+
+- `JavaScriptEngineSwitcher.V8.Native.win-x86`
+- `JavaScriptEngineSwitcher.V8.Native.win-x64` (what this tutorial uses)
+
+Chakra:
+
+- `JavaScriptEngineSwitcher.ChakraCore.Native.win-x86`
+- `JavaScriptEngineSwitcher.ChakraCore.Native.win-x64`
+- `JavaScriptEngineSwitcher.ChakraCore.Native.win-arm`
+- `JavaScriptEngineSwitcher.ChakraCore.Native.linux-x64`
+- `JavaScriptEngineSwitcher.ChakraCore.Native.osx-x64`
+
+Lastly, install `JavaScriptEngineSwitcher.Extensions.MsDependencyInjection`.
+
+### Modify Startup.cs
We also need to modify the `Startup.cs` file to initialize ReactJS.NET. You can learn more about this on the [Getting Started on ASP.NET Core](/getting-started/aspnetcore.html) page. Open `Startup.cs` and perform the following changes:
@@ -66,7 +107,7 @@ At the top of the file, add:
```csharp
using Microsoft.AspNetCore.Http;
-using JavaScriptEngineSwitcher.ChakraCore;
+using JavaScriptEngineSwitcher.V8;
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
using React.AspNet;
```
@@ -74,8 +115,7 @@ using React.AspNet;
Directly above:
```csharp
-// Add framework services.
-services.AddMvc();
+services.AddControllersWithViews();
```
Add:
@@ -85,8 +125,8 @@ services.AddSingleton();
services.AddReact();
// Make sure a JS engine is registered, or you will get an error!
-services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
- .AddChakraCore();
+services.AddJsEngineSwitcher(options => options.DefaultEngineName = V8JsEngine.EngineName)
+ .AddV8();
```
Directly **above**:
@@ -106,20 +146,20 @@ app.UseReact(config =>
// your components as well as all of their dependencies.
// See http://reactjs.net/ for more information. Example:
//config
- // .AddScript("~/Scripts/First.jsx")
- // .AddScript("~/Scripts/Second.jsx");
+ // .AddScript("~/js/First.jsx")
+ // .AddScript("~/js/Second.jsx");
- // If you use an external build too (for example, Babel, Webpack,
+ // If you use an external build tool (for example, Babel, Webpack,
// Browserify or Gulp), you can improve performance by disabling
// ReactJS.NET's version of Babel and loading the pre-transpiled
// scripts. Example:
//config
// .SetLoadBabel(false)
- // .AddScriptWithoutTransform("~/Scripts/bundle.server.js");
+ // .AddScriptWithoutTransform("~/js/bundle.server.js");
});
```
-Finally, add this to `Views\_ViewImports.cshtml`:
+Finally, add this to the top of `Views\_ViewImports.cshtml`:
```csharp
@using React.AspNet
@@ -127,18 +167,19 @@ Finally, add this to `Views\_ViewImports.cshtml`:
### Create basic controller and view
-Since this tutorial focuses mainly on ReactJS.NET itself, we will not cover creation of an MVC controller in much detail. To learn more about ASP.NET MVC, refer to [its official website](http://www.asp.net/mvc).
+Since this tutorial focuses mainly on ReactJS.NET itself, we will not cover creation of an MVC controller in much detail. To learn more about ASP.NET MVC, refer to [its official website](https://dotnet.microsoft.com/apps/aspnet/mvc).
-1. Right-click on the Controllers folder and select Add → New Item
-2. Select .NET Core → ASP.NET → MVC Controller Class
+1. Right-click on the Controllers folder and select Add → New Item...
+2. Select ASP.NET Core → Controller Class
3. Name the file `HomeController.cs`
+4. Click "Add"
Once the controller has been created, we also need to create a view
-1. Right-click on the Views folder, click "New Folder", and create a "Home" folder
-2. Right-click on the Views\Home folder and select Add → New Item
-3. Select .NET Core → ASP.NET → MVC View Page
-4. Name the file `Index.cshtml`
+1. Right-click on the Views folder, select Add → New Folder, and create a "Home" folder
+2. Right-click on the Views\Home folder and select Add → View...
+3. Name the view file `Index`
+4. Click "Add"
Replace the contents of the new view file with the following:
@@ -152,8 +193,9 @@ Replace the contents of the new view file with the following:
-
-
+
+
+