{{ page.title }}
{% if content != '' %}
{{ page.excerpt }}
{% else %}
{{ page.content }}
{% endif %}
React.NET-release-3.1.0/site/jekyll/_includes/nav_blog.html 0000664 0000000 0000000 00000000561 13126303303 0023470 0 ustar 00root root 0000000 0000000
React.NET-release-3.1.0/site/jekyll/_includes/nav_docs.html 0000664 0000000 0000000 00000000724 13126303303 0023476 0 ustar 00root root 0000000 0000000
React.NET-release-3.1.0/site/jekyll/_layouts/ 0000775 0000000 0000000 00000000000 13126303303 0020703 5 ustar 00root root 0000000 0000000 React.NET-release-3.1.0/site/jekyll/_layouts/default.html 0000664 0000000 0000000 00000010520 13126303303 0023213 0 ustar 00root root 0000000 0000000
{{ content }}
React.NET-release-3.1.0/site/jekyll/_layouts/docs.html 0000664 0000000 0000000 00000000700 13126303303 0022516 0 ustar 00root root 0000000 0000000 ---
layout: default
sectionid: docs
---
{{ site.name }}
{{ page.title }}
{{ page.description }}
{{ content }}
Comments
{{ page.title }}
{{ content }}
Comments
{% for page in paginator.posts %}
{% endfor %}
{% if paginator.previous_page %}
« Previous Page
{% endif %}
{% if paginator.next_page %}
Next Page »
{% endif %}
](/img/tutorial/newproject_core.png)
3. 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)
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).
### Remove example content
The default Web Application template includes some example content that we don't need. Delete the following files:
- `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.
[
](/img/tutorial/nuget_core.png)
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:
At the top of the file, add:
```csharp
using Microsoft.AspNetCore.Http;
using React.AspNet;
```
Directly above:
```csharp
// Add framework services.
services.AddMvc();
```
Add:
```csharp
services.AddSingleton`. Add this code to `Tutorial.jsx`:
```javascript
var CommentBox = React.createClass({
render: function() {
return (
If you see this, congratulations! You've just built your first React component. You can leave the application running while you continue this tutorial. Simply change the JSX file and refresh to see your changes.
#### JSX Syntax
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:
```javascript
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);
```
Its use is optional but we've found JSX syntax easier to use than plain JavaScript. Read more on the [JSX Syntax article](http://facebook.github.io/react/docs/jsx-in-depth.html).
#### What's going on
We pass some methods in a JavaScript object to `React.createClass()` to create a new React component. The most important of these methods is called `render` which returns a tree of React components that will eventually render to HTML.
The `
Hello, world! I am a CommentBox.
);
}
});
ReactDOM.render(
If you see this, congratulations! You've just built your first React component. You can leave the application running while you continue this tutorial. Simply change the JSX file and refresh to see your changes.
#### JSX Syntax
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:
```javascript
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);
```
Its use is optional but we've found JSX syntax easier to use than plain JavaScript. Read more on the [JSX Syntax article](http://facebook.github.io/react/docs/jsx-in-depth.html).
#### What's going on
We pass some methods in a JavaScript object to `React.createClass()` to create a new React component. The most important of these methods is called `render` which returns a tree of React components that will eventually render to HTML.
The `` tags are not actual DOM nodes; they are instantiations of React `div` components. You can think of these as markers or pieces of data that React knows how to handle. React is **safe**. We are not generating HTML strings so XSS protection is the default.
You do not have to return basic HTML. You can return a tree of components that you (or someone else) built. This is what makes React **composable**: a key tenet of maintainable frontends.
`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](http://facebook.github.io/react-native/)).
## Composing components
Let's build skeletons for `CommentList` and `CommentForm` which will, again, be simple `
`s. Add these two components to the top of your file, just before the existing `CommentBox` declaration and `ReactDOM.render` call:
```javascript
var CommentList = React.createClass({
render: function() {
return (
Hello ReactJS.NET World!
This is one comment
This is *another* comment
);
}
});
```
Note that we have passed some data from the parent `CommentList` component to the child `Comment` components. For example, we passed *Daniel Lo Nigro* (via the `author` attribute) and *Hello ReactJS.NET World* (via an XML-like child node) to the first `Comment`. As noted above, the `Comment` component will access these 'properties' through `this.props.author`, and `this.props.children`.
### Adding Markdown
Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.
In this tutorial we use a third-party library **remarkable** which takes Markdown text and converts it to raw HTML. We already included this library with the original markup for the page, so we can just start using it. Let's convert the comment text to Markdown and output it:
```javascript{3,9}
var Comment = React.createClass({
render: function() {
var md = new Remarkable();
return (
);
}
});
```
All we're doing here is calling the remarkable library. We need to convert `this.props.children` from React's wrapped text to a raw string that remarkable will understand so we explicitly call `toString()`.
But there's a problem! Our rendered comments look like this in the browser: "`
);
}
});
```
This is a special API that intentionally makes it difficult to insert raw HTML, but for remarkable we'll take advantage of this backdoor.
**Remember:** by using this feature you're relying on remarkable to be secure. In this case, remarkable automatically strips HTML markup and insecure links from the output.
### Hook up the data model
So far we've been inserting the comments directly in the source code. Instead, let's render a blob of JSON data into the comment list. Eventually this will come from the server, but for now, write it in your source:
```javascript
var data = [
{ id: 1, author: "Daniel Lo Nigro", text: "Hello ReactJS.NET World!" },
{ id: 2, author: "Pete Hunt", text: "This is one comment" },
{ id: 3, author: "Jordan Walke", text: "This is *another* comment" }
];
```
We need to get this data into `CommentList` in a modular way. Modify `CommentBox` and the `ReactDOM.render()` call to pass this data into the `CommentList` via props:
```javascript{6,14}
var CommentBox = React.createClass({
render: function() {
return (
{comment.text}
);
});
return (
_comments;
static HomeController()
{
_comments = new List
{
new CommentModel
{
Id = 1,
Author = "Daniel Lo Nigro",
Text = "Hello ReactJS.NET World!"
},
new CommentModel
{
Id = 2,
Author = "Pete Hunt",
Text = "This is one comment"
},
new CommentModel
{
Id = 3,
Author = "Jordan Walke",
Text = "This is *another* comment"
},
};
}
public ActionResult Index()
{
return View();
}
}
}
```
Let's also add a new controller action to return the list of comments:
```csharp
[Route("comments")]
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public ActionResult Comments()
{
return Json(_comments);
}
```
The `Route` attribute specifies that this action should be used when `/comments` is loaded. This method of defining URL routes is known as "attribute routing".
The `ResponseCache` attribute is used here to prevent browsers from caching the response. When designing a real world API, caching of API requests should be considered more carefully. For this tutorial it is easiest to simply disable caching.
If you hit `/comments` in your browser, you should now see the data encoded as JSON:
### Fetching from the server
Now that we have a data source, we can replace the hard-coded data with the dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:
```javascript{2}
ReactDOM.render(
@{
Layout = null;
}
Hello React
@Html.React("CommentBox", new
{
initialData = Model,
url = Url.Action("Comments"),
submitUrl = Url.Action("AddComment"),
pollInterval = 2000,
})
@Html.ReactInitJavaScript()
```
We need to modify the controller action to pass the data to the view:
```csharp{3}
public ActionResult Index()
{
return View(_comments);
}
```
We also need to modify `Startup.cs` to tell ReactJS.NET which JavaScript files it requires for the server-side rendering:
```csharp{4-10}
// Initialise ReactJS.NET. Must be before static files.
app.UseReact(config =>
{
config
.AddScript("~/js/remarkable.min.js")
.AddScript("~/js/tutorial.jsx");
});
```
Note that we need a copy of Remarkable in order to load it for server-side rendering. In a production app you'd probably use Bower or npm for this, but for our tutorial you can just [download the file from CDNJS](https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js) and save it into `~/js`.
That's it! Now if you build and refresh your application, you should notice that the comments box is rendered immediately rather than having a slight delay. If you view the source of the page, you will see the initial comments directly in the HTML itself:
```html
Hello React
Hello, world! I am a CommentList.
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
Hello, world! I am a CommentForm.
);
}
});
```
Next, update the `CommentBox` component to use these new components:
```javascript{5-7}
var CommentBox = React.createClass({
render: function() {
return (
Comments
{this.props.author}
{this.props.children}{this.props.author}
{md.render(this.props.children.toString())}`This is ``another`` comment`
`". We want those tags to actually render as HTML. That's React protecting you from an [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). There's a way to get around it but the framework warns you not to use it: ```javascript{2-6,14} var Comment = React.createClass({ rawMarkup: function() { var md = new Remarkable(); var rawMarkup = md.render(this.props.children.toString()); return { __html: rawMarkup }; }, render: function() { return ({this.props.author}
Comments
{commentNodes}
);
}
});
```
That's it!
### Server-side Data
Let's return some data from the server. To do so, we need to first create a C# class to represent our comments. Right-click on ReactDemo and select Add → New Folder and name the folder "Models". Once the models folder has been created, right click on it, select Add → Class, and enter "CommentModel.cs" as the file name. We'll create a basic comment model:
```csharp
namespace ReactDemo.Models
{
public class CommentModel
{
public int Id { get; set; }
public string Author { get; set; }
public string Text { get; set; }
}
}
```
In a real application, you'd use the repository pattern here, and retrieve the comments from a database. For simplicity, we'll just modify our controller to have a hard-coded list of comments.
```csharp{9,13-33}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using ReactDemo.Models;
namespace ReactDemo.Controllers
{
public class HomeController : Controller
{
private static readonly IList
### Fetching from the server
Now that we have a data source, we can replace the hard-coded data with the dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:
```javascript{2}
ReactDOM.render(
Comments
Daniel Lo Nigro
Hello ReactJS.NET World!
Comments
{this.props.author}
{this.props.children}{this.props.author}
{md.render(this.props.children.toString())}`This is ``another`` comment`
`". We want those tags to actually render as HTML. That's React protecting you from an [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). There's a way to get around it but the framework warns you not to use it: ```javascript{2-6,14} var Comment = React.createClass({ rawMarkup: function() { var md = new Remarkable(); var rawMarkup = md.render(this.props.children.toString()); return { __html: rawMarkup }; }, render: function() { return ({this.props.author}
Comments
Comments
Comments
Comments
Comments
Comments
Comments
Comments
Comments
Daniel Lo Nigro
Hello ReactJS.NET World!
+"dc}Jd9ϹsɧH?3]8>6^yP2Ly7Z}Q^?JgqgԆ%d ە` ؊t{ 3e~u\l?* )dޙڲ% @.uRBy>0!R&˥[`WJ̯pe&n?ד&neގ-ۣn ?h%\}_χ[2Ry(+UČ{]kJ{Q处D0+JH)8l(+w:ϔөYeq).)CZ .-$+ĽO,x(QSћS$mTJI֭YN"b}#6E%jy6| ^oJJđڒg/,% ~~'@J@ %(J ( J( (6+ l%%wKJg]8_\lĒ#4ХAdmC"".*8djZ* UTZ2NEv QAp{m"z{9[@ $t @$X @$X @$X @0$|%HsmgB ѿI8Vc{Hq{$NR*~31VsAv@9z1& y #Am|b;rIZvEHaD@"[ݍBac$ q`*!lDQ 28I<Ϻ7qg?>AZhy8˰`fHri~Ƭ|#na& gοwj5 nE.?)gS[&G[$B"ssa]e {0#uNL>mʿ֦>): $PPÏ @ ,@ ,@ ,@ ,@ tX#rl x3z*:6ٴHcDz(Zy6b!Jd@:q,n, #td$#cz |/۹H0D= M;, :"$7#uHDeffj%?% I9v cQNo3%:>ϵIOkzH ILhHdmılR<<E2 hY!)bH 'Ӛ i FtYysIzih.53zN_<'Ի ]iZ_) t %$P`3HZ_yYefWW$Aw; 1 Ɖ|n,i&pz'q{rEtm :Hx5p%N~Z.vuZ :8]W: A"!*fmJKc %\UMgv?(X'AO i![~?m$߾5+)ђr$ovGa
vkhW #c)CE)\p=vks x4m6/Nn.3u |$Aw8
vIl{ K.߽ڎ% ΥIlUqKMx)!kI @O@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@! $@w aP־t @P%B %P"@P%B %P"@PJ@(J@(J@(J@(J@(J@(J;Fm0 ͷ!w)u2B;2v.;dڡDNqlZ?hI$% Ec,qI`$ _MH\CsA26!:$I}B}\]bTI &5Tݪ~,u';ApC_b܆1I j+8 #RTlJ@zN$;}jNb8)(w& ]O%^N⓺I4$wr]BghY& }.$enPA806 o'N:$
6OBkkNH^$@ I $,BpH $ H# |TQ IENDB` React.NET-release-3.1.0/site/jekyll/img/tutorial/new_webapp_600.png 0000664 0000000 0000000 00000042327 13126303303 0024715 0 ustar 00root root 0000000 0000000 JFIF C
$ &%# #"(-90(*6+"#2D26;=@@@&0FKE>J9?@= C
=)#)================================================== X BT($h[4J*X- T@ !@
А `ۛOdƍcϤۖs']̹YrSJk̺] bSqݩn\z k^m\zmraNC{~7'C (`B' d &%&&_ڃ.:H-M9]+Vln*^Ө2M J
'ς &8@PJy&8+ ĩY3 jgB"QfIͦy1&i M J )6l 8gŚ>N9\Jd
Ly6$VlN^ K҂3ϫ > qJy9' + Ħ # J&
A6 bS_LAӞfn5d ,kOA9F%$]j#C8Ue"czL 9 +*Y2$E,erB]kǍ39c33s[0rtXa}teꨄ