Permalink
5cbcd22 Jun 11, 2018
3 contributors

Users who have contributed to this file

@Daniel15 @rickbeerendonk @dustinsoftware
133 lines (127 sloc) 4.17 KB
layout title id
default
React integration for ASP.NET MVC
home
ReactJS.NET
React ♥ C# and ASP.NET MVC

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 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 easy it is to get started with React and ReactJS.NET!

Latest news: {{ site.posts.first.title }} ({{ site.posts.first.date | date: "%B %e, %Y" }})

On-the-fly [JSX to JavaScript compilation](/getting-started/usage.html)

Simply name your file with a `.jsx` extension and link to the file via a `script` tag.

The files will automatically be compiled to JavaScript and cached server-side. No precompilation required. Perfect for development.

// /Scripts/HelloWorld.jsx
var HelloWorld = React.createClass({
  render: function() {
    return <div>Hello world!</div>;
  }
});
<!-- Reference it from HTML -->
<script src="@Url.Content("~/Scripts/HelloWorld.jsx")"></script>

JSX to JavaScript compilation via popular minification/combination libraries

Use Cassette or ASP.NET Minification and Combination? ReactJS.NET's got you covered.

Reference your JSX files and they will be included in your bundles along with your other JavaScript files.

If you're a fan of Node.js-based libraries, you can use [Webpack](/guides/webpack.html) or Browserify instead, and still take advantage of ReactJS.NET's server-side rendering.

// In BundleConfig.cs
bundles.Add(new JsxBundle("~/bundles/main").Include(
    // Add your JSX files here
    "~/Scripts/HelloWorld.jsx",
    "~/Scripts/AnythingElse.jsx",
    // You can include regular JavaScript files in the bundle too
    "~/Scripts/ajax.js",
));
<!-- In your view -->
@Scripts.Render("~/bundles/main")

[Server-side component rendering](http://reactjs.net/guides/server-side-rendering.html)

Pre-render the initial state of your React components server-side to make the initial load feel faster.

<!-- This will render the component server-side -->
@Html.React("CommentsBox", new {
    initialComments = Model.Comments
})

<!-- Initialise the component in JavaScript too -->
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>

@Scripts.Render("~/bundles/main")
@Html.ReactInitJavaScript()