You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This guide covers enabling server-side rendering and Babel compilation. If you want a step-by-step guide on configuring a brand new site, see [the ReactJS.NET tutorial for ASP.NET](/getting-started/tutorial_aspnet4.html).
8
+
9
+
ReactJS.NET requires Visual Studio 2015 and MVC 4 or 5.
10
+
11
+
Install the `React.Web.Mvc4` package through NuGet. You will also need to install a JS engine to use (either V8 or ChakraCore are recommended). See the [JSEngineSwitcher docs](https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines) for more information.
12
+
13
+
To use V8, add the following packages:
14
+
15
+
```
16
+
JavaScriptEngineSwitcher.V8
17
+
JavaScriptEngineSwitcher.V8.Native.win-x64
18
+
```
19
+
20
+
`ReactConfig.cs` will be automatically generated for you. Update it to register a JS engine and your JSX files:
Copy file name to clipboardExpand all lines: site/jekyll/getting-started/aspnetcore.md
+23-3Lines changed: 23 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,14 +4,18 @@ layout: docs
4
4
title: Getting Started on ASP.NET Core
5
5
---
6
6
7
-
Getting started with ReactJS.NET on ASP.NET Core requires a few more steps compared to previous versions of ASP.NET and MVC. If you want a step-by-step guide on configuring a brand new site, see [the ReactJS.NET tutorial for ASP.NET Core](/getting-started/tutorial.html).
7
+
This guide covers enabling server-side rendering and Babel compilation. Getting started with ReactJS.NET on ASP.NET Core requires a few more steps compared to previous versions of ASP.NET and MVC. If you want a step-by-step guide on configuring a brand new site, see [the ReactJS.NET tutorial for ASP.NET Core](/getting-started/tutorial.html).
8
8
9
9
ReactJS.NET requires Visual Studio 2015 and ASP.NET Core RTM (final release). It is recommended to use .NET Framework, but ReactJS.NET also works with .NET Core.
10
10
11
-
Install the `React.AspNet` package through NuGet. After the package is installed, ReactJS.NET needs to be initialised in your `Startup.cs` file (unfortunately this can not be done automatically like in previous versions of ASP.NET with WebActivator). At the top of the file, add:
11
+
Install the `React.AspNet` package through NuGet. You will also need to install a JS engine to use (either V8 or ChakraCore are recommended). See the [JSEngineSwitcher docs](https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines) for more information. After these packages are installed, ReactJS.NET needs to be initialised in your `Startup.cs` file (unfortunately this can not be done automatically like in previous versions of ASP.NET with WebActivator).
@@ -66,6 +74,18 @@ Finally, add this to `Views\_ViewImports.cshtml` (or create it if it doesn't exi
66
74
@usingReact.AspNet
67
75
```
68
76
69
-
Once ReactJS.NET has been configured, you will be able to use [on-the-fly JSX to JavaScript compilation](/getting-started/usage.html) and [server-side rendering](/guides/server-side-rendering.html).
77
+
Reference JSX files directly in script tags:
78
+
79
+
```html
80
+
<scriptsrc="~/Content/Sample.jsx"></script>
81
+
```
82
+
83
+
You're done! You can now call `Html.React` from within Razor files:
84
+
85
+
```
86
+
@Html.React("Sample", new { initialComments = Model.Comments, page = Model.Page })
87
+
```
70
88
71
89
If you need support for non-Windows platforms, please see the [ChakraCore guide](/guides/chakracore.html).
90
+
91
+
Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.CoreMvc) for a working demo.
Copy file name to clipboardExpand all lines: site/jekyll/getting-started/tutorial.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -201,15 +201,15 @@ If you see this, congratulations! You've just built your first React component.
201
201
The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:
202
202
203
203
```javascript
204
-
var CommentBox =React.createClass({displayName:'CommentBox',
Copy file name to clipboardExpand all lines: site/jekyll/getting-started/tutorial_aspnet4.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -126,15 +126,15 @@ If you see this, congratulations! You've just built your first React component.
126
126
The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:
127
127
128
128
```javascript
129
-
var CommentBox =React.createClass({displayName:'CommentBox',
Copy file name to clipboardExpand all lines: site/jekyll/guides/es6.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,14 +28,14 @@ var OldAndBusted = React.createClass({
28
28
});
29
29
30
30
// The new way
31
-
var NewHotness = React.createClass({
31
+
class NewHotness extends React.Component {
32
32
render() {
33
33
// ...
34
34
},
35
35
doStuff() {
36
36
// ...
37
37
}
38
-
});
38
+
};
39
39
```
40
40
41
41
***[Classes](http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes)**— Similar to the class systems included in JavaScript frameworks such as Prototype and MooTools, but will (eventually) be native to JavaScript
Copy file name to clipboardExpand all lines: site/jekyll/guides/mono.md
+2-25Lines changed: 2 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,31 +3,8 @@ layout: docs
3
3
title: Linux (Mono)
4
4
---
5
5
6
-
ReactJS.NET includes full support for Mono via Google's [V8 JavaScript engine](https://code.google.com/p/v8/), the same engine used by Google Chrome and Node.js. To use ReactJS.NET with Mono, you need to compile V8 and VroomJs (a .NET wrapper around V8). This can be accomplished by running the following shell commands on your Linux or Mac OS X machine:
6
+
While Mono is supported, we strongly recommend using .NET Core instead.
7
7
8
-
```sh
9
-
# Get a supported version of V8
10
-
cd /usr/local/src/
11
-
git clone https://github.com/v8/v8.git v8-3.17
12
-
cd v8-3.17
13
-
git checkout tags/3.17.16.2
14
-
15
-
# Build V8
16
-
make dependencies
17
-
make native werror=no library=shared soname_version=3.17.16.2 -j4
ReactJS.NET includes full support for Mono via Google's [V8 JavaScript engine](https://code.google.com/p/v8/), the same engine used by Google Chrome and Node.js. To use ReactJS.NET with Mono, follow the documentation on the [JavaScriptEngineSwitcher repo](https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/JS-Engine-Switcher:-Vroom) to build Vroom, and then register the JS Engine as the default in `Startup.cs`. For example on how to do this, see the [ChakraCore guide](/guides/chakracore.html).
32
9
33
10
If VroomJs fails to load, you will see an exception when your application is started. If this happens, run Mono with the `MONO_LOG_LEVEL=debug` environment variable to get more useful debugging information. Often, this occurs when Mono is unable to locate V8 (ie. it's not in /usr/lib/ or /usr/local/lib/)
Copy file name to clipboardExpand all lines: site/jekyll/guides/webpack.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,8 @@ layout: docs
3
3
title: Webpack
4
4
---
5
5
6
+
This guide is for Webpack 1. To see the latest example for how to use webpack, check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack).
7
+
6
8
[Webpack](http://webpack.github.io/docs/what-is-webpack.html) is a popular module bundling system built on top of Node.js. It can handle not only combination and minification of JavaScript and CSS files, but also other assets such as image files (spriting) through the use of plugins. Webpack can be used as an alternative to Cassette or ASP.NET Combination and Minification. This guide assumes you have already [installed Webpack](http://webpack.github.io/docs/installation.html).
7
9
8
10
In order to use Webpack with ReactJS.NET's server-side rendering, it is suggested that you create a separate bundle ("[entry point](http://webpack.github.io/docs/multiple-entry-points.html)") containing *only* the code required to perform server-side rendering. Any components you would like to render server-side must be exposed globally so that ReactJS.NET can access them. This can be done through the [Webpack expose loader](https://github.com/webpack/expose-loader):
0 commit comments