+ Hello from React-JSS! +
+); + +const WithInjectedSheet = injectSheet(styles)(DemoTitle); + +export class ReactJssDemo extends React.Component { + componentDidMount() { + const serverStyles = document.getElementById('server-side-styles'); + if (serverStyles) { + serverStyles.parentNode.removeChild(serverStyles); + } + } + + render() { + return
+
+ {
+ if (staticContext) staticContext.status = 404;
+
+ return
+
+ );
+
+ if (typeof window === 'undefined') {
+ return (
+ Not Found :(
; + }} + /> +
](/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 (
-
- {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 (
-
-
- );
- }
-});
-```
-
-Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to `React.createElement(tagName)` expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
-
-### Using props
-
-Let's create the `Comment` component, which will depend on data passed in from our `CommentList` component. Data passed in from the `CommentList` component is available as a 'property' on our `Comment` component. These 'properties' are accessed through `this.props`. Using props, we will be able to read the data passed to the `Comment` from the `CommentList`, and render some markup:
-
-```javascript
-var Comment = React.createClass({
- render: function() {
- return (
- Comments
-
-
- );
- }
-});
-```
-
-By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on `this.props` and any nested elements as `this.props.children`.
-
-### Component Properties
-
-Now that we have defined the `Comment` component, we will want to pass it the author name and comment text. This allows us to reuse the same code for each unique comment. Now let's add some comments within our `CommentList`:
-
-```javascript{5-7}
-var CommentList = React.createClass({
- render: function() {
- return (
- - {this.props.author} -
- {this.props.children} -
- 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.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 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 (
- - {this.props.author} -
- -
-
- );
- }
-});
-
-ReactDOM.render(
- 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(
-
-
- );
- }
-});
-```
-
-`getInitialState()` executes exactly once during the lifecycle of the component and sets up the initial state of the component.
-
-#### Updating state
-When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. We'll use the standard XMLHttpRequest API to retrieve the data. If you need support for old browsers (mainly old Internet Explorer), you can use an AJAX library or a multipurpose library such as jQuery. `componentWillMount()` executes immediately and only once before the rendering occurs. In the following example, `componentWillMount()` loads the data from our XMLHttpRequest and assigns it to the `data` variable. Finally, it sets the `data` variable in state, using `setState()`.
-
-```javascript{6-12}
-var CommentBox = React.createClass({
- getInitialState: function() {
- return {data: []};
- },
- componentWillMount: function() {
- var xhr = new XMLHttpRequest();
- xhr.open('get', this.props.url, true);
- xhr.onload = function() {
- var data = JSON.parse(xhr.responseText);
- this.setState({ data: data });
- }.bind(this);
- xhr.send();
- },
- render: function() {
- return (
- Comments
-
-
- );
- }
-});
-```
-
-Here, `componentDidMount()` is a method called automatically by React *after* a component is rendered for the first time. So, by moving the XMLHttpRequest call from `componentWillMount()`, which is executed only once *before* rendering, to a function called `loadCommentsFromServer()`, we can then call it multiple times from `componentDidMount()` at a set interval to check for any updates to the comments. The key to dynamic updates is the call to `this.setState()`. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is only a minor change to add live updates. We will use simple polling here but you could easily use [SignalR](http://signalr.net/) or other technologies.
-
-```javascript{2,15-16,30}
-var CommentBox = React.createClass({
- loadCommentsFromServer: function() {
- var xhr = new XMLHttpRequest();
- xhr.open('get', this.props.url, true);
- xhr.onload = function() {
- var data = JSON.parse(xhr.responseText);
- this.setState({ data: data });
- }.bind(this);
- xhr.send();
- },
- getInitialState: function() {
- return {data: []};
- },
- componentDidMount: function() {
- this.loadCommentsFromServer();
- window.setInterval(this.loadCommentsFromServer, this.props.pollInterval);
- },
- render: function() {
- return (
- Comments
-
-
- );
- }
-});
-
-ReactDOM.render(
- Comments
-
-
- );
- }
-});
-```
-
-Now that `CommentBox` has made the callback available to `CommentForm` via the `onCommentSubmit` prop, the `CommentForm` can call the callback when the user submits the form:
-
-```javascript{18}
-var CommentForm = React.createClass({
- getInitialState: function() {
- return {author: '', text: ''};
- },
- handleAuthorChange: function(e) {
- this.setState({author: e.target.value});
- },
- handleTextChange: function(e) {
- this.setState({text: e.target.value});
- },
- handleSubmit: function(e) {
- e.preventDefault();
- var author = this.state.author.trim();
- var text = this.state.text.trim();
- if (!text || !author) {
- return;
- }
- this.props.onCommentSubmit({author: author, text: text});
- this.setState({author: '', text: ''});
- },
- render: function() {
- return (
-
- );
- }
-});
-```
-
-Now that the callbacks are in place, all we have to do is submit to the server and refresh the list:
-
-```javascript{12-21,42}
-var CommentBox = React.createClass({
- loadCommentsFromServer: function() {
- var xhr = new XMLHttpRequest();
- xhr.open('get', this.props.url, true);
- xhr.onload = function() {
- var data = JSON.parse(xhr.responseText);
- this.setState({ data: data });
- }.bind(this);
- xhr.send();
- },
- handleCommentSubmit: function(comment) {
- var data = new FormData();
- data.append('author', comment.author);
- data.append('text', comment.text);
-
- var xhr = new XMLHttpRequest();
- xhr.open('post', this.props.submitUrl, true);
- xhr.onload = function() {
- this.loadCommentsFromServer();
- }.bind(this);
- xhr.send(data);
- },
- getInitialState: function() {
- return {data: []};
- },
- componentDidMount: function() {
- this.loadCommentsFromServer();
- window.setInterval(this.loadCommentsFromServer, this.props.pollInterval);
- },
- render: function() {
- return (
- Comments
-
-
- );
- }
-});
-
-ReactDOM.render(
- Comments
-
-
- );
- }
-});
-```
-
-## Optimization: Bundling and minification
-Bundling refers to the practice of combining multiple JavaScript files into a single large file to reduce the number of HTTP requests to load a page. Minification refers to the removal of comments and unnecessary whitespace from JavaScript files to make them smaller. Together, bundling and minification can help to significantly improve the performance of your website.
-
-There used to be a section on bundling and minification in this tutorial, but unfortunately the latest library being used by ASP.NET Core MVC ([BundlerMinifier](https://github.com/madskristensen/BundlerMinifier)) is not easily extensible, which makes it difficult to add JSX processing to it. For production use, it is currently recommended to use a tool like Gulp or [Webpack](/guides/webpack.html) to bundle and minify your JavaScript.
-
-## Optimization: Server-side rendering
-
-Server-side rendering means that your application initially renders the components on the server-side, rather than fetching data from the server and rendering using JavaScript. This enhances the performance of your application since the user will see the initial state immediately.
-
-We need to make some modifications to `CommentBox` to support server-side rendering. Firstly, we need to accept an `initialData` prop, which will be used to set the initial state of the component, rather than doing an AJAX request. We also need to remove the `loadCommentsFromServer` call from `componentDidMount`, since it is no longer required. Also, we need to remove the `ReactDOM.render` call from the JSX file, as server-side rendering automatically outputs the correct `ReactDOM.render` call for you.
-
-```javascript{28}
-var CommentBox = React.createClass({
- loadCommentsFromServer: function() {
- var xhr = new XMLHttpRequest();
- xhr.open('get', this.props.url, true);
- xhr.onload = function() {
- var data = JSON.parse(xhr.responseText);
- this.setState({ data: data });
- }.bind(this);
- xhr.send();
- },
- handleCommentSubmit: function(comment) {
- var comments = this.state.data;
- var newComments = comments.concat([comment]);
- this.setState({data: newComments});
-
- var data = new FormData();
- data.append('author', comment.author);
- data.append('text', comment.text);
-
- var xhr = new XMLHttpRequest();
- xhr.open('post', this.props.submitUrl, true);
- xhr.onload = function() {
- this.loadCommentsFromServer();
- }.bind(this);
- xhr.send(data);
- },
- getInitialState: function() {
- return { data: this.props.initialData };
- },
- componentDidMount: function() {
- window.setInterval(this.loadCommentsFromServer, this.props.pollInterval);
- },
- render: function() {
- return (
- Comments
-
-
- );
- }
-});
-```
-
-We also need to update the `Comment` component to use `Remarkable` from either `global` or `window`, due to a bug in Remarkable. We will do this by creating a function to create an instance of `Remarkable` and then calling it from the `Comment` component:
-```javascript{3}
-function createRemarkable() {
- var remarkable = (("undefined" != typeof global) && (global.Remarkable)) ? global.Remarkable : window.Remarkable;
- return new remarkable();
-}
-
-var Comment = React.createClass({
- rawMarkup: function () {
- var md = createRemarkable();
- var rawMarkup = md.render(this.props.children.toString());
- return { __html: rawMarkup };
- },
-```
-
-In the view, we will accept the list of comments as the model, and use `Html.React` to render the component. This will replace the `ReactDOM.render` call that currently exists in Tutorial.jsx. All the props from the current `ReactDOM.render` call should be moved here, and the `ReactDOM.render` call should be deleted.
-
-```html{1,10-16,21}
-@model IEnumerableComments
-
-
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!
-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 or .NET Core. - Take a look at [the tutorial](/getting-started/tutorial.html) to see how + Take a look at [the tutorial](/tutorials/aspnetcore.html) to see how easy it is to get started with React and ReactJS.NET!
@@ -48,16 +49,18 @@ id: home ```javascript // /Scripts/HelloWorld.jsx -var HelloWorld = React.createClass({ +class HelloWorld extends React.Component { 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,13} +class Comment extends React.Component { + rawMarkup() { + const md = new Remarkable(); + const rawMarkup = md.render(this.props.children.toString()); + return { __html: rawMarkup }; + } + render() { + return ( +{this.props.author}
+ +Comments
+Comments
+Comments
+Comments
+Comments
+Comments
+Comments
+Comments
+{this.props.author}
+ +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,13} +class Comment extends React.Component { + rawMarkup() { + const md = new Remarkable(); + const rawMarkup = md.render(this.props.children.toString()); + return { __html: rawMarkup }; + } + render() { + return ( +{this.props.author}
+ +Comments
+Comments
+Comments
+Comments
+Comments
+Comments
+Comments
+Comments
+Daniel Lo Nigro
+Hello ReactJS.NET World!
+- This is an example of ReactJS.NET's server-side rendering. The initial state of this - comments box is rendered server-side, and additional data is loaded via AJAX and rendered - client-side. -
- - - @Html.React("CommentsBox", new { initialComments = Model.Comments }) - - - - - - - - @Html.ReactInitJavaScript() - - diff --git a/src/React.Sample.CoreMvc/web.config b/src/React.Sample.CoreMvc/web.config deleted file mode 100644 index 05ac0e36d..000000000 --- a/src/React.Sample.CoreMvc/web.config +++ /dev/null @@ -1,9 +0,0 @@ - -Comments
-- {commentNodes} -
- {this.renderMoreLink()} -Comments
-- {commentNodes} -
- {this.renderMoreLink()} -Comments
+{commentNodes}
+ {renderMoreLink()} ++
ASP.NET MVC Sample
++
+ This is an example of ReactJS.NET's server-side rendering. The initial state of this + comments box is rendered server-side, and additional data is loaded via AJAX and rendered + client-side. +
+ + @Html.React("CommentsBox", new { initialComments = Model.Comments, page = Model.Page }) + + + + + + @Scripts.Render("~/bundles/main") + + @Html.ReactInitJavaScript() +Comments
-- {commentNodes} -
- {this.renderMoreLink()} -- This is an example of ReactJS.NET's server-side rendering. The initial state of this - comments box is rendered server-side, and additional data is loaded via AJAX and rendered - client-side. -
- - - @Html.React("Components.CommentsBox", new { initialComments = Model.Comments }) - - - - - - - - @Html.ReactInitJavaScript() - - diff --git a/src/React.Sample.Webpack/Views/Web.config b/src/React.Sample.Webpack/Views/Web.config deleted file mode 100644 index d393a03eb..000000000 --- a/src/React.Sample.Webpack/Views/Web.config +++ /dev/null @@ -1,59 +0,0 @@ - - -Comments